Data Table

Data tables (or data grids) are tables that have advanced interaction controls such as custom data types, pagination and sorting.

Columns definition

First, you need to define the column titles, paths, types and how they're ordered.

export default {
    data() {
        return {
            columns: [
                { title: 'Name', path: 'name' },
                { title: 'Email', path: 'email' },
                { title: 'Age', path: 'age', align: 'right' }
            ]
        }
    }
}

Rows definition

The rows array represents your data. The path field in columns corresponds to a value field name in rows.

export default {
    data() {
        return {
            columns: [...],
            rows: [
                { id: '1', name: 'Richard Hendricks', email: 'richard.hendricks@email.com', age: 26 },
                { id: '2', name: 'Bertram Gilfoyle', email: 'bertram.gilfoyle@email.com', age: 30 },
                { id: '3', name: 'Dinesh Chugtai', email: 'dinesh.chugtai@email.com', age: 30 },
                { id: '4', name: 'Jared Dunn', email: 'jared.dunn@email.com', age: 35 },
                { id: '5', name: 'Erlich Bachman', email: 'erlich.bachman@email.com', age: 32 }
            ]
        }
    }
}

Each data row should also have a unique id field, which will be used internally for identifying the row during rendering.

Usage

Let's put it all together. The columns defined above, together with the rows data will render the following data table:

Data Table Example
Showentries
# Name Email Age
1 Richard Hendricks richard.hendricks@email.com 26
2 Richard Hendricks richard.hendricks@email.com 26
3 Dinesh Chugtai dinesh.chugtai@email.com 30
4 Jared Dunn jared.dunn@email.com 35
5 Erlich Bachman erlich.bachman@email.com 32
6 Nelson Bighetti nelson.bighetti@email.com 26
7 Richard Hendricks richard.hendricks@email.com 26
8 Bertram Gilfoyle bertram.gilfoyle@email.com 30
9 Dinesh Chugtai dinesh.chugtai@email.com 30
10 Jared Dunn jared.dunn@email.com 35
# Name Email Age

Nested Properties

Great news! You don't need to change your data structure to have it working. You can specify column paths under the form prop.nestedProp to target nested properties.

export default {
    data() {
        return {
            columns: [
                { title: 'Name', path: 'name' },
                { title: 'City', path: 'address.city' },
                { title: 'Country', path: 'address.country' },
            ],
            rows: [
                { id: '1', name: 'Richard Hendricks', address: { city: 'Cupertino', country: 'United States' } },
                { id: '2', name: 'Bertram Gilfoyle', address: { city: 'Toronto', country: 'Canada' } },
                { id: '3', name: 'Dinesh Chugtai', address: { city: 'Lahore', country: 'Pakistan' } },
                { id: '4', name: 'Jared Dunn', address: { city: 'Berlin', country: 'Germany' } },
                { id: '5', name: 'Erlich Bachman', address: { city: 'Palo Alto', country: 'United States' } }
            ]
        }
    }
}
Data Table Property Nesting
Showentries
# Name City Country
1 Richard Hendricks Cupertino United States
2 Richard Hendricks Cupertino United States
3 Dinesh Chugtai Lahore Pakistan
4 Jared Dunn Berlin Germany
5 Erlich Bachman Palo Alto United States
6 Nelson Bighetti Stanford United States
7 Richard Hendricks Cupertino United States
8 Bertram Gilfoyle Toronto Canada
9 Dinesh Chugtai Lahore Pakistan
10 Jared Dunn Berlin Germany
# Name City Country