Multi Sorting#

Props#

FieldTypedefaultDescription
options.defaultOrderByCollection{ orderBy: number; orderDirection: 'asc' or 'desc', sortOrder: number }[][]The initial sort state
options.maxColumnSortnumber or 'all_columns'1Specifies the amount for of columns to be sorted
column.showColumnSortOrderbooleanfalseDisplay on sort order in the table header
column.sortOrderIndicatorStyleReact.CSSPropertiesundefinedStyle of the order indicator
column.onOrderCollectionChange(orderByCollection: OrderByCollection[]) => void;undefinedThe callback, once the collection changes
column.orderByCollection{ orderBy: number; orderDirection: 'asc' or 'desc', sortOrder: number }[][]Override the current sort state

Usage#

import MaterialTable from "@material-table/core";
<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",
},
},
]}
/>;

Live Demo#

Live Editor
Result