@eqproject/eqp-table

Table of contents

• Getting started
• Use Cases
• Column configuration
• MultiLanguage
• Convert BaseFieldModel to TableColumnField
• Drag and Drop
• Responsive columns (Auto-resize)
• Integrated Filters (eqp-filters)
• Export
• API
• Credits

Required

• Angular Material installed and imported

Getting started

Step 1: Install eqp-table:

NPM

npm install --save @eqproject/eqp-table

Step 2: Import the EqpTableModule and install :

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

<eqp-table [headerTitle]="'Title'" [columns]="columns" [data]="DATA"></eqp-table>

Define the datasource for the table

  @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

  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

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.

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

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.

{
  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.

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

    <eqp-table [isMultiLanguage]="true"></eqp-table>

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

    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)

        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.

    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.

<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.

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.

<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).

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

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.

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

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.

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`	-
[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
[cellCssClass]	`Function	string`	null	no
[headerCellCssClass]	`Function	string`	null	no
[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
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
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
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`
disabled	Allows you to enable / disable the action based on a value or the result of a function	`boolean	Function`
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`
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
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
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
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