feat(DataTable): add expanded param to exposed table state

bleu · May 2, 2024 · 35b9369 · 35b9369
1 parent c26a17a
commit 35b9369
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
@@ -7,7 +7,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { useEffect } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { TableContext } from "./TableContext";
@@ -55,6 +55,7 @@ export function DataTable({
     columnFilters,
     sorting,
     grouping,
+    expanded,
   } = tableState;
 
   const {
@@ -64,6 +65,7 @@ export function DataTable({
     setColumnFilters,
     setSorting,
     setGrouping,
+    setExpanded,
   } = setTableState;
 
   if (error) {
@@ -90,6 +92,7 @@ export function DataTable({
       rowSelection,
       columnFilters,
       pagination,
+      expanded,
       columnVisibility: {
         ...columnVisibility,
         ...hiddenColumns,
@@ -106,6 +109,7 @@ export function DataTable({
     onPaginationChange: setPagination,
     manualPagination: true,
     enableRowSelection: true,
+    onExpandedChange: setExpanded,
     onRowSelectionChange: setRowSelection,
     onSortingChange: setSorting,
     onColumnFiltersChange: setColumnFilters,
@@ -146,17 +150,28 @@ export function DataTable({
     navigate,
   ]);
 
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  const contextValue = {
-    data,
-    filters,
-    error,
-    tableState,
-    setTableState,
-    table,
-    searchKey,
-    isLoading,
-  };
+  const contextValue = useMemo(
+    () => ({
+      data,
+      filters,
+      error,
+      tableState,
+      setTableState,
+      table,
+      searchKey,
+      isLoading,
+    }),
+    [
+      data,
+      filters,
+      error,
+      tableState,
+      setTableState,
+      table,
+      searchKey,
+      isLoading,
+    ]
+  );
 
   return (
     <TableContext.Provider value={contextValue}>

diff --git a/src/components/DataTable/useSWRDataTable.tsx b/src/components/DataTable/useSWRDataTable.tsx
@@ -31,7 +31,7 @@ const dataTableFetcher = async ([pathOrUrl, paramsObject]) => {
 };
 
 export function useSWRDataTable(path, initialSearch = {}, options = {}) {
-  const { tableState, setTableState } = useTableState({ ...initialSearch });
+  const { tableState, setTableState } = useTableState(initialSearch);
 
   const { data, error, isLoading } = useSWR(
     [

diff --git a/src/components/DataTable/useTableState.tsx b/src/components/DataTable/useTableState.tsx
@@ -19,6 +19,7 @@ export function useTableState(
   const [sorting, setSorting] = useState(initialState.sorting || []);
 
   const [grouping, setGrouping] = useState(initialState.grouping || []);
+  const [expanded, setExpanded] = useState(initialState.expanded || false);
 
   const state = useMemo(
     () => ({
@@ -28,6 +29,7 @@ export function useTableState(
       columnFilters,
       sorting,
       grouping,
+      expanded,
     }),
     [
       pagination,
@@ -36,6 +38,7 @@ export function useTableState(
       columnFilters,
       sorting,
       grouping,
+      expanded,
     ]
   );
 
@@ -47,6 +50,7 @@ export function useTableState(
       setColumnFilters,
       setSorting,
       setGrouping,
+      setExpanded,
     }),
     [
       setPagination,
@@ -55,6 +59,7 @@ export function useTableState(
       setColumnFilters,
       setSorting,
       setGrouping,
+      setExpanded,
     ]
   );