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

Name

must-sort

Default

false

Type

Boolean

Forces at least one column to always be sorted instead of toggling between sorted ascending / sorted descending / unsorted states

Name

next-icon

Default

chevron_right

Type

String

Append an icon to the component, uses same syntax as v-icon

Name

no-data-text

Default

No data available

Type

String

Display text when there is no data

Name

no-results-text

Default

No matching records found

Type

String

Display text when there are no filtered results

Name

pagination.sync

Default

Type

Object

Used to control pagination and sorting from outside the data table. Can also be used to set default sorted column

Name

prev-icon

Default

chevron_left

Type

String

Prepend an icon to the component, uses same syntax as v-icon

Name

rows-per-page-items

Default

[5,10,25,{"text":"All","value":-1}]

Type

Array

The default values for the rows-per-page dropdown

Name

rows-per-page-text

Default

Rows per page:

Type

String

The default rows per page text

Name

search

Default

undefined

Type

Any

The search model for filtering results

Name

select-all

Default

undefined

Type

Boolean, String

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)

Name

sort-icon

Default

arrow_upward

Type

String

Use a custom sort icon, uses the same syntax as v-icon

Name

total-items

Default

undefined

Type

Number

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

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.