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" />
Component API
Here you can find a list of the various customization options you can use for the datatable component as props, as well as available slots and events.
Property async
Type Boolean
Accepted true, false
Default false
Description Sets the pagination and filtering to be handled asynchronously.
Property columns
Type Array<Object>
Default []
Property count-column
Type Object, Boolean
Default {
title: '#',
path: '#',
class: '-count',
align: 'right',
sortable: true,
render(row, column, index) {
return (this.page - 1) * this.rowsPerPage + index + 1;
}
}
Description Column definition override for the count column. You can set the value to false to disable the count column.
Property expand-column
Type Object, Boolean
Default {
title: '',
path: '^',
classes: '-expand',
custom: true
}
Description Column definition override for the expand column. You can set the value to false to disable the expand column.
Property rows
Type Array<Object>
Default []
Property rows-count
Type Number
Default null
Description Sets the number of rows to be displayed when async is enabled.
Property default-sort-key
Type String
Default #
Description Sets the key to use for sorting by default. The # refers to the count column.
Property filtering
Type Boolean, Object
Accepted true, false, Object
Default {
size: 'md',
variant: null,
fuse: {
isCaseSensitive: false,
shouldSort: false,
includeMatches: true,
includeScore: true,
threshold: 0.25,
location: 0,
distance: 75,
tokenize: true,
maxPatternLength: 32,
minMatchCharLength: 1
}
}
Property pagination
Type Boolean, Object
Accepted true, false, Object
Default {
limit: { xs: 3, sm: 5 },
size: 'md',
variant: null,
rowsPerPage: 10,
rowsPerPageOptions: [10, 25, 50, 100]
}
Property footer
Type Boolean
Accepted true, false
Default true
Description Used to enable or disable the table footer.
Property single-expand
Type Boolean
Accepted true, false
Default false
Description 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.
Property i18n
Type Object
Default {
pagination: {
rowsPerPage: 'Show {rowsPerPage} entries',
rowsRange: 'Showing {rowsFrom} to {rowsTo} of {rowsCount} entries'
},
filtering: {
inputPlaceholder: 'Search',
noResultsFound: 'No matching records found'
}
}
Description Provide an object with already translated strings.
Property bordered
Type Boolean
Accepted true, false
Default false
Description Sets the table as bordered.
Property hover
Type Boolean
Accepted true, false
Default false
Description Sets the table as hoverable.
Property responsive
Type Boolean
Accepted true, false
Default false
Description Sets the table as responsive. When the table width reaches an overflow threshold, it will start scrolling horizontally.
Property striped
Type Boolean
Accepted true, false
Default false
Description Sets the table as striped.
Property variant
Type String
Accepted light, dark, primary, secondary, success, danger, warning, info
Default light
Description Sets the color variant of the table component.
Event update
Type ({ page: Number, rowsPerPage: Number, filter: String }) => {}
Description Emitted when pagination or filtering changes.
Description Slot for table header. Used for replacing table <th> elements.
Description Slot for table row. Used for replacing table <td> elements for each row.
Description Slot for table footer. Used for replacing table <th> elements.
Description Slot for table header wrapper. Used for replacing table header wrapper elements.
Description Slot for table footer wrapper. Used for replacing table footer wrapper elements.
Description Slot for row expansion.
Slot filtering-no-results
Description Slot for replacing filtering message when there are no results.
Sass Variables
Here you can find a list of the Sass variables you can use for the datatable component. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.
Property $datatable-cell-padding
Default 0.75rem
Property $datatable-cell-padding-sm
Default 0.3rem
Property $datatable-header-margin-bottom
Default $spacer
Property $datatable-footer-margin-top
Default $spacer
Property $datatable-border-width
Default $border-width
Property $datatable-border-color
Default $border-color
Property $datatable-sortable-icon-color
Default $color-gray-50
Property $datatable-sortable-icon-color-active
Default $color-primary
Property $datatable-pagination-selector-margin-bottom
Default $spacer
Property $datatable-pagination-selector-margin-left
Default $spacers-1-2
Property $datatable-pagination-selector-margin-right
Default $spacer-1-2
Property $datatable-pagination-margin-bottom
Default $spacer-1-2
Property $transition-datatable
Default true
Property $datatable-color-for-light-variant
Default $color-for-light-variant
Property $datatable-color-for-dark-variant
Default $color-for-dark-variant
Property $datatable-variant-{variant}
Default datatable-variant($color-{variant})
Property $datatable-variants
Default (
light: $datatable-variant-light,
dark: $datatable-variant-dark
)
Function datatable-variant
Default @function datatable-variant($variant) {
$datatable-variant-color: variant-color-by-luminance($variant, $datatable-color-for-light-variant, $datatable-color-for-dark-variant);
$datatable-variant-background: $variant;
$datatable-variant-background-hover: variant-color-by-luminance($variant, darken-lightness($variant, 10%), lighten-lightness($variant, 10%));
$datatable-variant-background-striped: variant-color-by-luminance($variant, darken-lightness($variant, 5%), lighten-lightness($variant, 5%));
$datatable-variant-border-color: darken($variant, 10%);
$variant-map: (
color: $datatable-variant-color,
background: $datatable-variant-background,
background-hover: $datatable-variant-background-hover,
background-striped: $datatable-variant-background-striped,
border-color: $datatable-variant-border-color,
);
@return $variant-map;
}
Inkline