diff --git a/__tests__/disableSort.test.js b/__tests__/disableSort.test.js
new file mode 100644
index 00000000..cc79fc86
--- /dev/null
+++ b/__tests__/disableSort.test.js
@@ -0,0 +1,108 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render } from '@testing-library/react';
+import * as React from 'react';
+import MaterialTable from '../src';
+
+const columns = [
+ {
+ title: 'Number',
+ field: 'number',
+ minWidth: 140,
+ maxWidth: 400,
+ sorting: true
+ }
+];
+
+const data = [
+ {
+ number: 9
+ },
+ {
+ number: 22
+ },
+ {
+ number: 25
+ },
+ {
+ number: 3
+ }
+];
+
+describe('Disabled Client Sorting', () => {
+ let initialOrderCollection = [];
+ let onOrderCollectionChangeSpy;
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ onOrderCollectionChangeSpy = jest.fn();
+ initialOrderCollection = [
+ {
+ orderBy: 0,
+ orderDirection: 'asc',
+ sortOrder: 0
+ }
+ ];
+ });
+
+ test('should not update order of rows when clientSorting false', () => {
+ const { queryAllByTestId } = render(
+
+ );
+
+ const numberColumn = queryAllByTestId('mtableheader-sortlabel')[0];
+ fireEvent.click(numberColumn);
+
+ expect(onOrderCollectionChangeSpy).toHaveBeenCalledWith([
+ { sortOrder: 1, orderBy: 0, orderDirection: 'asc' }
+ ]);
+
+ const cells = queryAllByTestId('mtablebodyrow').map((row) =>
+ row.querySelectorAll('[data-testid=mtablecell]')
+ );
+ expect(cells.length).toBe(4);
+ expect(cells[0][0].innerHTML).toBe('9');
+ expect(cells[1][0].innerHTML).toBe('22');
+ expect(cells[2][0].innerHTML).toBe('25');
+ expect(cells[3][0].innerHTML).toBe('3');
+ });
+
+ test('should update order of rows when clientSorting true', () => {
+ const { queryAllByTestId } = render(
+
+ );
+
+ const numberColumn = queryAllByTestId('mtableheader-sortlabel')[0];
+ fireEvent.click(numberColumn);
+
+ expect(onOrderCollectionChangeSpy).toHaveBeenCalledWith([
+ { sortOrder: 1, orderBy: 0, orderDirection: 'asc' }
+ ]);
+
+ const cells = queryAllByTestId('mtablebodyrow').map((row) =>
+ row.querySelectorAll('[data-testid=mtablecell]')
+ );
+ expect(cells.length).toBe(4);
+ expect(cells[0][0].innerHTML).toBe('3');
+ expect(cells[1][0].innerHTML).toBe('9');
+ expect(cells[2][0].innerHTML).toBe('22');
+ expect(cells[3][0].innerHTML).toBe('25');
+ });
+});
diff --git a/package.json b/package.json
index a5086388..ef67a1b0 100644
--- a/package.json
+++ b/package.json
@@ -53,9 +53,9 @@
"author": "Mehmet Baran, @material-table/core contributors",
"license": "MIT",
"bugs": {
- "url": "https://github.com/material-table-core/core/issues"
+ "url": "https://material-table-core.github.io/"
},
- "homepage": "https://material-table-core.com",
+ "homepage": "https://material-table-core.github.io/",
"devDependencies": {
"@babel/cli": "^7.12.10",
"@babel/core": "^7.12.10",
diff --git a/src/components/MTableBodyRow/index.js b/src/components/MTableBodyRow/index.js
index f146c285..39476e08 100644
--- a/src/components/MTableBodyRow/index.js
+++ b/src/components/MTableBodyRow/index.js
@@ -443,6 +443,7 @@ function MTableBodyRow({ forwardedRef, ...props }) {
}}
hover={!!(onRowClick || onRowDoubleClick)}
style={getStyle(props.index, props.level)}
+ data-testid="mtablebodyrow"
>
{renderColumns}
diff --git a/src/components/MTableCell/index.js b/src/components/MTableCell/index.js
index ad687a61..d4b4af51 100644
--- a/src/components/MTableCell/index.js
+++ b/src/components/MTableCell/index.js
@@ -63,6 +63,7 @@ function MTableCell(props) {
onClick={handleClickCell}
ref={forwardedRef}
colSpan={props.colSpan}
+ data-testid="mtablecell"
>
{props.children}
{renderValue}
diff --git a/src/defaults/props.options.js b/src/defaults/props.options.js
index 2b45881f..b144c767 100644
--- a/src/defaults/props.options.js
+++ b/src/defaults/props.options.js
@@ -44,6 +44,7 @@ export default {
selectionProps: {},
// sorting: true,
maxColumnSort: 1,
+ clientSorting: true,
groupChipProps: {},
defaultOrderByCollection: [],
showColumnSortOrder: false,
diff --git a/src/material-table.js b/src/material-table.js
index 12752f4d..6dcfc52a 100644
--- a/src/material-table.js
+++ b/src/material-table.js
@@ -125,7 +125,8 @@ export default class MaterialTable extends React.Component {
this.dataManager.setDefaultExpanded(props.options.defaultExpanded);
this.dataManager.changeRowEditing();
- const { grouping, maxColumnSort } = props.options;
+ const { clientSorting, grouping, maxColumnSort } = props.options;
+ this.dataManager.setClientSorting(clientSorting);
this.dataManager.setMaxColumnSort(grouping ? 1 : maxColumnSort);
this.dataManager.setOrderByCollection();
diff --git a/src/prop-types.js b/src/prop-types.js
index 2dc2edb8..19f10b47 100644
--- a/src/prop-types.js
+++ b/src/prop-types.js
@@ -415,6 +415,7 @@ export const propTypes = {
showColumnSortOrder: PropTypes.bool,
sortOrderIndicatorStyle: PropTypes.object,
keepSortDirectionOnColumnSwitch: PropTypes.bool,
+ clientSorting: PropTypes.bool,
toolbar: PropTypes.bool,
thirdSortClick: PropTypes.bool,
numberOfPagesAround: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
diff --git a/src/utils/data-manager.js b/src/utils/data-manager.js
index 6a0108eb..14c31520 100644
--- a/src/utils/data-manager.js
+++ b/src/utils/data-manager.js
@@ -28,6 +28,7 @@ export default class DataManager {
defaultExpanded = false;
bulkEditOpen = false;
bulkEditChangedRows = {};
+ clientSorting = true;
data = [];
columns = [];
@@ -184,6 +185,10 @@ export default class DataManager {
this.defaultExpanded = expanded;
}
+ setClientSorting(clientSorting) {
+ this.clientSorting = !!clientSorting;
+ }
+
setMaxColumnSort(maxColumnSort) {
const availableColumnsLength = this.columns.filter(
(column) => column.sorting !== false
@@ -803,6 +808,9 @@ export default class DataManager {
}
sortList(list) {
+ if (!this.clientSorting) {
+ return list;
+ }
const collectionIds = this.orderByCollection.map(
(collection) => collection.orderBy
);
diff --git a/types/index.d.ts b/types/index.d.ts
index 0e7ed8d9..343d2956 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -471,6 +471,10 @@ export interface Options {
maxColumnSort?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | ALL_COLUMNS;
showColumnSortOrder?: boolean;
sortOrderIndicatorStyle?: React.CSSProperties;
+ /**
+ * Allow reordering rows if `true` (default). Set to `false` when original row ordering is to preserved (eg. data sorted from server).
+ **/
+ clientSorting?: boolean;
}
export interface Localization {