Data and Display

Data table filtering is a key feature that allows users to quickly find the data they are looking for.

Filtering examples

These examples demonstrate various ways that you can utilize the search prop to filter results.

Search

The data table exposes a search prop that allows you to filter your data.

Filter Keys

You can easily select only the column you want to filter on by using the filter-keys prop. This prop accepts an array of keys from the table items that will be used for filtering. You may also choose to disable columns from filtering by setting the filter property to false on the header item(s). In the example below the we only filter on the name column.

Custom filter

You can override the default filtering used with the search prop by supplying a function to the custom-filter prop. You can see the signature of the function below.

(value: string, query: string, item?: any) => boolean | number | [number, number] | [number, number][]

Additionally, you may apply customize the filtering on a per column basis by setting custom function to the filter property on the header item(s). In the example below, the custom filter will only match inputs that are in completely in upper case.

Pagination examples

Pagination is used to split up large amounts of data into smaller chunks.

External pagination

Pagination can be controlled externally by using the individual props, or by using the options prop. Remember to use v-model, so you fully control the state.

Selection examples

Selection allows you to select/deselect rows and retrieve information about which rows have been selected.

Item value

For the selection feature to work, the data table must be able to differentiate each row in the data set. This is done using the item-value prop. It designates a property on the item that should contain a unique value. By default the property it looks for is id.

You can also supply a function, if for example the unique value needs to be a composite of several properties. The function receives each item as its first argument.

Selected values

The current selection of the data-table can be accessed through the v-model prop. The array will consist of the unique values found in the property you set using the item-value prop (or the value returned by the function you passed). You can use return-object prop if you want the array to consist of the actual objects instead.

Selectable rows

Use the item-selectable prop to designate a property on your items that controls if the item should be selectable or not.

Custom select column

Use the item.data-table-select slot alongside v-checkbox-btn to customize the checkbox used for row selection. You can also use the header.data-table-select slot to customize the select-all checkbox in the header of the column.

Select strategies

Data-tables support three different select strategies.

Sorting examples

Data tables can sort rows by a column value.

Basic sorting

The sorting of your table can be controlled by the sort-by prop. This prop takes an array of objects, where each object has a key and order property, describing how the table is to be sorted.

The key corresponds to a column defined in the headers array, and order is either the string 'asc' or 'desc' indicating the order in which the items are sorted.

Unless you are using the multi-sort prop seen below, this array will almost always just have a single object in it.

Multi sort

Using the multi-sort prop will allow user to sort on multiple columns at the same time. You can specify whether new columns should be added first or last to the sort-by array. By specifying optional modifier key, you can support both modes.

Sort by raw

Using a sortRaw key in your headers object gives you access to all values on the item. This is useful if you want to sort by a value that is not displayed in the table or a combination of multiple values.