Data Table API

The Data Table has a very intuitive and comprehensive component API for all your customization needs.

Configuring i18n

You can provide an object with already translated internationalization strings using the i18n property.

The strings contain interpolated values under the form of {value}.

export default {
    ...
    data() {
        return {
            i18n: {
                pagination: {
                    rowsPerPage: 'Show {rowsPerPage} entries',
                    rowsRange: 'Showing {rowsFrom} to {rowsTo} of {rowsCount} entries'
                },
                filtering: {
                    inputPlaceholder: 'Search',
                    noResultsFound: 'No matching records found',
                }
            }
        };
    }
}       
<i-datatable :columns="columns" :rows="rows" :i18n="i18n" />

API

Data Table API <i-datatable>
Property Description Type Accepted Default
async Sets the pagination and filtering to be handled asynchronously. Boolean true, false false
columns An array of column definition objects. See the DataTable Introduction page. Array<Object> []
countColumn Column definition override for the count column. You can set the value tp `false` to disable the count column. Object, Boolean {...}
expandColumn Column definition override for the expand column. You can set the value tp `false` to disable the expand column. Object, Boolean {...}
rows An array of row definition objects. See the DataTable Introduction page. Array<Object> []
rowsCount Sets the number of rows to be displayed when async is enabled. Number null
defaultSortKey Sets the key to use for sorting by default. The `#` refers to the count column. String #
filtering Used to enable, disable and configure filtering. See the DataTable Filtering page. Boolean, Object true, false, Object true
pagination Used to enable, disable and configure pagination. See the DataTable Pagination page. Boolean, Object true, false, Object true
footer Used to enable or disable the table footer. Boolean true, false true
singleExpand Used to determine whether to set row expansion in accordion mode (having only one item active at a time). To be used together with the expand slot. Boolean true, false false
i18n Provide an object with already translated strings. Object {...}
bordered Sets the table as bordered. Boolean true, false false
hover Sets the table as hoverable. Boolean true, false false
responsive Sets the table as responsive. When the table width reaches an overflow threshold, it will start scrolling horizontally. Boolean true, false false
striped Sets the table as striped. Boolean true, false false
variant Sets the color variant of the table component. String light, dark, primary, secondary, success, danger, warning, info light