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:

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

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.

{
  // 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',

  // Pager screen reader message for the first page button
  ariaFirstPageMessage: 'go to first page',

  // Pager screen reader message for the previous page button
  ariaPreviousPageMessage: 'go to previous page',

  // Pager screen reader message for the n-th page button.
  // It will be rendered as: `{{ariaPageNMessage}} {{n}}`.
  ariaPageNMessage: 'page',

  // Pager screen reader message for the next page button
  ariaNextPageMessage: 'go to next page',

  // Pager screen reader message for the last page button
  ariaLastPageMessage: 'go to last page'
}

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:

(row) => {
  // set default
  if (!row) return 50;

  // return my height
  return row.height;
}

rowIdentity

Function for uniquely identifying a row, used to track and compare when displaying and selecting rows. Example:

(row) => {
  return row.guid;
}

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:

(row, column, value) => {
  return value !== 'Ethel Price';
}

displayCheck

Function to determine whether to show a checkbox for a row. Example:

(row, column, value) => {
  return row.name !== 'Ethel Price';
}

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:

[
  {
    prop: 'name',
    dir: 'desc'
  },
  {
    prop: 'age',
    dir: 'asc'
  }
];

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:

(row) => {
  return {
    'old': row.age > 50,
    'young': row.age <= 50,
    'woman': row.gender === 'female',
    'man': row.gender === 'male'
  }
}

virtualization

Use virtual scrolling. Default: true