Tables

NTable

Tables are used to represent data in a sortable manner

Name
Type
Default
Description
default-sort
Object
function() { return { prop: 'id', order: 'descending', }; }

Default sort { prop: 'id', order: 'descending' }

headers
Array
--

An array of header objects

items
Array
--

An array of item objects

expand
Boolean
false

Add empty header for expand trigger

row-style
Function
--

Callback to resolve row classes.

Function will receive {row, index} as argument and should return an array of classes

cell-style
Function
--

Callback to resolve cell classes.

Function will receive {row, header} as argument and should return an array of classes

Headers

Table accepts an array of header objects:

export default {
    computed: {
        headers () {
            return [
                {
                    // Header label visible to the user
                    label: 'ID',
                    // Column ID used to reference scoped slots.
                    // If the item contains a property with this name, it can be used to automatically render cell content
                    prop: 'id',
                    // Enable sorting by this column id/property
                    // Please note that our API does not do actual sorting (see examples below)
                    sortable: true,
                    // Make headers a computed property for the added benefit of conditional column rendering
                    // You can for example hide specific non-essential columns on smaller viewports
                    hidden: this.$viewport.isTabletDown,
                    // Specify fixed or relative width of the column
                    width: '5%',
                    // Center column contents
                    centered: true,
                },
            ];
        },
    },
};

Simple Table

Countries by area
Name
Capital
Area

Table With Custom Cells (Slots)

Country Coordinates
Selected Countries: []
Code
Name
Coordinates

Table With Expanding Rows

Country Profiles
Code
Name
Capital