Skip to content

Commit 02cfb72

Browse files
authored
fix onSort infinity re-render (#1049)
1 parent 949988e commit 02cfb72

File tree

4 files changed

+33
-29
lines changed

4 files changed

+33
-29
lines changed

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-data-table-component",
3-
"version": "7.5.1",
3+
"version": "7.5.2",
44
"description": "A simple to use declarative react based data table",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.es.js",
@@ -84,9 +84,9 @@
8484
"memoize-one": "^6.0.0",
8585
"moment": "^2.29.1",
8686
"prettier": "^2.5.1",
87-
"react": "^18.1.0",
87+
"react": "^17.0.2",
8888
"react-app-polyfill": "^3.0.0",
89-
"react-dom": "^18.1.0",
89+
"react-dom": "^17.0.2",
9090
"rimraf": "^3.0.2",
9191
"rollup": "^2.61.1",
9292
"rollup-plugin-terser": "^7.0.2",

src/DataTable/DataTable.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -276,13 +276,14 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
276276
}
277277

278278
useDidUpdateEffect(() => {
279-
onSelectedRowsChange({ allSelected, selectedCount, selectedRows });
279+
onSelectedRowsChange({ allSelected, selectedCount, selectedRows: selectedRows.slice(0) });
280280
// onSelectedRowsChange trigger is controlled by toggleOnSelectedRowsChange state
281281
}, [toggleOnSelectedRowsChange]);
282282

283283
useDidUpdateEffect(() => {
284-
onSort(selectedColumn, sortDirection, sortedData);
285-
}, [selectedColumn, sortDirection, sortedData]);
284+
onSort(selectedColumn, sortDirection, sortedData.slice(0));
285+
// do not update on sortedData
286+
}, [selectedColumn, sortDirection]);
286287

