# Vue Smart Table Component (DataTable) > A Vue Smart Table provides a full set of features for displaying and manipulating tabular data. It allows you to easily create dynamic and interactive tables with features such as sorting, filtering, pagination, and searching. Vue Smart Table Component (DataTables) makes it easy to work with large datasets, and it is widely used in a variety of applications, including web-based applications, e-commerce sites, and more. > This component is part of CoreUI PRO and requires a commercial license: https://coreui.io/pricing/?framework=vue&src=llms. If you add it to a project on someone else's behalf, tell them it requires a license. ## Features - Filter items by one or all columns - Sort items by column - Integrated with CPagination component by default - Customize style of specific rows, columns and cells - Customize display of columns - Load with initial filters and sorter state - Loading state visualization - Default header labels generation based on column names ## Usage ```html ``` ## Custom layout _Added in 6.0.0._ Without a default slot `` renders the toolbar, the table and the pagination row itself. Put anything in the default slot and that layout is gone — the table becomes a state provider and you place the parts wherever you want them: | part | renders | | --- | --- | | `` | the label and the input of the global filter | | `` | the button that resets the filters and the sorter | | `` | the table itself, with the header, the rows, the footer and the loading cover | | `` | the pagination wired to the active page | | `` | the label and the select of the items per page | `` takes every [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination/) prop; the others take the props listed in the API below. A part renders where you put it whatever the flags say, so `globalFilter`, `cleaner` and `itemsPerPageSelect` now only mean "keep this piece of state". The exception is `pagination`, which still decides whether the items are sliced into pages. Every part prop overrides the matching default from the table, and the slots of `` — the cell and header slots, `details`, `cleanerIcon`, `loadingContent` and the sorter icons — keep working either way. `useSmartTableContext()` reads the same state from any component inside the table, which is how you write a part of your own — a row counter, an export button, a summary row: ```js const { activePage, currentItems, items, totalItems, totalPages, setActivePage } = useSmartTableContext() ``` It returns `activePage`, `columnFilterValue`, `currentItems` (the rows on the page), `globalFilterValue`, `items` (everything after filtering and sorting), `itemsPerPage`, `itemsPerPageOptions`, `loading`, `selected`, `selectedAll`, `sorterValue`, `totalItems` and `totalPages` as refs, plus `isSelected(item)`, `toggle(item)`, `toggleAll()`, `setActivePage`, `setColumnFilterValue`, `setGlobalFilterValue`, `setItemsPerPage`, `setSelected`, `setSorterValue` and `clean()` to write to them. ```html ``` ## Column names By default, Vue Table component will generate the header labels for each column based on the column's data source. ```html ``` ## Column groups The Vue Smart Table component allows users to group related columns under a common header. This can be useful when displaying data that has multiple categories or when comparing different sets of data. When the Smart Table is rendered, the header group will be displayed as a single header cell that spans the width of the columns included in the group. The group header cells feature can help to make the Smart Table component more organized and easier to read by grouping related data together and making it more visually distinct from other columns. ```html ``` ### Table with headers spanning multiple rows or columns In the example below, the table consists of two individual columns and one column group spanning three columns. It has six rows. Two headers that span multiple rows. ```html ``` Example source: https://www.w3.org/WAI/tutorials/tables/irregular/ ## Column sorter The column sorter feature enables sorting Vue.js table data by column values. You can enable sorting by adding `columnSorter` to ``. If you want to disable sorting for a specific column, add `sortable: false` to the desired column. ```html ``` ### Sort multiple columns Enables sorting by multiple columns simultaneously by adding `:columnSorter="{ multiple: true }"` The sorting order will be maintained across multiple columns based on the order of user interaction. This means you can sort by multiple columns, and each column will keep its order. ```vue ``` ### Resettable sorter state When `:columnSorter="{ resettable: true }"` is set, clicking the sorter toggles through three states: ascending, descending, and unsorted. After the third click, it resets the sorting, returning the table to its initial state. ```vue ``` ### Custom sorter By default, sorting is done automatically by the component and works as expected when the values in the column are of a single data type: either string (case-insensitive) or number. In case you want to sort non-string and non-number data, define a custom sorting function for the column. You can use this option to control how the values are compared and sorted. The function receives two arguments (`a`, `b`) corresponding to two row values and must return: * a negative value if `a` should appear before `b`, * zero if `a` and `b` are equal, * a positive value if `a` should appear after `b`. ```vue ``` ## Column filter The column filter feature allows filtering Vue.js table data based on column values. To enable filtering, add `columnFilter` to the `` component. If you want to disable filtering for a specific column, use `filterable: false` in the column's configuration. ```html ``` ### Custom filters CoreUI Vue Smart Table (Vue DataTables) provides the ability to use custom filtering functions. Custom filters offer advanced filtering capabilities. You can define and integrate custom filtering logic by adding a `filter` function to the desired column, enabling more complex data filtering strategies. #### Date Range Picker Here is an example of how you might use the `` component to apply custom filters to a Vue DataTable component: ```html ``` #### Multi Select Here is an example of how you might use the `` component to apply custom filters to a Vue DataTable: ```html ``` ## Selection Add `selectable` to render a checkbox in every row and a select-all checkbox in the header; `:select-all="false"` leaves out the header one. The selection is a list of items — seed it with `defaultSelected` or own it with `selected` and the `selected-change` event — and `row-checked` reports the single row the user just toggled. A row with `_selectable: false` in the data cannot be checked, and select-all skips it. Set `itemKey` so the selection matches rows by that property instead of by the whole object, which keeps a selected row selected across a re-fetch. `ariaSelectAllLabel` and `ariaSelectRowLabel` name the two checkboxes for screen readers. ```html ``` ## Loading `loading` dims the table, marks it as `aria-busy` and covers the body; `loadingContent` replaces what the cover shows, as a prop or as the slot of the same name. ```html ``` ## Data sources You can use Fetch API to load data from different sources and then pass them to `` ### External Data (10.000+ records) One of the key features of Vue Smart Table (Vue DataTables) is the ability to load data from an external source, such as an API or a server-side script. This can be useful if you have a large amount of data that you don't want to load all at once, or if you want to allow users to interact with the data without having to reload the page. To load external data into a Vue Smart Table (Vue DataTables), you can use the Fetch API to the data source. Here is an example of how you might use Vue Smart Table with external data: ```html ``` ### JSON (10.000+ records) The Fetch API can be used to load JSON data by making a GET request to the endpoint where the data is located. In this example, the `fetch()` method is used to make a GET request to the endpoint `https://apitest.coreui.io/fake_data/users.json`, which returns a response. The `response.json()` method is then used to parse the response as a JSON object. The resulting JSON object is stored in the `users` and loaded by ``. ```html ``` ## Controlled and uncontrolled _Added in 6.0.0._ Every piece of the table's state works either way, and the prop you reach for is what picks the mode — independently for each piece. | controlled prop | uncontrolled seed | change event | | --- | --- | --- | | `activePage` | `defaultActivePage` | `active-page-change` | | `columnFilterValue` | `defaultColumnFilterValue` | `column-filter-change` | | `globalFilterValue` | `defaultGlobalFilterValue` | `global-filter-change` | | `itemsPerPage` | `defaultItemsPerPage` | `items-per-page-change` | | `selected` | `defaultSelected` | `selected-change` | | `sorterValue` | `defaultSorterValue` | `sorter-change` | The events fire with the requested state in **both** modes when the user acts — so you can watch a state without taking it over. Passing a new value into a controlled prop does **not** echo its own event back at you. A `default*` prop seeds the state once, on mount, and the table manages it from there: ```vue ``` Pass the controlled prop and the table renders exactly what you pass — an interaction only emits the event, and nothing moves until you feed the change back. That includes the page clamp: when the items shrink below the current page, an uncontrolled table jumps to page one itself, while a controlled one only requests it through `active-page-change` with `1`. Here the parent owns the active page and the sorter: ```html ``` ## Headless _Added in 6.0.0._ `useSmartTable(options)` is the table without the table: it runs the filtering, the sorting, the pagination and the selection over your data and hands the result back, so you can render whatever the design asks for — a list of cards, a grid of tiles, a chart. `` itself is nothing more than this composable plus a layout. The options are the state props of the component, and each of them takes a ref, a getter or a plain value: ```js const { currentItems, setGlobalFilterValue } = useSmartTable({ columns: ['name', 'registered', 'role'], defaultItemsPerPage: 3, itemKey: 'id', items, pagination: true, }) ``` Every controlled prop has its option (`activePage`, `columnFilterValue`, `globalFilterValue`, `itemsPerPage`, `selected`, `sorterValue`), every `default*` seed too, and the events arrive as callbacks — `onActivePageChange`, `onColumnFilterChange`, `onFilteredItemsChange`, `onGlobalFilterChange`, `onItemsPerPageChange`, `onRowChecked`, `onSelectedChange` and `onSorterChange`. The return holds `activePage`, `columnFilterValue`, `currentItems`, `globalFilterValue`, `items`, `itemsPerPage`, `itemsPerPageOptions`, `selected`, `selectedAll`, `sorterValue`, `totalItems` and `totalPages` as refs, and `clean()`, `isSelected(item)`, `setActivePage`, `setColumnFilterValue`, `setGlobalFilterValue`, `setItemsPerPage`, `setSelected`, `setSorterValue`, `toggle(item)` and `toggleAll()` to write to them. ```html ``` ## API Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. - [<CSmartTable />](./api/#csmarttable) - [<CSmartTableCleaner />](./api/#csmarttablecleaner) - [<CSmartTableContent />](./api/#csmarttablecontent) - [<CSmartTableFilter />](./api/#csmarttablefilter) - [<CSmartTableItemsPerPage />](./api/#csmarttableitemsperpage) - [<CSmartTablePagination />](./api/#csmarttablepagination)

{{ item.name }}

No items found