add sorted columns to onSort (#1047)

Author: jbetancur

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-table-component",
-  "version": "7.5.0",
+  "version": "7.5.1",
   "description": "A simple to use declarative react based data table",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -46,12 +46,12 @@
     "@material-ui/icons": "^4.11.2",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.1",
-    "@storybook/addon-a11y": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-storysource": "^6.4.9",
-    "@storybook/addons": "^6.4.9",
-    "@storybook/react": "^6.4.9",
-    "@storybook/theming": "^6.4.9",
+    "@storybook/addon-a11y": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-storysource": "^6.4.22",
+    "@storybook/addons": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/theming": "^6.4.22",
     "@testing-library/react": "^12.1.2",
     "@types/faker": "^5.5.9",
     "@types/jest": "^27.0.3",
@@ -74,7 +74,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "eslint-plugin-storybook": "^0.5.3",
+    "eslint-plugin-storybook": "^0.5.11",
     "faker": "^5.5.3",
     "gh-pages": "^3.2.3",
     "jest": "^27.4.5",
@@ -84,9 +84,9 @@
     "memoize-one": "^6.0.0",
     "moment": "^2.29.1",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
+    "react": "^18.1.0",
     "react-app-polyfill": "^3.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.61.1",
     "rollup-plugin-terser": "^7.0.2",
@@ -98,7 +98,7 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.1.2",
-    "typescript": "^4.5.4"
+    "typescript": "^4.6.4"
   },
   "dependencies": {
     "deepmerge": "^4.2.2"

src/DataTable/DataTable.tsx

@@ -281,8 +281,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
 	}, [toggleOnSelectedRowsChange]);
 
 	useDidUpdateEffect(() => {
-		onSort(selectedColumn, sortDirection);
-	}, [selectedColumn, sortDirection]);
+		onSort(selectedColumn, sortDirection, sortedData);
+	}, [selectedColumn, sortDirection, sortedData]);
 
 	useDidUpdateEffect(() => {
 		onChangePage(currentPage, paginationTotalRows || sortedData.length);

src/DataTable/__tests__/DataTable.test.tsx

@@ -675,7 +675,7 @@ describe('DataTable::sorting', () => {
 
 		fireEvent.click(container.querySelector('div[data-sort-id="1"]') as HTMLElement);
 
-		expect(onSortMock).toBeCalledWith({ id: 1, ...mock.columns[0] }, SortOrder.ASC);
+		expect(onSortMock).toBeCalledWith({ id: 1, ...mock.columns[0] }, SortOrder.ASC, mock.data.slice(0).sort());
 	});
 
 	test('should call onSort with the correct params if the sort is clicked twice', () => {
@@ -684,10 +684,10 @@ describe('DataTable::sorting', () => {
 		const { container } = render(<DataTable data={mock.data} columns={mock.columns} onSort={onSortMock} />);
 
 		fireEvent.click(container.querySelector('div[data-sort-id="1"]') as HTMLElement);
-		expect(onSortMock).toBeCalledWith({ id: 1, ...mock.columns[0] }, SortOrder.ASC);
+		expect(onSortMock).toBeCalledWith({ id: 1, ...mock.columns[0] }, SortOrder.ASC, mock.data.slice(0).sort());
 
 		fireEvent.click(container.querySelector('div[data-sort-id="1"]') as HTMLElement);
-		expect(onSortMock).toBeCalledWith({ id: 1, ...mock.columns[0] }, SortOrder.DESC);
+		expect(onSortMock).toBeCalledWith({ id: 1, ...mock.columns[0] }, SortOrder.DESC, mock.data.slice(0).reverse());
 	});
 
 	test('should render correctly with a custom sortIcon', () => {

src/DataTable/types.ts

@@ -70,7 +70,7 @@ export type TableProps<T> = {
 	onRowMouseLeave?: (row: T, e: React.MouseEvent) => void;
 	onRowExpandToggled?: ExpandRowToggled<T>;
 	onSelectedRowsChange?: (selected: { allSelected: boolean; selectedCount: number; selectedRows: T[] }) => void;
-	onSort?: (selectedColumn: TableColumn<T>, sortDirection: SortOrder) => void;
+	onSort?: (selectedColumn: TableColumn<T>, sortDirection: SortOrder, sortedRows: T[]) => void;
 	onColumnOrderChange?: (nextOrder: TableColumn<T>[]) => void;
 	pagination?: boolean;
 	paginationComponent?: PaginationComponent;