Table of contents
=================

  * [Getting started](#getting-started)
  * [Use Cases](#use)
  * [Column configuration](#column-configuration)
  * [MultiLanguage](#multilanguage)
  * [Convert BaseFieldModel to TableColumnField](#convert-basefieldmodel-to-tablecolumnfield)
  * [Drag and Drop](#drag-and-drop)
  * [Responsive columns (Auto-resize)](#responsive-columns-auto-resize)
  * [Integrated Filters (eqp-filters)](#integrated-filters-eqp-filters)
  * [Export](#export)
  * [API](#api)
  * [Credits](#credits)

## Required
- [x] Angular Material installed and imported

## Getting started
### Step 1: Install `eqp-table`:

#### NPM
```shell
npm install --save @eqproject/eqp-table
```
### Step 2: Import the EqpTableModule and install :
```js
import { EqpTableModule } from '@eqproject/eqp-table';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpTableModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

### Step 2: Use in your component

Define selector in html
```html
<eqp-table [headerTitle]="'Title'" [columns]="columns" [data]="DATA"></eqp-table>
```

Define the datasource for the table
```js
  @ViewChild(EqpTableComponent) eqpTable: EqpTableComponent; //To access directly the directive
  columns: Array<ConfigColumn>;

 DATA: any[] = [
    { ID: 0, Name: 'Mario', Surname: 'Rossi', BirthDate: new Date(), Gender: 1, Boolean: true},
    { ID: 1, Name: 'Luigi', Surname: 'Bianchi', BirthDate: new Date(), Gender: 2, Boolean: false}
  ];

 genderEnum = GenderEnum; // For enumerators, need only to create variable and assign to enumerator
```

Define the column configurations
```js
  this.columns = [
    {
        key: "Name",
        display: "Name"
      },
      {
        key: "Surname",
        display: "Surname",
      },
      {
        key: "BirthDate",
        display: "Birth Date",
        type: TypeColumn.Date,
        styles: { flex: "0 0 8%" }
      },
      {
        key: "Gender",
        display: "Gender",
        type: TypeColumn.Enum,
        enumModel: GenderEnum,
        styles: { flex: "0 0 8%" }
      }
  ];
```

### Step 3: Use Example to reload the table :

On onInit, you can call a reload method, that will only refresh the table using viewchild we previously created

```js
this.eqpTable.reloadDatatable(data);
```


## Column configuration

The table supports two ways to define columns. The `[columns]` input accepts an `Array<ConfigColumn>` and is the legacy approach, while `[tableColumnFields]` accepts an `Array<TableColumnField>` and is the recommended approach for new implementations. The two inputs are **mutually exclusive**: passing both at the same time will throw a runtime error.

### Using `[tableColumnFields]` (recommended)

`TableColumnField` extends `BaseFieldModel` and adds typed, column-specific properties. The table internally converts the array to `ConfigColumn` via `TableColumnField.createConfigColumns()`, so all existing features continue to work.

```html
<eqp-table [tableColumnFields]="tableFields" [data]="DATA"></eqp-table>
```

```js
import { TableColumnField, TypeColumn } from '@eqproject/eqp-common';

this.tableFields: Array<TableColumnField> = [
  {
    key: 'Name',
    display: 'Name'
  },
  {
    key: 'BirthDate',
    display: 'Birth Date',
    type: TypeColumn.Date,
    styles: { minWidth: '150px' }
  },
  {
    key: 'Gender',
    display: 'Gender',
    type: TypeColumn.Enum,
    enumModel: GenderEnum,
    isSortable: false,
    styles: { minWidth: '120px' }
  },
  {
    key: 'Actions',
    display: '',
    type: TypeColumn.SimpleAction,
    actions: [
      {
        icon: 'edit',
        fn: (element, index, col) => this.onEdit(element)
      }
    ],
    isStickyEnd: true,
    styles: { minWidth: '80px' }
  }
];
```

### TypeColumn enum values

| Value | Description |
| --- | --- |
| `TypeColumn.Date` | Formats the cell value as a date using the configured `cultureInfo` |
| `TypeColumn.Boolean` | Renders true/false as configurable text labels via the `booleanValues` property |
| `TypeColumn.SimpleAction` | Renders one or more icon buttons per row; each button invokes an `fn` callback |
| `TypeColumn.MenuAction` | Renders a settings icon that opens a dropdown menu of actions |
| `TypeColumn.Enum` | Maps a numeric value to the corresponding enum label |
| `TypeColumn.Icon` | Renders a Material icon whose name is determined from the row data |
| `TypeColumn.Checkbox` | Renders a read-only checkbox reflecting a data property (not linked to row selection) |
| `TypeColumn.Hyperlink` | Renders an `<a>` element; configure target URL and text via the `hyperlink` property |
| `TypeColumn.Image` | Renders an `<img>` element |
| `TypeColumn.Color` | Renders a colored rectangle whose fill is read from the row data |
| `TypeColumn.ExternalTemplate` | Renders a `TemplateRef` passed from the parent component via the `externalTemplate` property |
| `TypeColumn.Navigate` | Renders a link that triggers Angular Router navigation |

### Sticky columns

Individual columns can be pinned to the left or right edge of the table using the `isSticky` and `isStickyEnd` properties on the column configuration. This is particularly useful for action columns that should always remain visible when the table scrolls horizontally. When using sticky columns it is recommended to use `minWidth` rather than `flex` percentages to ensure correct layout behaviour.

```js
{
  key: 'Actions',
  display: '',
  type: TypeColumn.SimpleAction,
  isStickyEnd: true,
  styles: { minWidth: '80px' }
}
```

### Cell alignment

The `styles.cellAlignment` property accepts a value from the `CellAlignmentEnum` enumeration imported from `@eqproject/eqp-common`. The alignment is applied consistently to both the header cell and the data cells of the column.

```js
import { CellAlignmentEnum } from '@eqproject/eqp-common';

{
  key: 'Amount',
  display: 'Amount',
  styles: { minWidth: '100px', cellAlignment: CellAlignmentEnum.RIGHT }
}
```

Available values: `CellAlignmentEnum.LEFT` (default), `CellAlignmentEnum.CENTER`, `CellAlignmentEnum.RIGHT`.


## Multilanguage
### Step 4(not required): Use Multilanguage :

To use multilanguage, set to true the input boolean variable
```html
    <eqp-table [isMultiLanguage]="true"></eqp-table>
```

Then, where you set the language to use, like on login page or in navbar to switch language

```js
    this.translateHelper.loadJsonLanguage("en", jsonObject);
```

Where translateHelper is a service that need to be imported in constructor component as public.

loadJsonLanguage need to set current language, first parameter check the language to use, in the second we need to pass the entire Json for selected language

## Convert BaseFieldModel to TableColumnField

To convert, in your component, you can use static EqpCommonService (eqp-common package required)
```js
        this.tableColumnFields = EqpCommonService.convertAs<TableColumnField>(this.baseFields, TableColumnField, ["firstName", "lastName", "hired"], this.createComplexTableColumnField())

```


baseFields is the base array, ["firstName"]... are the fields I want to be returned and createComplexTableColumnField is the method that contains the transposition logic.

```js

    private createComplexTableColumnField() {
    const additionalProperties: Array<TableColumnField> = [
      {
        key: "Link",
        display: "Link",
        type: TypeColumn.Hyperlink,
        hyperlink: { hyperlinkUrl: "https://google.com", hyperlinkText: "Link", isTargetBlank: true },
        tooltip: { tooltipText: "Colonna di tipo Hyperlink" },
        styles: { minWidth: "150px" }
      },
      {
        key: "birthDate",
        value: (element) => { return element.birthDate },
        display: "Data senza formato",
        type: TypeColumn.Date,
        tooltip: { tooltipText: "Colonna di tipo Date senza formato specifico" },
        styles: { minWidth: "150px" },
      },
      {
        key: "gender",
        display: "Sesso (Enum)",
        type: TypeColumn.Enum,
        enumModel: GenderEnum,
        tooltip: { tooltipText: "Colonna di tipo Enum" },
        multilanguagePrefixKey: "ENUMS.GENDER.",
        styles: { minWidth: "150px" },
      }
    ]

    return additionalProperties;
  }

```

additional complexity logics for the selected properties are defined in the method.


## Drag and Drop

The table integrates Angular CDK drag-and-drop to allow the user to reorder rows manually. Three separate inputs govern the behaviour, and four output events expose the lifecycle of each drag interaction.

```html
<eqp-table
  [columns]="columns"
  [data]="data"
  [enableDragColumn]="true"
  [changeDragRowPosition]="true"
  (dragStartedEvent)="onDragStart($event)"
  (dragDropEvent)="onDrop($event)"
></eqp-table>
```

- **`[enableDragColumn]`** — adds a dedicated drag-handle column (a `open_with` icon) to the left of the table. The drag is activated only when the user grabs this handle, which avoids accidental reordering on a normal row click. When this input is true the `enableDragAndDrop` flag is toggled on and off automatically by the table.
- **`[enableDragAndDrop]`** — enables the drag interaction on every row directly, without requiring a dedicated handle column. Set this when you want the entire row to be draggable.
- **`[changeDragRowPosition]`** — if true, dropping a row updates its position in the internal `dataSource` array and reindexes all `originalIndex` values. If false, only the output events are emitted without modifying the internal data order, which is the correct choice when reordering is managed server-side.

```js
onDrop(payload: { event: CdkDragDrop<any>, row: any }) {
  console.log('Dropped row:', payload.row);
  console.log('From index:', payload.event.previousIndex, '→ to:', payload.event.currentIndex);
}
```

All four drag events share the same payload shape: `{ event: CdkDragXxx, row: any }`, where `row` is the data object bound to the dragged row.


## Responsive columns (Auto-resize)

When `[autoResizeColumns]="true"` is set, the table enters a responsive mode that handles two distinct situations.

**On screens wider than 960 px:** the `ResizeHelper` measures each column's effective pixel width (derived from `styles.flex`, `styles.minWidth` or `styles.maxWidth`) and compares it against the actual container width. Columns that do not fit within the available space are moved into a collapsible detail row rendered below each data row. A `Detail` system column is added automatically to host the expand/collapse toggle button (`add_circle` / `remove_circle`). The icon animates with a 200 ms rotation transition.

**On screens narrower than 960 px:** the header row is hidden and each cell is rendered as a labelled block. The label is taken from the `data-label` attribute, which the table populates automatically from the column `display` value, so no additional markup is required.

```html
<eqp-table
  [columns]="columns"
  [data]="data"
  [autoResizeColumns]="true"
></eqp-table>
```

> **Note:** when `autoResizeColumns` is active it is strongly recommended to define `styles.minWidth` or `styles.maxWidth` on every column rather than `styles.flex` percentages. This gives the `ResizeHelper` the pixel values it needs to accurately calculate whether each column fits within the available space.

The feature is in **BETA**. The single-column filter row is not rendered on desktop while `autoResizeColumns` is active. The `chooseColumnsToShow` selector menu can still be combined with this mode.


## Integrated Filters (eqp-filters)

If the `eqp-filters` library is present in the project, the table can embed a full filter panel above the data area by setting `[enableFilters]="true"`. The optional `[filterObject]` input provides fine-grained control over the filter panel behaviour and appearance (refer to the `FilterObject` model below).

```html
<eqp-table
  [columns]="columns"
  [data]="data"
  [enableFilters]="true"
  [filterObject]="filterConfig"
  (filtersSelected)="onFiltersApplied($event)"
  (customFiltersSavedValueLoaded)="onSavedFilterLoaded($event)"
></eqp-table>
```

```js
import { FilterObject, FilterResultType, FilterMode } from '@eqproject/eqp-common';

this.filterConfig: FilterObject = {
  resultType: FilterResultType.BASIC,
  usingMode: FilterMode.STANDARD,
  filterTitle: 'Filters',
  applyFilterLabel: 'Apply',
  resetAllFilterLabel: 'Reset',
  saveFilter: true,
  saveFilterID: 'my-unique-filter-id',
  complexFilters: []
};
```

The `filtersSelected` output is invoked when the user applies or resets the filters. The shape of its payload depends on the `resultType` configured in `FilterObject`: `BASIC` returns a flat object, `ADVANCED` returns an array of complex filter objects.

The `customFiltersSavedValueLoaded` output is fired when filters are restored from `localStorage` and the active filter configuration includes an external template. Use this to re-populate any template-driven inputs that live outside the standard filter panel. The complete filter configuration is passed as the event parameter.


## Export

To enable data export, pass a configured `ExportEqpTable` object to the `[exportEqpTable]` input. The export button is rendered automatically in the table toolbar. The built-in `EqpMatTableExporterDirective` supports the following formats: `xlsx`, `xls`, `csv`, `pdf`, `json`, `txt`.

```html
<eqp-table
  [columns]="columns"
  [data]="data"
  [exportEqpTable]="exportConfig"
  (eqpExportStarted)="onExportStarted()"
  (eqpExportCompleted)="onExportCompleted()"
></eqp-table>
```

```js
import { ExportEqpTable, ExportType } from '@eqproject/eqp-common';

this.exportConfig: ExportEqpTable = {
  exportFileType: ExportType.XLSX,
  exportFileName: 'my-data',
  buttonText: 'Export Excel',
  buttonIcon: 'download'
};
```

Columns of type `SimpleAction` and `MenuAction` are automatically excluded from the export. If the checkbox selection column is active (`[selection]="true"`), it is also excluded automatically. Additional columns to exclude can be specified via the `hiddenColumns` array, using the zero-based index of each column as it is rendered (including the selection column at index 0 when selection is active).

To trigger a fully custom export without using the built-in formats, define a `customExportFunction` array on `ExportEqpTable`. Each function in the array is called with no arguments; the consuming component is responsible for generating the output file.

```js
this.exportConfig: ExportEqpTable = {
  buttonText: 'Custom Export',
  customExportFunction: [() => this.myCustomExport()]
};
```


## API
### Inputs for basic table configuration
| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [headerTitle] | `string` | `-` | no | Set the table title. |
| [data] | `Array<any>` |  `-` | yes | Array of generic objects with properties. |
| [columns] | `Array<ConfigColumn>` |  `-` | yes* | Array with ConfigColumn as type, need to initialize and import in component. Deprecated in favour of `[tableColumnFields]`. Cannot be used simultaneously with `[tableColumnFields]`. |
| [tableColumnFields] | `Array<TableColumnField>` |  `-` | yes* | Preferred column definition array. Cannot be used simultaneously with `[columns]`. |
| [createMatCard] | `boolean` |  `false` | no | If true, a mat-card will be created as a container for the table |
| [createMatCardHeader] | `boolean` |  `false` | no | Se true, verrà creato una mat-card-header come contenitore del titolo della tabella |
| [tableName] | `string` |  `-` | no | It allows you to define the table name, currently used to save the pagination of the specific table that you want to modify. If omitted, a unique name is automatically assigned to each eqp-table |
| [emptyTableMessage] | `string` |  `Nessun dato trovato` | no | Text to show if the table is empty |
| [disableRow] | `string|Function|boolean` |  `-` | no | Visually disable the row. It accepts a string containing the name of a property that must be contained in the table and that MUST return Boolean values, otherwise it accepts a Function with the same behavior or a Boolean value |
| [isMultiLanguage] | `boolean` |  `false` | no | If true, see section and examples about use, if not interested in use, set to false or don't write it |
| [cultureInfo] | `string` |  `it-IT` | no | Definition of the cultureInfo to use for the data filter format in the table |
| [showFunctionButtons] | `boolean` |  `false` | no | If true, the 'Confirm' and 'Cancel' buttons are shown in the footer. It will be possible to pass functions to be invoked by pressing the buttons |
| [functionButtonConfirmText] | `string` |  `Conferma` | no | Confirm button text, by default it will return 'Confirm' |
| [functionButtonExitText] | `string` |  `Esci` | no | Exit button text, by default it will return 'Exit' |
| [tableColor] | `string (RGB o HEX)` |  `white` | no | Allows you to define the background color of the table |
| [exportEqpTable] | `ExportEqpTable` |  `null` | no | Allows you to configure the export functionality of the data shown in the table (refer to the configuration of the ExportEqpTable model) |
| [currencyFilterToReplace] | `string` |  `null` | no | N.D. |
| [currencyFilterToUse] | `string` |  `null` | no | N.D. |
| [showFirstLastButtons] | `boolean` |  `false` | no | Allows you to show first and last page button in paginator |
| [disablePageStorageSave] | `boolean` |  `false` | no | Allows you to disable pagination storage save on localstorage |
| [disableRowColor] | `string (RGB o HEX)` |  `#8080808c` | no | Allows you to define color of the disabled rows |
| [autoResizeColumns] | `boolean` |  `false` | no | BETA - the table will become adaptive, the columns that do not fit on the screen will go into the expandable table detailing each row. You can use flex, minWidth or maxWidth for each column otherwise a default value will be set for each column |
| [chooseColumnsToShow] | `boolean` |  `false` | no | User can select the columns he wants to see in the table |
| [chooseColumnsToShowText] | `string` |  `Visualizza colonne` | no | Text on dialog title for the columns to show |
| [rowCssClass] | `Function|string` |  `null` | no | Classes that will be applied to mat-row, the function MUST return a string |
| [cellCssClass] | `Function|string` |  `null` | no | Classes that will be applied to mat-cell, the function MUST return a string |
| [headerCellCssClass] | `Function|string` |  `null` | no | Classes that will be applied to mat-header, the function MUST return a string |
| [isStickyHeader] | `boolean` |  `false` | no | Header will be sticky |
| [customButtons] | `Array<CustomButton>` |  `null` | no | Allows you to configure the custom buttons at the top of table (refer to the configuration of the CustomButton model) |

### Inputs for table lookup functionality (searching)
| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [isTableSearcheable] | `boolean` |  `true` | no | Manages the visibility of the search field above the table, default true. If False then the search field is hidden |
| [searchText] | `string` |  `Cerca` | no | Label to be applied to the text search field |
| [isSingleColumnFilter] | `boolean` |  `false` | no | It defines if the search is done by single column or if global |
| [switchFilterType] | `boolean` |  `false` | no | It allows you to configure the switch functionality between the global search and the single column search. |
| [singleFilterColumnVisible] | `boolean` |  `true` | no | It allows you to manage the expand / collapse status of the accordion relating to the search fields on a single column |
| [showSingleFilterButton] | `boolean` |  `true` | no | If the use of filters on a single column has been requested, through this input it will be possible to open / close the accordion between the header and the body of the table containing the filters on a single column |
| [switchFilterToGenericText] | `string` |  `Usa filtro generico` | no | Tooltip text of the switch button in case generic filters are to be shown |
| [switchFilterToSingleText] | `string` |  `Usa filtro per singola colonna` | no | Toggle button tooltip text in case single column filters are to be shown |
| [showFilterText] | `string` |  `Mostra filtri` | no | Text of the button to open the accordion of the search fields on a single column |
| [hideFilterText] | `string` |  `Nascondi filtri` | no | Text of the button to close the accordion of the search fields on a single column |

### Inputs for table pagination
| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [paginatorVisible] | `boolean` |  `true` | no | Allows you to show / hide the pagination under the table, default true. If it is set to FALSE then the table will have no paging |
| [matPaginatorLength] | `Array<number>` |  `[5,10,25,100]` | no | It allows to define an array of numbers to indicate the possible pagination dimensions of the table, default: [5, 10, 25, 100] |
| [matPaginatorSize] | `number` |  `5` | no | Allows you to define the default number to be used for the elements to be displayed on each page |
| [matPaginatorIndex] | `number` |  `-` | no | Allows you to define the index of the page size array to use to be set by default. |
| [matPaginatorCount] | `number` |  `-` | no | N.D. |
| [paginatorColor] | `string (HEX o RGB)` |  `-` | no | Allows you to define the paginator background color (HEX or RGB) |

### Inputs for table selection
| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [selection] | `boolean` |  `false` | no | If true, single select functionality is added on the table (default: false) |
| [isMultipleSelection] | `boolean` |  `false` | no | If it assumes the value true and if the input 'selection' takes the value true then it adds the functionality of multiple selection of the table rows |
| [isHighlight] | `boolean` |  `false` | no | Defines whether the table highlights the selected row (passing an output event for the row) |
| [highlightColor] | `string` |  `#E4E5E6` | no | Definition of the highlight color, default is #E4E5E6 (gray), N.B. it must be RGB |
| [isSelectedPropertyName] | `string` |  `isSelected` | no | Allows you to define property name for checkbox function |

### Inputs for filter table
| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [enableFilters] | `boolean` |  `false` | no | If true, the table will automatically integrate the filters, this management will change if the FilterObject is added  |
| [filterObject] | `FilterObject` |  `{}` | no | Object that manages the filters integrated into the table in a more complex way  |

### Inputs for drag and drop
| Input  | Type | Default | Required | Description |
| ------------- | ------------- | ------------- | ------------- | ------------- |
| [enableDragAndDrop] | `boolean` |  `false` | no | If true, rows become draggable. When used together with `[enableDragColumn]`, this flag is toggled automatically by the drag handle and does not need to be set manually. |
| [enableDragColumn] | `boolean` |  `false` | no | If true, a dedicated drag-handle column is added to the left of the table. The user must grab this handle to initiate a drag, which avoids accidental reordering on a normal row click. |
| [changeDragRowPosition] | `boolean` |  `false` | no | If true, dropping a row updates its position in the internal data array and reindexes all `originalIndex` values. If false, only the output events are emitted without modifying the data. |

### Table Outputs
| Output  | Event Arguments | Required | Description |
| ------------- | ------------- | ------------- | ------------- |
| (checkboxInfo) | `EventEmitter<any>` | no | Invoked only if the selection is active on the eqp-table. It is invoked every time the selection on the rows changes and passes as a parameter the array of the rows that are selected |
| (checkboxJustSelectedInfo) | `EventEmitter<any>` | no | Invoked only if the selection is active. Fires on every single checkbox change and passes only the row that was just toggled, as opposed to `(checkboxInfo)` which always passes the complete selection array. |
| (pageChange) | `EventEmitter<any>` | no | Invoked whenever the pagination of the table changes. Exposes an object containing the following properties: previousSize, pageIndex, pageSize |
| (sortChange) | `EventEmitter<any>` | no | Event triggered when the ordering on a column is changed, an object containing the name of the column and the direction of the ordering is passed as a parameter |
| (highlightSelected) | `EventEmitter<any>` | no | Event active only if the selection on the table is active. It is invoked at each selection made and passes the selected line as a parameter |
| (highlightDeselected) | `EventEmitter<any>` | no | Event active only if the selection on the table is active. It is invoked at each deselection made and passes the deselected line as a parameter |
| (functionButtonConfirm) | `EventEmitter<any>` | no | Event active only if the 'showFunctionButtons' input takes on the value TRUE. It is invoked when the 'Confirm' button is pressed and passes as a parameter the array of rows selected on the table (if present) |
| (functionButtonExit) | `EventEmitter<any>` | no | Event active only if the 'showFunctionButtons' input takes on the value TRUE. It is invoked when the 'Exit' button is pressed and passes the value NULL as a parameter |
| (eqpExportStarted) | `EventEmitter<any>` | no | Event triggered when the table export function starts. It is active only if the 'exportEqpTable' input is configured. |
| (eqpExportCompleted) | `EventEmitter<any>` | no | Event triggered at the end of the table export function. It is active only if the 'exportEqpTable' input is configured. |
| (filtersSelected) | `EventEmitter<any>` | yes | Invoked when buttons are pressed to apply or reset filters. Returns as a parameter the object (in case of resultType = BASIC) or the array of complex objects (if resultType = ADVANCED) with the results of the applied filters. |
| (customFiltersSavedValueLoaded) | `EventEmitter<any>` | yes | Output event fired when filters are reloaded from localstorage and the current filter expects an external template. This event is invoked only if the filter has an external template and only if the storage of the filters has been requested for eqp-filters. The complete filter configuration is passed as an event parameter. |
| (filteredColumns) | `EventEmitter<any>` | no | Emitted on every search operation (both global and single-column). Passes the current `filteredData` array from the datasource, i.e. the rows that survived the active filter. Useful for reacting to search results without server-side involvement. |
| (dragStartedEvent) | `EventEmitter<{ event: CdkDragStart, row: any }>` | no | Emitted when the user starts dragging a row. Active only if drag-and-drop is configured. |
| (dragReleasedEvent) | `EventEmitter<{ event: CdkDragRelease, row: any }>` | no | Emitted when the user releases a dragged row, before the drop logic runs. |
| (dragEndedEvent) | `EventEmitter<{ event: CdkDragEnd, row: any }>` | no | Emitted when the drag interaction ends (after release). |
| (dragDropEvent) | `EventEmitter<{ event: CdkDragDrop, row: any }>` | no | Emitted after the drop is complete. The `row` property contains the original row data; the `event` exposes `previousIndex` and `currentIndex` for reordering logic. |

## Models used

###  BaseFieldModel

| Property  | Description | Examples | Type |
| ------------- | ------------- | ------------- | ------------- |
| key | Unique name to be assigned to the column (may coincide with the name of the property to be displayed)  | - | `string` |
| display | Displayed value | - | `string` |
| value | If the specified key does not coincide with the name of the property then this node must contain the name of the property to be displayed or, possibly, the function to be called to return the value to be shown in the column. | - | `string|Function` |
| currencyPipeCode | Allows you to define the pipe to be used for columns containing a currency. It can be a static value (a string) or a function (if for example there are different currencies on the lines) | - | `string|Function` |
| actions | Allows you to define the actions for the SIMPLE_ACTION or MENU_ACTION type column | - | `Array<ConfigAction>` |
| booleanValues | Can define display value for 'true' and 'false' cases | true: 'Si' false: 'No' | `BooleanValues` |
| enumModel | Passed enum type, automatically retrieve the value | - | `any` |
| buttonMenuIcon | Define the button icon in menu cases | - | `string` |
| styles | N.D. | - | `-` |
| disabled | Allows you to enable / disable the column based on a value or the result of a function | - | `boolean|Function` |
| multilanguagePrefixKey | If the multilingual is active for the table and the current column contains, for example, an enumerator to be translated, in this field it is possible to indicate the possible prefix to search for the translated value in the translation dictionary passed as input. | - | `string` |
| tooltip | N.D. | - | `-` |
| baseType | - | Text = 1, Number = 2, Date = 3, Enum = 4, Boolean = 5 | BaseType |


### ConfigAction Model

| Property  | Description | Type | Required |
| ------------- | ------------- | ------------- | ------------- |
| name | Action name |  `string` | no |
| icon | Mat Icon for menu icon | `string|Function` | no |
| disabled | Allows you to enable / disable the action based on a value or the result of a function | `boolean|Function` | no |
| fn | Function invoked when the action button is clicked. Receives `(element, index, col)` as arguments | `Function` | no |
| hidden | Hides the action button based on a value or the result of a function | `boolean|Function` | no |
| fontawesome | If true, the icon value is treated as a FontAwesome class string instead of a Material icon name | `boolean` | no |
| tooltip | Tooltip configuration for the action button | `EqpMatTooltip` | no |
| color | CSS color applied to the icon | `string` | no |

###  TableColumnField Model

| Property  | Description | Examples | Type |
| ------------- | ------------- | ------------- | ------------- |
| type | TypeColumn - define with enumerator the column type | Date = 1, Boolean = 2, SimpleAction = 3, MenuAction = 4, Enum = 5, Icon = 6, Checkbox = 7, Hyperlink = 8, Image = 9, Color = 10, ExternalTemplate = 11, Navigate = 12 | `TypeColumn Enum` |
| actions | Allows you to define the actions for the SIMPLE_ACTION or MENU_ACTION type column | - | `Array<ConfigAction>` |
| booleanValues | Can define display value for 'true' and 'false' cases | true: 'Si' false: 'No' | `BooleanValues` |
| enumModel | Passed enum type, automatically retrieve the value | - | `any` |
| buttonMenuIcon | Define the button icon in menu cases | - | `string` |
| icons | N.D. | - | `-` |
| containerStyle | N.D. | - | `-` |
| isSearchable | Allows you to activate / deactivate the search for the current column | - | `boolean` |
| disabled | Allows you to enable / disable the column based on a value or the result of a function | - | `boolean|Function` |
| multilanguagePrefixKey | If the multilingual is active for the table and the current column contains, for example, an enumerator to be translated, in this field it is possible to indicate the possible prefix to search for the translated value in the translation dictionary passed as input. | - | `string` |
| tooltip | N.D. | - | `-` |
| hyperlink | N.D. | - | `-` |
| image | N.D. | - | `-` |
| additionalValue | It allows you to define a static text that will always be displayed as a suffix of the text shown in the cell | - | `string` |
| externalTemplate | Allows you to define the external template to be used as the content of the column | - | `TemplateRef<any>` |
| externalTemplateSearchFunction | Allows you to define the value for which template will be searched. It can be a static value (a string) or a function | - | `string|Function` |
| isSortable | Allows you to activate / deactivate the sorting on the current column | - | `boolean` |
| isFilterable | Allows you to activate / deactivate filter on the current column when using eqp-filters | - | `boolean` |
| isHidden | Allows you to hide current column, when using 'chooseColumnsToShow', deselected columns will be automatically set to true | - | `boolean` |
| isSticky | Allows you to stick current column to the left of the table (when scrolled after its position) NOTE: Flex is not fully compatible, it is recommended to use MinWidth | - | `boolean` |
| isStickyEnd | Allows you to stick current column to the right of the table making it always visible | - | `boolean` |


### ExportEqpTable Model

| Property  | Description | Type | Required |
| ------------- | ------------- | ------------- | ------------- |
| exportFileType | Defines the export format. Supported built-in values: `xlsx`, `xls`, `csv`, `pdf`, `json`, `txt`. Can be a single value or an array to render multiple export buttons. |  `ExportType | Array<ExportType> | CustomExportType | Array<CustomExportType>` | no |
| exportFileName | Name of the exported file, without extension |  `string` | no |
| hiddenColumns | Zero-based indexes of columns to exclude from the export. Columns of type SimpleAction and MenuAction, and the selection checkbox column, are excluded automatically. |  `Array<number>` | no |
| buttonText | N.D. |  `string` | no |
| buttonTextTranslateKey | N.D. |  `string` | no |
| buttonIcon | N.D. |  `string` | no |
| tooltipText | N.D. |  `string` | no |
| tooltipTextTranslateKey | N.D. |  `string` | no |
| tooltipPosition | N.D. |  `TooltipPositionType` | no |
| showButtonBorder | N.D. |  `boolean` | no |
| customExportFunction | Array of functions invoked instead of the built-in export procedure. Each function is called with no arguments; the consuming component is responsible for generating the output file. |  `Array<Function>` | no |

### CustomButton Model

| Property  | Description | Type | Required |
| ------------- | ------------- | ------------- | ------------- |
| buttonText | N.D. |  `string` | no |
| buttonTextTranslateKey | Need translate to be defined on the table |  `string` | no |
| icon | N.D. |  `string` | no |
| color | N.D. |  `string` | no |
| order | Left to right |  `number` | no |
| tooltipText | N.D. |  `string` | no |
| tooltipTextTranslateKey | Need translate to be defined on the table |  `string` | no |
| tooltipPosition | Default 'below' |  `TooltipPositionType` | no |
| customButtonFunction | N.D. |  `Function` | no |

### FilterObject Model

| Property  | Description | Type |
| ------------- | ------------- | ------------- |
| resultType | Defines the shape of the object returned by `(filtersSelected)`. BASIC returns a flat object, ADVANCED returns an array. | `FilterResultType` |
| usingMode | Defines the interaction mode for the filter panel | `FilterMode` |
| filterTitle | Title displayed on the filter panel | `string` |
| filterAppliedTitle | Title displayed when at least one filter is active | `string` |
| applyFilterLabel | Label for the apply-filters button | `string` |
| resetAllFilterLabel | Label for the reset-all button | `string` |
| restoreAllFilterLabel | Label for the restore button | `string` |
| clearFilterTooltip | Tooltip text for the clear-filter action on individual filter chips | `string` |
| showExpandend | If true, the filter panel starts in expanded state | `boolean` |
| currentCultureSelected | Culture string used to format date values inside the filter panel | `string` |
| applyOnInit | If true, the filter predicate is applied immediately at component initialisation | `boolean` |
| saveFilter | If true, enables the save-filter functionality (persists to localStorage) | `boolean` |
| saveFilterID | Unique identifier used as the localStorage key for the saved filter | `string` |
| saveFilterButtonLabel | Label for the save-filter action button | `string` |
| saveFilterTitle | Title of the dialog shown when saving a filter | `string` |
| saveFilterConfirmLabel | Confirm label inside the save-filter dialog | `string` |
| saveFilterAbortLabel | Abort/cancel label inside the save-filter dialog | `string` |
| savedFilterLabel | Label displayed next to a restored saved filter | `string` |
| restoreSavedFilterTooltip | Tooltip for the restore-saved-filter action | `string` |
| removeSavedFilterTooltip | Tooltip for the delete-saved-filter action | `string` |
| useInitialValueOnReset | If true, resetting the filters restores the initial values passed at startup instead of clearing all fields | `boolean` |
| filterPreventRemovalTooltip | Tooltip displayed when a filter cannot be removed | `string` |
| saveLastFilter | If true, the last applied filter set is automatically saved to localStorage and restored on next load | `boolean` |
| savedLastFilterName | Key used to store the last applied filter in localStorage | `string` |
| leftCollapseIcon | If true, the collapse/expand chevron is placed on the left side of the filter panel header | `boolean` |
| showAppliedFiltersIcon | If true, shows a badge or indicator when at least one filter is active | `boolean` |
| complexFilters | Array of FilterField objects that define the available filter fields and their configuration | `Array<FilterField>` |

### fn Model

| Property  | Description |
| ------------- | ------------- |
| element | Entire row data |
| col | row index |
| elementIndex | Information about the action name and type |

## Credits
This library has been developed by EqProject SRL, for more info contact: info@eqproject.it