From 02cfb7285cbb4d3f337e5f3b56c4e9ee3a1a24e2 Mon Sep 17 00:00:00 2001 From: John Betancur Date: Thu, 12 May 2022 06:55:45 -0400 Subject: [PATCH] fix onSort infinity re-render (#1049) --- package.json | 6 +++--- src/DataTable/DataTable.tsx | 7 ++++--- stories/props.stories.mdx | 20 ++++++++++---------- yarn.lock | 29 ++++++++++++++++------------- 4 files changed, 33 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index db9bf5d2..d5ae0400 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-data-table-component", - "version": "7.5.1", + "version": "7.5.2", "description": "A simple to use declarative react based data table", "main": "dist/index.cjs.js", "module": "dist/index.es.js", @@ -84,9 +84,9 @@ "memoize-one": "^6.0.0", "moment": "^2.29.1", "prettier": "^2.5.1", - "react": "^18.1.0", + "react": "^17.0.2", "react-app-polyfill": "^3.0.0", - "react-dom": "^18.1.0", + "react-dom": "^17.0.2", "rimraf": "^3.0.2", "rollup": "^2.61.1", "rollup-plugin-terser": "^7.0.2", diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx index 50e9cd38..1f73b04d 100644 --- a/src/DataTable/DataTable.tsx +++ b/src/DataTable/DataTable.tsx @@ -276,13 +276,14 @@ function DataTable(props: TableProps): JSX.Element { } useDidUpdateEffect(() => { - onSelectedRowsChange({ allSelected, selectedCount, selectedRows }); + onSelectedRowsChange({ allSelected, selectedCount, selectedRows: selectedRows.slice(0) }); // onSelectedRowsChange trigger is controlled by toggleOnSelectedRowsChange state }, [toggleOnSelectedRowsChange]); useDidUpdateEffect(() => { - onSort(selectedColumn, sortDirection, sortedData); - }, [selectedColumn, sortDirection, sortedData]); + onSort(selectedColumn, sortDirection, sortedData.slice(0)); + // do not update on sortedData + }, [selectedColumn, sortDirection]); useDidUpdateEffect(() => { onChangePage(currentPage, paginationTotalRows || sortedData.length); diff --git a/stories/props.stories.mdx b/stories/props.stories.mdx index 6af7040b..138aa471 100644 --- a/stories/props.stories.mdx +++ b/stories/props.stories.mdx @@ -22,8 +22,8 @@ import { Meta } from '@storybook/addon-docs'; | 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).

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 | | onRowClicked | `(row, event) => {}` | no | | Callback to access the row, event on row click.


**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. | | onRowDoubleClicked | `(row, event) => {}` | no | | Callback to access the row, event on row double click.

**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. | -| onRowMouseEnter | `(row, event) => {}` | no | | Callback to access the row, event on the mouse entering the row. -| onRowMouseLeave | `(row, event) => {}` | no | | Callback to access the row, event on the mouse leaving the row. +| onRowMouseEnter | `(row, event) => {}` | no | | Callback to access the row, event on the mouse entering the row. | +| onRowMouseLeave | `(row, event) => {}` | no | | Callback to access the row, event on the mouse leaving the row. | # Columns @@ -33,14 +33,14 @@ import { Meta } from '@storybook/addon-docs'; # Sorting -| Property | Type | Required | Default | Description | -| ------------------ | --------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| defaultSortFieldId | string or number | no | null | The `defaultSortFieldId` sets the a column to be pre sorted and corresponds to the a column definition `id` | -| defaultSortAsc | boolean | no | true | Set this to false if you want the table data to be sorted in DESC order.

**Note:** This will apply work when the table is initially loaded | -| 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 | -| 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.

**Note:** `sortFunction` is a better choice if you simply want to override the internal sorting behavior | -| 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 | -| onSort | `(selectedColumn, sortDirection) => {}` | no | | callback to access the sort state when a column is clicked. returns ([column](/docs/api-columns--page), sortDirection, event) | +| Property | Type | Required | Default | Description | +| ------------------ | --------------------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| defaultSortFieldId | string or number | no | null | The `defaultSortFieldId` sets the a column to be pre sorted and corresponds to the a column definition `id` | +| defaultSortAsc | boolean | no | true | Set this to false if you want the table data to be sorted in DESC order.

**Note:** This will apply work when the table is initially loaded | +| 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 | +| 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.

**Note:** `sortFunction` is a better choice if you simply want to override the internal sorting behavior | +| 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 | +| onSort | `(selectedColumn, sortDirection, sortedRows) => {}` | no | | callback to access the sort state when a column is clicked. returns ([column](/docs/api-columns--page), sortDirection, event) | # Row Selection diff --git a/yarn.lock b/yarn.lock index 2ed4cd39..e9801d45 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10114,13 +10114,14 @@ react-docgen@^5.0.0: node-dir "^0.1.10" strip-indent "^3.0.0" -react-dom@^18.1.0: - version "18.1.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f" - integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w== +react-dom@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" - scheduler "^0.22.0" + object-assign "^4.1.1" + scheduler "^0.20.2" react-draggable@^4.4.3: version "4.4.4" @@ -10251,12 +10252,13 @@ react-transition-group@^4.4.0: loose-envify "^1.4.0" prop-types "^15.6.2" -react@^18.1.0: - version "18.1.0" - resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890" - integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ== +react@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" + object-assign "^4.1.1" read-pkg-up@^7.0.1: version "7.0.1" @@ -10697,12 +10699,13 @@ saxes@^5.0.1: dependencies: xmlchars "^2.2.0" -scheduler@^0.22.0: - version "0.22.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8" - integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ== +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== dependencies: loose-envify "^1.1.0" + object-assign "^4.1.1" schema-utils@2.7.0: version "2.7.0"