Inputs
columnMode
columnMode
Method used for setting column widths
standard
Distributes based on widths
x
flex
Uses flex-grow API
force
Distributes proportionally
columns
columns
Array of columns to display
count
count
Total count of all rows. Default value: 0
cssClasses
cssClasses
Custom CSS classes that can be defined to override the icons classes for up/down in sorts and previous/next in the pager. Defaults:
sortAscending: 'datatable-icon-down',
sortDescending: 'datatable-icon-up',
pagerLeftArrow: 'datatable-icon-left',
pagerRightArrow: 'datatable-icon-right',
pagerPrevious: 'datatable-icon-prev',
pagerNext: 'datatable-icon-skip'
externalPaging
externalPaging
Use external paging instead of client-side paging. Default value: false
externalSorting
externalSorting
Use external sorting instead of client-side sorting. Default value: false
footerHeight
footerHeight
The height of the footer in pixels. Pass a falsey
for no footer. Default value: 0
headerHeight
headerHeight
The height of the header in pixels. Pass a falsy value for no header. Default value: 30
messages
messages
Static messages in the table you can override for localization.
{
// Message to show when array is presented
// but contains no values
emptyMessage: 'No data to display',
// Footer total message
totalMessage: 'total',
// Footer selected message
selectedMessage: 'selected'
}
limit
limit
Page size to show. Default value: undefined
loadingIndicator
loadingIndicator
Show the linear loading bar. Default value: false
offset
offset
Current offset ( page - 1 ) shown. Default value: 0
reorderable
reorderable
Column re-ordering enabled/disabled. Default value: true
swapColumns
swapColumns
Swap columns on re-order columns or move them. Default value: true
rowHeight
: Function|number|undefined
rowHeight
: Function|number|undefined
The height of the row.
When virtual scrolling is not in use, you can pass undefined
for fluid heights.
If using virtual scrolling, you must pass a function or a number to calculate the heights.
Using a function, you can set the height of individual rows:
(row) => {
// set default
if (!row) return 50;
// return my height
return row.height;
}
rowIdentity
rowIdentity
Function for uniquely identifying a row, used to track and compare when displaying and selecting rows. Example:
(row) => {
return row.guid;
}
rows
rows
Array of rows to display.
scrollbarH
scrollbarH
Use horizontal scrollbar. Default value: false
scrollbarV
scrollbarV
Use vertical scrollbar for fixed height vs fluid. This is necessary for virtual scrolling. Default value: false
selectCheck
selectCheck
A boolean or function you can use to check whether you want to select a particular row based on a criteria. Example:
(row, column, value) => {
return value !== 'Ethel Price';
}
displayCheck
displayCheck
Function to determine whether to show a checkbox for a row. Example:
(row, column, value) => {
return row.name !== 'Ethel Price';
}
selected
selected
List of row objects that should be represented as selected in the grid. Rows are compared using object equality. For custom comparisons, use the selectCheck
function.
Default value: []
selectionType
selectionType
Row selection mode
| Value | Description | Default | | :------------- | :---------------------------------------------------- | ------- | ----------------------- | --- | | undefined | false | null
| Rows cannot be selected | x | | "single"
| One row can be selected at a time | | | "cell"
| One cell can be selected at a time | | | "multi"
| Multiple rows can be selected using Ctrl or Shift key | | | "multiClick"
| Multiple rows can be selected by clicking | | | "checkbox"
| Multiple rows can be selected using checkboxes | |
sorts
sorts
Ordered array of objects used to determine sorting by column. Objects contain the column name, prop
, and sorting direction, dir
. Default value: []
. Example:
[
{
prop: 'name',
dir: 'desc'
},
{
prop: 'age',
dir: 'asc'
}
];
sortType
sortType
Sorting mode, whether "single"
or "multi"
. In "single"
mode, clicking on a column name will reset the existing sorting before sorting by the new selection. In multi selection mode, additional clicks on column names will add sorting using multiple columns.
Default value: "single"
trackByProp
trackByProp
A property on the row object that uniquely identifies the row. Example: "name"
rowClass
rowClass
Function used to populate a row's CSS classes. The function will take a row and return a string or object, as shown below:
(row) => {
return {
'old': row.age > 50,
'young': row.age <= 50,
'woman': row.gender === 'female',
'man': row.gender === 'male'
}
}
virtualization
virtualization
Use virtual scrolling. Default: true
Last updated