Table API

This page provides an overview of the Table component API, detailing its props, emits, slots, and exposed methods/states.

Props

The Table component accepts the following props:

Prop	Default	Type	Description
`mode`	`"outlined"`	`StyleMode`	The styling mode of the table.
`dataSource`	`[]`	`Array<any>`	The data source for the table.
`toolbar`	`undefined`	`IToolbar` or `boolean`	Toolbar configuration or visibility toggle.
`edit`	`undefined`	`boolean`	Enables inline editing for table cells.
`sort`	`undefined`	`ISort` or `boolean`	Sorting configuration or visibility toggle.
`filter`	`undefined`	`IFilter` or `boolean`	Filtering configuration or visibility toggle.
`grouping`	`undefined`	`IGrouping` or `string`	Grouping configuration or group field name.
`resizedColumns`	`undefined`	`boolean`	Enables column resizing.
`pagination`	`undefined`	`TablePagination` or `boolean`	Pagination configuration or visibility toggle.
`search`	`undefined`	`boolean`	Enables search functionality.
`columns`	`undefined`	`Array<IColumn>` or `boolean`	Configuration for table columns.
`summary`	`undefined`	`Array<ISummary>` or `boolean`	Configuration for summary rows.
`countVisibleRows`	`0`	`number`	Number of rows visible in the table.
`sizeLoadingRows`	`5`	`number`	Number of loading rows displayed during data fetching.
`noData`	`"No data"`	`string`	Message displayed when there is no data.
`noColumn`	`"No columns"`	`string`	Message displayed when no columns are defined.
`countDataOnLoading`	`1000`	`number`	Number of rows simulated during data loading.
`totalCount`	`undefined`	`number`	Total number of rows in the data source.
`class`	`""`	`StyleClass`	Custom CSS class for the table container.
`styles`	`undefined`	`ITableStyles`	Custom styles configuration for the table.

IToolbar

The IToolbar interface defines the configuration for the toolbar in the Table component.

Property	Type	Description
`visible`	`boolean` or `undefined`	Indicates whether the toolbar is visible.
`search`	`boolean` or `undefined`	Enables or disables the search input in the toolbar.

ISort

The ISort interface defines the sorting configuration for the Table component.

Property	Type	Description
`visible`	`boolean` or `undefined`	Indicates whether sorting is enabled.
`icon`	`"Bars"` or `"Arrow"` or `undefined`	Specifies the icon to use for sorting (e.g., Bars or Arrow).

IFilter

The IFilter interface defines the filtering configuration for the Table component.

Property	Type	Description
`visible`	`boolean` or `undefined`	Indicates whether filtering is enabled.
`noFilter`	`string` or `undefined`	Message displayed when no filters are applied.
`isClearAllFilter`	`boolean` or `undefined`	Enables a "clear all filters" option.

IGrouping

The IGrouping interface defines the grouping configuration for the Table component.

Property	Type	Description
`visible`	`boolean` or `undefined`	Indicates whether grouping is enabled.
`groupField`	`string` or `undefined`	Specifies the field used for grouping data.

TablePagination

The TablePagination interface defines the pagination configuration for the Table component.

Property	Type	Description
`visible`	`boolean` or `undefined`	Indicates whether pagination is visible.
`startPage`	`number` or `undefined`	The starting page for pagination.
Other inherited props	Omitted from `PaginationProps`	Excludes `total` and `modelValue` from the `PaginationProps`.

IColumn

The IColumn type represents the configuration for a column in the Table component.

Property	Type	Description
`dataField`	`DataField` or `undefined`	The field in the data source corresponding to this column.
`name`	`string` or `undefined`	The internal name of the column.
`caption`	`string` or `undefined`	The caption displayed in the column header.
`visible`	`boolean` or `undefined`	Controls the visibility of the column.
`width`	`number` or `undefined`	The width of the column in pixels.
`minWidth`	`number` or `undefined`	The minimum width of the column in pixels.
`maxWidth`	`number` or `undefined`	The maximum width of the column in pixels.
`isFilter`	`boolean` or `undefined`	Indicates whether filtering is enabled for the column.
`isSort`	`boolean` or `undefined`	Indicates whether sorting is enabled for the column.
`isResized`	`boolean` or `undefined`	Indicates whether the column can be resized.
`defaultFilter`	`any` or `undefined`	The default filter value for the column.
`defaultSort`	`Sort` or `undefined`	The default sorting order for the column.
`mask`	`BaseInputProps["maskInput"]` or `undefined`	Input mask applied to the column values.
`cellTemplate`	`string` or `undefined`	Template for rendering cell content in the column.
`setCellValue`	`(column: IColumn, value: any, data?: any) => any`	Sets the value of a cell in the column.
`class`	`object`	Custom CSS classes for various parts of the column (header, cells, etc.).
`type`	`"string"` or `"number"` or `"select"` or `"date"`	The type of data the column represents.
`edit`	`EditInput` or `EditSelect` or `EditDate` or `boolean` or `undefined`	Configuration for inline editing in the column.

