Vue Smart Table (DataTable) Component API

The active page. When set, the component renders that page and only reports the user's page changes through the activePageChange event.

A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button.

A string that provides an accessible label for the checkbox that selects every row. This label is read by screen readers to describe the action associated with the checkbox.

A string that provides an accessible label for the checkbox that selects a single row. This label is read by screen readers to describe the action associated with the checkbox.

When set, displays a button above the table that resets the global filter, the column filters and the sorter. The button is disabled while there is nothing to reset, and its icon can be replaced through the cleanerIcon slot.

Style table items as clickable.

When set, displays an additional filter row between the table header and the items, allowing filtering by a specific column. Can be customized by passing the prop as an object with additional options as keys. Available options: - lazy (Boolean) - Set to true to trigger filter updates only on the change event.

The state of the column filters. Keys are column names, values are filter strings, numbers or predicates, e.g.: { user: 'John', age: 12 }. When set, the component renders that state and only reports the user's changes through the columnFilterChange event.

Table columns configuration. If the prop is not defined, the table displays columns based on the first item keys, omitting keys that begin with an underscore (e.g. _props). Each array item represents one column and can be: - String - the column name equal to the item value. - Object - a column with the following keys: - key (required)(String) - the column name equal to the item key. - label (String) - the visible label of the column. Generated from the column name when not defined. - filterable (Boolean) - set to false to remove the filter from the column. - filter ((values, onChange, state) => VNode) - renders a custom filter for the column. - sortable (Boolean) - set to false to disable sorting of the column. - sorter ((a, b) => number) - a custom compare function for the column. - headerProps (Object) - props for the column's [CTableHeaderCell](https://coreui.io/vue/docs/components/table/#ctableheadercell). - headerStyle (Object) - styles for the column header (useful for defining widths). - cellProps (Object) - props for the column's [CTableDataCell](https://coreui.io/vue/docs/components/table/#ctabledatacell). - cellStyle (Object) - styles for the column cells. - Object with label and children - a group of columns rendered as a header spanning its children.

Enables table sorting by column value. Sorting works as expected when the values in a column are of one type: string (case insensitive) or number. Can be customized by passing the prop as an object with additional options as keys. Available options: - multiple (Boolean) - Enables sorting by multiple columns simultaneously. The sorting order is maintained across columns based on the order of interaction. - resettable (Boolean) - If set to true, clicking the sorter cycles through three states: ascending, descending and unsorted.

The initial active page, when the page is not controlled through activePage.

The initial state of the column filters, when they are not controlled through columnFilterValue.

The initial value of the global filter, when it is not controlled through globalFilterValue.

The initial number of items per page, when it is not controlled through itemsPerPage.

The initially selected items, when the selection is not controlled through selected.

The initial state of the sorter, when it is not controlled through sorterValue.

Set when items arrive already filtered, sorted and sliced - the component renders them as they are and only reports the requested state through its events. Use totalItems to let it compute the number of pages.

If true, displays a table footer which mirrors the table header (without the column filter). Or an array of objects or strings, where each element represents one cell in the table footer. Example items: ['FooterCell', 'FooterCell', 'FooterCell'] or [{ label: 'FooterCell', props: { color: 'success' } }, ...]

When set, displays a filter input above the table which filters the items by the values of all columns. Can be customized by passing the prop as an object with additional options as keys. Available options: - lazy (Boolean) - Set to true to trigger filter updates only on the change event.

The element represents a caption for the global filter input.

Specifies a short hint that is visible in the global filter input.

The value of the global filter. When set, the component renders that value and only reports the user's changes through the globalFilterChange event.

Set to false to remove the table header.

The name of the item property that identifies a row. When set, the selection and the row keys compare that value instead of the whole item.

Array of objects, where each object represents one item - row in the table. Additionally, you can customize each row through the [_props](http://coreui.io/vue/docs/components/table/#ctablerow) key, a single cell through [_cellProps](http://coreui.io/vue/docs/components/table/#ctabledatacell) and _cellStyle, and block its selection with _selectable: false. Examples: - _props: { color: 'primary', align: 'middle'} - _cellProps: { all: { class: 'fw-semibold'}, 'name': { color: 'info' }}

The number of items per page. When set, the component renders that many items per page and only reports the user's changes through the itemsPerPageChange event.

Label for the items per page selector.

Items per page selector options.

Adds a select element under the table which controls the number of items per page.

When set, the table has a loading style: a loading spinner and reduced opacity.

The content rendered over the table while loading is set. Can also be passed through the slot of the same name.

The text rendered in place of the rows when there is nothing to show.

Enables the pagination under the table. The number of pages is computed from the number of items and itemsPerPage (or from totalItems when external is set).

Properties passed to the [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.

Add checkboxes to make table rows selectable.

Enables the select all checkbox displayed in the header of the table.

Array of selected items - rows in the table. When set, the component renders that selection and only reports the user's changes through the selectedChange event. Example item: { name: 'John' , age: 12 }

The icon rendered in the header of a column sorted ascending. Can also be passed through the slot of the same name.

The icon rendered in the header of a column sorted descending. Can also be passed through the slot of the same name.

The state of the sorter, ordered by the columns' precedence, e.g. [{ column: 'status', direction: 'asc' }]. When set, the component renders that state and only reports the user's changes through the sorterChange event.

The icon rendered in the header of an unsorted column. Can also be passed through the slot of the same name.

Properties passed to the [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.

Properties passed to the [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.

Properties passed to the [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.

Properties passed to the [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.

The total number of items. Set it when items hold only a portion of the data, so the component knows how many pages there are.

Page change callback.

• page number — active page number

Column filter change callback.

• ColumnFilterValue object — {[key: string]: string | number}

Filtered items change callback.

• items array

Global filter change callback.

• globalFilterValue string

Items per page change callback.

• itemsPerPage number — items per page number

Row checked callback.

• item object
• value boolean — true if row is checked, false otherwise

Row click callback.

• item object
• index number
• columnName string
• event MouseEvent

Selection change callback.

• items array

Sorter value change callback.

• SorterValue array — [] { column: string, direction: 'asc' | 'desc' }

A string that provides an accessible label for the button. Defaults to the ariaCleanerLabel of the parent CSmartTable.

The icon rendered inside the button. Defaults to the cleanerIcon slot of the parent CSmartTable.

Properties passed to the [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component. Defaults to the tableBodyProps of the parent CSmartTable.

Properties passed to the [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component. Defaults to the tableFootProps of the parent CSmartTable.

Properties passed to the [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component. Defaults to the tableHeadProps of the parent CSmartTable.

Properties passed to the [CTable](https://coreui.io/vue/docs/components/table/#ctable) component. Defaults to the tableProps of the parent CSmartTable.

The element represents a caption for the filter input. Defaults to the globalFilterLabel of the parent CSmartTable.

Specifies a short hint that is visible in the filter input. Defaults to the globalFilterPlaceholder of the parent CSmartTable.

The element represents a caption for the select. Defaults to the itemsPerPageLabel of the parent CSmartTable.

The numbers of items per page a user can pick. Defaults to the itemsPerPageOptions of the parent CSmartTable.