Data table
The v-data-table component is used for displaying tabular data. Features include sorting, searching, pagination, inline-editing, header tooltips, and row selection.
Usage
The standard data-table contains data with no additional functionality. You can opt out of displaying table actions that allow you to control the pagination of information with the hide-actions prop.
API
Custom search filter
Custom sort filter
Applies the dark theme variant
Disable default sorting on initial render
Designates the table as containing rows that are expandable
The function used for filtering items
If using an object, the key value for the header
If using an object, the text value for the header
An array of objects that each describe a header column. See the example below for a definition of all properties.
{
text: string",
value: string",
align: 'left' | 'center' | 'right'",
sortable: boolean",
class: string[] | string",
width: string"
}Can be used in combination with hide-headers to specify the number of columns in the table to allow expansion rows and loading bar to function properly
Hide the table actions. This will also remove pagination. pagination can be reactivated using the pagination.sync prop
Hide the table headers
The field in the item object that designates a unique key
The array of table rows
Applies the light theme variant
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
Forces at least one column to always be sorted instead of toggling between sorted ascending / sorted descending / unsorted states
The displayed icon for forcing pagination to the next page
Display text when there is no data
Display text when there are no filtered results
Used to control pagination and sorting from outside the data table. Can also be used to set default sorted column
{
descending: boolean",
page: number",
rowsPerPage: number // -1 for All",
sortBy: string",
totalItems: number"
}The displayed icon for forcing pagination to the previous page
The default values for the rows-per-page dropdown
The default rows per page text
The search model for filtering results
Adds header row select all checkbox. Can either be a String which specifies which color is applied to the button, or a Boolean (which uses the default color)
Use a custom sort icon, uses the same syntax as v-icon
Manually sets total number of row items, which disables built-in sort and pagination. Used together with pagination prop to enable server-side sort and pagination. Caution: Binding this to a blank string or using in conjunction with search will yield unexpected behaviours
Selected row items
Examples
Slot no-data
The no-data slot can display custom HTML when there's no data.
Slot: items and headers
The items and headers slots can accept either a collection of td/th tags, or if you want control of the entire row, a tr tag. In the latter case, you have to manually specify a key on the row regardless of the item-key value.
Slot: headerCell
If you only want to apply some common markup or effect on each of the header cells, you can use the slot headerCell. In this example is has been used to apply a tooltip to each header.
Slot: progress
There is also a progress slot for when you want to customize the display for the data table's loading state. By default this is an indeterminate v-progress-linear
Slot: footer
There is also a footer slot for when you want to add some extra functionality to tables, for example per column filtering or search.
Slot: expand
The v-data-table component also supports expandable rows using the expand slot. By default expanding a row closes all remaining rows. You can use the prop expand on v-data-table to prevent expanded rows from closing when clicking on another row.
Slot: pageText
You can customize the page text displaying the range and total items by using the pageText slot.
Selectable rows
Selectable rows allow you to perform an action on specific and all rows.
Search with custom no-results slot
The data table exposes a search prop that allows you to filter your data.
Custom icons
Previous/next pagination icons and sort icon can be customized with prev-icon, next-icon and sort-icon props.
External pagination
Pagination can be controlled externally by using the pagination prop. Remember that you must apply the .sync modifier.
External sorting
Sorting can also be controlled externally by using the pagination prop. Remember that you must apply the .sync modifier. You can also use the prop to set the default sorted column.
Paginate and sort server-side
If you're loading data from a backend and want to paginate and sort the results before displaying them, you can use the total-items prop. Defining this prop will disable the built-in sorting and pagination, and you will instead need to use the pagination prop to listen for changes. Use the loading prop to display a progress bar while fetching data.
Remove default header and footer
You can apply the hide-headers and hide-actions props to remove the default header and footer respectively.
Inline Editing
The v-edit-dialog component is used for inline-editing within data tables. You can block closing the dialog when clicked outside by adding the persistent prop.
CRUD Actions
data-table with CRUD actions using a v-dialog component for editing each row