ISummary

The ISummary interface defines the configuration for summary rows in the Table component.

Property	Type	Description
`dataField`	`string` or `undefined`	The field for which the summary is calculated.
`name`	`string` or `undefined`	The name of the summary.
`displayFormat`	`string` or `"Sum: {0}"` or `"Min: {0}"` or `"Max: {0}"` or `"Avg: {0}"` or `"Count: {0}"` or `undefined`	The display format for the summary.
`type`	`"sum"` or `"min"` or `"max"` or `"avg"` or `"count"` or `undefined`	The type of summary calculation (e.g., sum, min, max, etc.).
`dataType`	`DataType` or `undefined`	The data type for the summary.
`customizeText`	`(summary: ISummary, result: string) => string` or `undefined`	Function to customize the summary text.

ITableStyles

The ITableStyles interface defines the overall styles and configuration for the Table component.

Property	Type	Description
`class`	`ITableStylesClass` or `undefined`	CSS class styles for various parts of the `Table` component.
`width`	`TWidth` or `undefined`	The width of the table.
`height`	`THeight` or `undefined`	The height of the table.
`animation`	`"transition-all duration-500"` or `"transition-none"` or `string` or `undefined`	Animation style applied to the table.
`hoverRows`	`string` or `"hover:bg-neutral-100/90 dark:hover:bg-neutral-900/50"` or `boolean` or `undefined`	Hover styles for table rows.
`isStripedRows`	`boolean` or `undefined`	Indicates whether striped rows are enabled.
`horizontalLines`	`boolean` or `undefined`	Indicates whether horizontal lines are displayed between rows.
`verticalLines`	`boolean` or `undefined`	Indicates whether vertical lines are displayed between columns.
`borderRadiusPx`	`number` or `undefined`	The border radius applied to the table.
`heightCell`	`number` or `undefined`	The height of table cells.
`filterLines`	`boolean` or `undefined`	Indicates whether filter lines are displayed.
`defaultWidthColumn`	`"max-width: 600px;min-width:100px;width:auto"` or `string` or `undefined`	Default width for table columns.
`maskQuery`	`"font-bold text-theme-700 dark:text-theme-300"` or `string` or `undefined`	Query text mask applied to table content.
`border`	`border` or `ITableStylesBorder` or `"border-0 border-b-0 border-t-0 border-r-0"` or `undefined`	Border styles for various parts of the table.

Emits

The Table component emits the following events:

Emit	Payload	Description
`sort`	`{ dataColumns: Array<IColumnPrivate>; sortedFields: Sorted }`	Emitted when sorting is applied.
`filter`	`{ dataColumns: Array<IColumnPrivate>; filteredFields: Filters }`	Emitted when filtering is applied.
`search`	`string`	Emitted when a search query is applied.
`result-data`	`ResultData`	Emitted with the result data after processing.
`switch-page`	`number`	Emitted when the page is switched.
`switch-size-page`	`number`	Emitted when the page size is changed.
`before-edit-cell`	`{ newValue: any; oldValue: any; _key: string; column: IColumnPrivate }`	Emitted before editing a cell.
`after-edit-cell`	`{ newValue: any; oldValue: any; _key: string; column: IColumnPrivate }`	Emitted after editing a cell.
`before-edit-row`	`{ newValue: any; oldValue: any; _key: string }`	Emitted before editing a row.
`after-edit-row`	`{ newValue: any; oldValue: any; _key: string }`	Emitted after editing a row.
`add-row`	`{ value: any; index: number; _key: string }`	Emitted when a row is added.
`delete-row`	`{ value: any; index: number; _key: string }`	Emitted when a row is deleted.
`click-row`	`{ eventEl: HTMLElement; data: any; indexRow: number }`	Emitted when a row is clicked.
`click-cell`	`{ eventEl: HTMLElement; column: IColumnPrivate; value: any; valueWithMarker: any; data: any; indexRow: number }`	Emitted when a cell is clicked.
`loading`	`boolean`	Emitted when the table enters or exits the loading state.
`clear-filter`	`void`	Emitted when all filters are cleared.

