Skip to content

Commit

Permalink
fix onSort infinity re-render (#1049)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jbetancur
jbetancur authored May 12, 2022
1 parent 949988e commit 02cfb72
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 29 deletions.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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",
Expand Down
7 changes: 4 additions & 3 deletions src/DataTable/DataTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,13 +276,14 @@ function DataTable<T>(props: TableProps<T>): 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);
Expand Down
20 changes: 10 additions & 10 deletions stories/props.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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).<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 |
| 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. |
| 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. |
| 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

Expand All @@ -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.<br /><br />**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. <br /><br />**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.<br /><br />**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. <br /><br />**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

Expand Down
29 changes: 16 additions & 13 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 02cfb72

Please sign in to comment.