#Data tables

#Keys and values

The key property is used to identify the column in slots, events, filters, and sort functions. It will default to the value property if value is a string.
value maps the column to a property in the items array. If value is not defined it will default to key, so key and value are interchangeable in most cases. The exception to this is reserved keys like data-table-select and data-table-expand which must be defined as key to work properly.
key and value both support dot notation to access properties of nested objects, and value can also be a function to combine multiple properties or do other custom formatting. If value is not a string then key must be defined.

const items = [
  {
    id: 1,
    name: {
      first: 'John',
      last: 'Doe',
    },
  },
]

const headers = [
  { title: 'First Name', value: 'name.first' },
  { title: 'Last Name', key: 'name.last' },
  {
    title: 'Full Name',
    key: 'fullName',
    value: item => `${item.name.first} ${item.name.last}`,
  },
]

#Sorting, filtering, pagination

See Data and display.

#Customization

Other options are available for setting width, align, fixed, or pass custom props to the header element with headerProps and row cells with cellProps.

#Density

Using the density prop you are able to give your data tables an alternate style.

#Hide default header and footer

You can apply the hide-default-header and hide-default-footer props to remove the default header and footer respectively.

#Sort icons

You can customize sorting icons using dedicated props as well as control default opacity and spacing with Sass variables.

#Selection

The show-select prop will render a checkbox in the default header to toggle all rows, and a checkbox for each row.

For more information and examples, see the selection examples page.

#Simple checkbox

When wanting to use a checkbox component inside of a slot template in your data tables, use the v-checkbox-btn component rather than the v-checkbox component.

#Group by

The group-by prop makes it possible to group rows by one or more attributes.

#Header slot

You can use the dynamic slots header.<key> to customize only certain columns. <key> corresponds to the key property in the items found in the headers prop.

#Headers slot

You can also override all the internal headers by using the headers slot. Remember that you will have to re-implement any internal functionality like sorting.

#Item slot

Normally you would use the item.<key> slots to render custom markup in specific columns. If you instead need more control over the entire row, you can use the item slot.

#Item key slot

You can use the dynamic slots item.<key> to customize only certain columns. <key> is the name of the key property in header items sent to headers. So to customize the calories column we’re using the item.calories slot.

#Group header slot

When using the group-by prop, you can customize the group header with the group-header slot. Example below makes the whole row clickable.

#Group summary slot

By default grouping with group-by shows only the header slot. When you define group-summary slot, additional summary row will appear below the group rows.

#Loading slot

The loading slot allows you to customize your table’s display state when fetching data. In this example we utilize the v-skeleton-loader component to display a loading animation.

#Select All

The example below shows how to use the @keydown event to quickly select all rows in the data table using the Ctrl+A or Cmd+A keyboard shortcut. To begin using the shortcut, click anywhere inside the table first.