Slots

The Table component provides the following slots:

Slot	Payload	Description
`toolbar`	`VNode[]`	Slot for custom toolbar content.
`header`	`VNode[]`	Slot for custom header content.
`group`	`{ item: string; length: number }`	Slot for custom group content.
`default`	`DynamicSlots`	Slot for rendering dynamic cell templates for each column.
`footer`	`VNode[]`	Slot for custom footer content.

DynamicSlots

The DynamicSlots interface defines the structure for dynamic slots in the Table component. Each slot corresponds to a column or key and provides a custom rendering template for cell content.

Property	Type	Description
`key`	`string`	The unique identifier for the slot or column.
`column`	`IColumn`	The configuration object for the current column.
`rowData`	`Record<string, any>`	The data object for the current row.
`value`	`string`	The raw value of the cell.
`valueWithMarker`	`string`	The formatted or marked value of the cell.
`isCloseEditor`	`(isActive: boolean) => boolean`	A function to close the cell editor, requiring a `boolean` argument to specify the editor state.
`editValue`	`(value: any) => false` or `any`	A function to update the cell value. Returns `false` if the update fails.

Expose

The Table component exposes the following methods and states via ref:

Expose	Value	Description
`sortColumns`	`Sorted`	The current sorting state for all columns.
`filterColumns`	`Filters`	The current filtering state for all columns.
`widthsColumns`	`Widths`	The current widths for all columns.
`queryTable`	`Search`	The current search query.
`pageTable`	`Page`	The current page number.
`sizeTable`	`Page`	The current page size.
`allData`	`TableProps["dataSource"]`	The entire data source of the table.
`isLoading`	`boolean`	Indicates whether the table is in a loading state.
`mode`	`TableProps["mode"]`	The current styling mode of the table.
`isVisibleToolbar`	`boolean`	Indicates whether the toolbar is visible.
`isSearch`	`boolean`	Indicates whether search functionality is enabled.
`isFilterClear`	`boolean`	Indicates whether the "clear all filters" button is enabled.
`isColumns`	`boolean`	Indicates whether columns are defined.
`isSummary`	`boolean`	Indicates whether summary rows are defined.
`countDataOnLoading`	`TableProps["countDataOnLoading"]`	The number of rows to simulate during data loading.
`classMaskQuery`	`ITableStyles["maskQuery"]`	The mask applied to query text.
`noData`	`TableProps["noData"]`	The message displayed when there is no data.
`noColumn`	`TableProps["noData"]`	The message displayed when no columns are defined.
`noFilter`	`IFilter["noFilter"]`	The message displayed when no filters are applied.
`iconSort`	`ISort["icon"]`	The icon used for sorting.
`resizedColumns`	`TableProps["resizedColumns"]`	Indicates whether column resizing is enabled.
`lengthData`	`number`	The total number of rows in the data source.
`groupField`	`IGrouping["groupField"]` or `null`	The field used for grouping data.
`isFilter`	`boolean`	Indicates whether filtering is enabled.
`isSort`	`boolean`	Indicates whether sorting is enabled.
`isGroup`	`boolean`	Indicates whether grouping is enabled.
`isPagination`	`boolean`	Indicates whether pagination is enabled.
`addRow`	`(data: any) => false` or `number`	Adds a new row to the table.
`deleteRow`	`(_key: string) => false` or `any`	Deletes a row from the table.
`updateRow`	`(_key: string, data: any) => false` or `any`	Updates a row in the table.
`updateCell`	`(_key: string, column: IColumnPrivate, value: any) => false` or `any`	Updates a specific cell in the table.
`getColumn`	`(dataField: IColumn["dataField"], index?: number) => IColumnPrivate` or `undefined`	Retrieves a column by its data field.
`updateDataSource`	`() => Array<Record<string, any>>`	Updates the data source of the table.
`sorting`	`(dataField: IColumn["dataField"], value?: Sort) => void`	Sorts the table by a specified column.
`filtering`	`(dataField: IColumn["dataField"], value: any) => void`	Filters the table by a specified column.
`searching`	`(value: Search) => void`	Searches the table using a query.
`switchPage`	`(page: Page) => void`	Switches the table to a specific page.
`switchSizePage`	`(sizePage: Page) => void`	Changes the page size of the table.
`clearFilter`	`() => void`	Clears all filters applied to the table.
`startLoading`	`() => void`	Starts the loading state for the table.
`stopLoading`	`() => void`	Stops the loading state for the table.
`updateHeightTable`	`() => void`	Updates the height of the table dynamically.