From daeacc47259b1394caefb66a7a6355abbb15011f Mon Sep 17 00:00:00 2001 From: porg <737143+porg@users.noreply.github.com> Date: Thu, 29 Jan 2026 00:45:20 +0100 Subject: [PATCH] Sample data for testing "table multi sort" reliably and meaningfully - A few records each with the same values in the columns: Surname, First name, Birth Year - A realistic example for excluding a column from sorting with `sorting: false`, e.g. a "Photo" column, which has no inherent sort-ability (e.g. an underlying filename would make no sense) --- demos/sort/multi/index.html | 149 ++++++++++++++++++++++-------------- 1 file changed, 90 insertions(+), 59 deletions(-) diff --git a/demos/sort/multi/index.html b/demos/sort/multi/index.html index 64a994d..b30751d 100644 --- a/demos/sort/multi/index.html +++ b/demos/sort/multi/index.html @@ -20,65 +20,96 @@

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
<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
{ +    console.log("onOrderCollectionChange ===>", orderByCollection); +  }; +  return ( +