Infinite Table Documentation
/ latest / 2021-08-30

Sorting

Sorting is done by the

DataSource
component which controls the
data
of the virtualized infinite table. For specifying a default sort, you can use the uncontrolled
defaultSortInfo
prop.

Sorting can be single or multiple - meaning it can operate on a single field in the datasource or on multiple fields. For single sorting, the

defaultSortInfo
(or controlled
sortInfo
) props should be an object (or null or undefined),

Uncontrolled single sorting
const defaultSortInfo = { dir: 1, field: "NameOfFieldYouWantToSortBy" };
<DataSource<T> defaultSortInfo={defaultSortInfo} />;

while for multiple sorting, you need to specify an array.

Uncontrolled multiple sorting
const defaultSortInfo = [
{ dir: 1, field: "NameOfFieldYouWantToSortBy" },
{ dir: -1, field: "SecondField" },
];
<DataSource<T> defaultSortInfo={defaultSortInfo} />;

Sorting columns

However, for changing the sorting via user interaction, it's enough to click on column headers in the table. By default,

InfiniteTable
is
sortable=true
and columns are also
sortable=true
. Specifying
sortable
on column level overrides the grid property.

Multi sort example