ngx-datatable
Search…
Inputs

columnMode

Method used for setting column widths
Value
Description
Default
standard
Distributes based on widths
x
flex
Uses flex-grow API
​
force
Distributes proportionally
​

columns

Array of columns to display

count

Total count of all rows. Default value: 0

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:
1
sortAscending: 'datatable-icon-down',
2
sortDescending: 'datatable-icon-up',
3
pagerLeftArrow: 'datatable-icon-left',
4
pagerRightArrow: 'datatable-icon-right',
5
pagerPrevious: 'datatable-icon-prev',
6
pagerNext: 'datatable-icon-skip'
Copied!

externalPaging

Use external paging instead of client-side paging. Default value: false

externalSorting

Use external sorting instead of client-side sorting. Default value: false

footerHeight

The height of the footer in pixels. Pass a falsey for no footer. Default value: 0

headerHeight

The height of the header in pixels. Pass a falsy value for no header. Default value: 30

messages

Static messages in the table you can override for localization.
1
{
2
// Message to show when array is presented
3
// but contains no values
4
emptyMessage: 'No data to display',
5
​
6
// Footer total message
7
totalMessage: 'total',
8
​
9
// Footer selected message
10
selectedMessage: 'selected'
11
}
Copied!

limit

Page size to show. Default value: undefined

loadingIndicator

Show the linear loading bar. Default value: false

offset

Current offset ( page - 1 ) shown. Default value: 0

reorderable

Column re-ordering enabled/disabled. Default value: true

swapColumns

Swap columns on re-order columns or move them. Default value: true

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:
1
(row) => {
2
// set default
3
if (!row) return 50;
4
​
5
// return my height
6
return row.height;
7
}
Copied!

rowIdentity

Function for uniquely identifying a row, used to track and compare when displaying and selecting rows. Example:
1
(row) => {
2
return row.guid;
3
}
Copied!

rows

Array of rows to display.

scrollbarH

Use horizontal scrollbar. Default value: false

scrollbarV

Use vertical scrollbar for fixed height vs fluid. This is necessary for virtual scrolling. Default value: false

selectCheck

A boolean or function you can use to check whether you want to select a particular row based on a criteria. Example:
1
(row, column, value) => {
2
return value !== 'Ethel Price';
3
}
Copied!

displayCheck

Function to determine whether to show a checkbox for a row. Example:
1
(row, column, value) => {
2
return row.name !== 'Ethel Price';
3
}
Copied!

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

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

Ordered array of objects used to determine sorting by column. Objects contain the column name, prop, and sorting direction, dir. Default value: []. Example:
1
[
2
{
3
prop: 'name',
4
dir: 'desc'
5
},
6
{
7
prop: 'age',
8
dir: 'asc'
9
}
10
];
Copied!

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

A property on the row object that uniquely identifies the row. Example: "name"

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:
1
(row) => {
2
return {
3
'old': row.age > 50,
4
'young': row.age <= 50,
5
'woman': row.gender === 'female',
6
'man': row.gender === 'male'
7
}
8
}
Copied!

virtualization

Use virtual scrolling. Default: true
Last modified 2yr ago