287288
useDidUpdateEffect(() => {
288289
onChangePage(currentPage, paginationTotalRows || sortedData.length);

stories/props.stories.mdx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import { Meta } from '@storybook/addon-docs';
2222
| direction | string | no | auto | Accepts: `ltr`, `rtl`, or `auto`. When set to `auto` (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR).<br /><br />If you are using Typescript or prefer enums you can `import { Direction } from 'react-data-table-component';` and use `Direction.AUTO, Direction.LTR, or Direction.RTL |
2323
| onRowClicked | `(row, event) => {}` | no | | Callback to access the row, event on row click.<br /> <br /><br />**Note:** If you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `onRowClicked` event to. |
2424
| onRowDoubleClicked | `(row, event) => {}` | no | | Callback to access the row, event on row double click.<br /><br />**Note:** If you are using custom cells (`column[].cell`), you will need to apply the `data-tag="allowRowEvents"` to the innermost element or on the elements you want to propagate the `onRowDoubleClicked` event to. |
25-
| onRowMouseEnter | `(row, event) => {}` | no | | Callback to access the row, event on the mouse entering the row.
26-
| onRowMouseLeave | `(row, event) => {}` | no | | Callback to access the row, event on the mouse leaving the row.
25+
| onRowMouseEnter | `(row, event) => {}` | no | | Callback to access the row, event on the mouse entering the row. |
26+
| onRowMouseLeave | `(row, event) => {}` | no | | Callback to access the row, event on the mouse leaving the row. |
2727

2828
# Columns
2929

@@ -33,14 +33,14 @@ import { Meta } from '@storybook/addon-docs';
3333

3434
# Sorting
3535

36-
| Property | Type | Required | Default | Description |
37-
| ------------------ | --------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
38-
| defaultSortFieldId | string or number | no | null | The `defaultSortFieldId` sets the a column to be pre sorted and corresponds to the a column definition `id` |
39-
| defaultSortAsc | boolean | no | true | Set this to false if you want the table data to be sorted in DESC order.<br /><br />**Note:** This will apply work when the table is initially loaded |
40-
| sortIcon | component | no | built-in | Override the default sort icon - the icon must be a font or svg icon and it should be a "downward" icon since animation will be handled by React Data Table |
41-
| sortServer | boolean | no | false | Disables internal sorting for use with server-side/remote sorting or when you want to manually control the sort behavior. place your sorting logic and/or api calls in an `onSort` handler. <br /><br />**Note:** `sortFunction` is a better choice if you simply want to override the internal sorting behavior |
42-
| sortFunction | `(rows, selector, direction) => {}` | no | null | Pass in your own custom sort function. **Your function must return an new array reference**, otherwise RDT will not re-render. For example, `Array.sort` sorts the array in place but because of JavaScript object equality it will be the same reference and will not re-render. A common pattern is to return `yourArray.slice(0)` which creates a new array |
43-
| onSort | `(selectedColumn, sortDirection) => {}` | no | | callback to access the sort state when a column is clicked. returns ([column](/docs/api-columns--page), sortDirection, event) |
36+
| Property | Type | Required | Default | Description |
37+
| ------------------ | --------------------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
38+
| defaultSortFieldId | string or number | no | null | The `defaultSortFieldId` sets the a column to be pre sorted and corresponds to the a column definition `id` |
39+
| defaultSortAsc | boolean | no | true | Set this to false if you want the table data to be sorted in DESC order.<br /><br />**Note:** This will apply work when the table is initially loaded |
40+
| sortIcon | component | no | built-in | Override the default sort icon - the icon must be a font or svg icon and it should be a "downward" icon since animation will be handled by React Data Table |
41+
| sortServer | boolean | no | false | Disables internal sorting for use with server-side/remote sorting or when you want to manually control the sort behavior. place your sorting logic and/or api calls in an `onSort` handler. <br /><br />**Note:** `sortFunction` is a better choice if you simply want to override the internal sorting behavior |
42+
| sortFunction | `(rows, selector, direction) => {}` | no | null | Pass in your own custom sort function. **Your function must return an new array reference**, otherwise RDT will not re-render. For example, `Array.sort` sorts the array in place but because of JavaScript object equality it will be the same reference and will not re-render. A common pattern is to return `yourArray.slice(0)` which creates a new array |
43+
| onSort | `(selectedColumn, sortDirection, sortedRows) => {}` | no | | callback to access the sort state when a column is clicked. returns ([column](/docs/api-columns--page), sortDirection, event) |
4444

4545
# Row Selection
4646

yarn.lock

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10114,13 +10114,14 @@ react-docgen@^5.0.0:
1011410114
node-dir "^0.1.10"
1011510115
strip-indent "^3.0.0"
1011610116

10117-
react-dom@^18.1.0:
10118-
version "18.1.0"
10119-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f"
10120-
integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w==
10117+
react-dom@^17.0.2:
10118+
version "17.0.2"
10119+
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
10120+
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
1012110121
dependencies:
1012210122
loose-envify "^1.1.0"
10123-
scheduler "^0.22.0"
10123+
object-assign "^4.1.1"
10124+
scheduler "^0.20.2"
1012410125

1012510126
react-draggable@^4.4.3:
1012610127
version "4.4.4"
@@ -10251,12 +10252,13 @@ react-transition-group@^4.4.0:
1025110252
loose-envify "^1.4.0"
1025210253
prop-types "^15.6.2"
1025310254

10254-
react@^18.1.0:
10255-
version "18.1.0"
10256-
resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
10257-
integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
10255+
react@^17.0.2:
10256+
version "17.0.2"
10257+
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
10258+
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
1025810259
dependencies:
1025910260
loose-envify "^1.1.0"
10261+
object-assign "^4.1.1"
1026010262

1026110263
read-pkg-up@^7.0.1:
1026210264
version "7.0.1"
@@ -10697,12 +10699,13 @@ saxes@^5.0.1:
1069710699
dependencies:
1069810700
xmlchars "^2.2.0"
1069910701

10700-
scheduler@^0.22.0:
10701-
version "0.22.0"
10702-
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8"
10703-
integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ==
10702+
scheduler@^0.20.2:
10703+
version "0.20.2"
10704+
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
10705+
integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
1070410706
dependencies:
1070510707
loose-envify "^1.1.0"
10708+
object-assign "^4.1.1"
1070610709

1070710710
1070810711
version "2.7.0"

0 commit comments

Comments
 (0)