From 5c0966c48e338ed98ccf930e5c32306a04100b6a Mon Sep 17 00:00:00 2001 From: Domino987 Date: Mon, 21 Aug 2023 07:59:12 +0200 Subject: [PATCH 1/2] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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", From 6a871141962ef5c9b7aa576e265a6ac2e89e5ade Mon Sep 17 00:00:00 2001 From: ah0ll0 <130002877+ah0ll0@users.noreply.github.com> Date: Sat, 9 Sep 2023 14:19:23 -0500 Subject: [PATCH 2/2] add clientSorting option (#793) --- __tests__/disableSort.test.js | 108 ++++++++++++++++++++++++++ src/components/MTableBodyRow/index.js | 1 + src/components/MTableCell/index.js | 1 + src/defaults/props.options.js | 1 + src/material-table.js | 3 +- src/prop-types.js | 1 + src/utils/data-manager.js | 8 ++ types/index.d.ts | 4 + 8 files changed, 126 insertions(+), 1 deletion(-) create mode 100644 __tests__/disableSort.test.js 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/src/components/MTableBodyRow/index.js b/src/components/MTableBodyRow/index.js index 73cf9a10..b9ce343a 100644 --- a/src/components/MTableBodyRow/index.js +++ b/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} 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 {