Multi Sorting#
Props#
| Field | Type | default | Description |
|---|---|---|---|
options.defaultOrderByCollection | { orderBy: number; orderDirection: 'asc' or 'desc', sortOrder: number }[] | [] | The initial sort state |
options.maxColumnSort | number or 'all_columns' | 1 | Specifies the amount for of columns to be sorted |
column.showColumnSortOrder | boolean | false | Display on sort order in the table header |
column.sortOrderIndicatorStyle | React.CSSProperties | undefined | Style of the order indicator |
column.onOrderCollectionChange | (orderByCollection: OrderByCollection[]) => void; | undefined | The callback, once the collection changes |
column.orderByCollection | { orderBy: number; orderDirection: 'asc' or 'desc', sortOrder: number }[] | [] | Override the current sort state |
Usage#
Live Demo#
Live Editor
<MaterialTable
// ...
options={{
selection: false,
maxColumnSort: 2,
defaultOrderByCollection: orderCollection,
showColumnSortOrder: true,
}}
onOrderCollectionChange={onOrderCollectionChange}
columns={[
{
title: "Name",
field: "name",
sorting: false,
},
{
title: "Surname",
field: "surname",
},
{
title: "Birth Year",
field: "birthYear",
},
{
title: "Birth Place",
field: "birthCity",
lookup: {
34: "İstanbul",
63: "Şanlıurfa",
},
},
]}
/>;