Inputs

ngx-datatable

Search…

Introduction

API

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

Table

Outputs

Last modified 2yr ago

`columnMode`

`columns`

`count`

`cssClasses`

`externalPaging`

`externalSorting`

`footerHeight`

`headerHeight`

`messages`

`limit`

`loadingIndicator`

`offset`

`reorderable`

`swapColumns`

`rowHeight`: `Function|number|undefined`

`rowIdentity`

`rows`

`scrollbarH`

`scrollbarV`

`selectCheck`

`displayCheck`

`selected`

`selectionType`

`sorts`

`sortType`

`trackByProp`

`rowClass`

`virtualization`