add clientSorting option (#793)

__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(
+      <MaterialTable
+        data={data}
+        columns={columns}
+        title="Disabled Client Sort"
+        options={{
+          maxColumnSort: 1,
+          clientSorting: false
+        }}
+        onOrderCollectionChange={onOrderCollectionChangeSpy}
+      />
+    );
+
+    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(
+      <MaterialTable
+        data={data}
+        columns={columns}
+        title="Disabled Client Sort"
+        options={{
+          maxColumnSort: 1,
+          clientSorting: true
+        }}
+        onOrderCollectionChange={onOrderCollectionChangeSpy}
+      />
+    );
+
+    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');
+  });
+});

src/components/MTableBodyRow/index.js

@@ -451,6 +451,7 @@ function MTableBodyRow({ forwardedRef, ...props }) {
         }}
         hover={!!(onRowClick || onRowDoubleClick)}
         style={getStyle(props.index, props.level)}
+        data-testid="mtablebodyrow"
       >
         {renderColumns}
       </TableRow>

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}

src/defaults/props.options.js

@@ -44,6 +44,7 @@ export default {
   selectionProps: {},
   // sorting: true,
   maxColumnSort: 1,
+  clientSorting: true,
   groupChipProps: {},
   defaultOrderByCollection: [],
   showColumnSortOrder: false,

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();
 

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])

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
     );

types/index.d.ts

@@ -471,6 +471,10 @@ export interface Options<RowData extends object> {
   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 {