Merge pull request #15 from gisce/feat/allow-selection-row-keys-by-props

Allow to pass selection row keys in Table component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-formiga-table",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "scripts": {
     "build": "tsc && vite build",
     "prepublishOnly": "npm run build",
@@ -13,7 +13,8 @@
   "dependencies": {
     "react": "^16.8.0 || 17.x",
     "react-dom": "^16.8.0 || 17.x",
-    "styled-components": "^5.0.0"
+    "styled-components": "^5.0.0",
+    "use-deep-compare-effect": "^1.8.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",

src/Table.tsx

@@ -23,7 +23,8 @@ export const Table = (props: TableProps) => {
     sorter,
     expandableOpts,
     onCellRender,
-    readonly
+    readonly,
+    selectionRowKeys: selectionRowKeysProps,
   } = props;
 
   if (loading) {
@@ -35,7 +36,10 @@ export const Table = (props: TableProps) => {
     toggleAllRowsSelected,
     isRowSelected,
     changeSelected,
-  } = useSelectable();
+  } = useSelectable({
+    selectionRowKeysProps
+  });
+
   const onChange = useShiftSelected(dataSource.map(el => el.id), changeSelected);
   const { localSorter, getColumnSorter, handleColumnClick } =
     useSortable(sorter);

src/hooks/useSelectable.ts

@@ -1,7 +1,18 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
+import useDeepCompareEffect from "use-deep-compare-effect";
 
-export const useSelectable = () => {
-  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
+export const useSelectable = ({
+  selectionRowKeysProps = [],
+}: {
+  selectionRowKeysProps?: number[];
+}) => {
+  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>(
+    selectionRowKeysProps
+  );
+
+  useDeepCompareEffect(() => {
+    setSelectedRowKeys(selectionRowKeysProps);
+  }, [selectionRowKeysProps]);
 
   const toggleAllRowsSelected = useCallback(
     (allVisibleKeys: number[]) => {
@@ -24,11 +35,14 @@ export const useSelectable = () => {
         return;
       }
       if (check) {
-        setSelectedRowKeys([...new Set([...selectedRowKeys, ...items])])
+        setSelectedRowKeys([...new Set([...selectedRowKeys, ...items])]);
       } else {
-        setSelectedRowKeys(selectedRowKeys.filter((id: number) => !items.includes(id)))
+        setSelectedRowKeys(
+          selectedRowKeys.filter((id: number) => !items.includes(id))
+        );
       }
-    }, [selectedRowKeys, setSelectedRowKeys]
+    },
+    [selectedRowKeys, setSelectedRowKeys]
   );
 
   const toggleRowSelected = useCallback(
@@ -49,7 +63,6 @@ export const useSelectable = () => {
 
   const isRowSelected = useCallback(
     (row: any) => {
-
       const selectedFoundRow = selectedRowKeys.find(
         (id: number) => row.id === id
       );
@@ -66,4 +79,4 @@ export const useSelectable = () => {
     toggleRowSelected,
     changeSelected,
   };
-};
+};

src/types/index.tsx

@@ -44,4 +44,5 @@ export type TableProps = {
   height?: number;
   onCellRender?: (opts: OnCellRenderOpts) => React.ReactNode;
   readonly?: boolean;
+  selectionRowKeys?: number[];
 };

vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
       fileName: (format) => `react-formiga-table.${format}.js`,
     },
     rollupOptions: {
-      external: ["react", "react-dom", "styled-components"],
+      external: ["react", "react-dom", "styled-components", "use-deep-compare-effect"],
       output: {
         globals: {
           react: "React",