chore: add grouping state to data table

bleu · Apr 12, 2024 · c2af845 · c2af845
1 parent d8ae302
commit c2af845
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx
@@ -1,7 +1,9 @@
 import {
   getCoreRowModel,
+  getExpandedRowModel,
   getFacetedRowModel,
   getFacetedUniqueValues,
+  getGroupedRowModel,
   getSortedRowModel,
   useReactTable,
 } from "@tanstack/react-table";
@@ -14,6 +16,7 @@ import { serializeQuery } from "#/lib/serializeQuery";
 export function formatRequestParams(originalObj) {
   return {
     ...originalObj,
+    grouping: originalObj.grouping.length > 0 ? originalObj.grouping[0] : null,
     sorting: originalObj?.sorting?.length > 0 ? originalObj.sorting[0] : null,
     columnFilters: originalObj.columnFilters.reduce((acc, filter) => {
       acc[filter.id] = filter.value;
@@ -44,15 +47,22 @@ export function DataTable({
   setQueryToParams,
   setSelectedData,
 }) {
-  const { pagination, rowSelection, columnVisibility, columnFilters, sorting } =
-    tableState;
+  const {
+    pagination,
+    rowSelection,
+    columnVisibility,
+    columnFilters,
+    sorting,
+    grouping,
+  } = tableState;
 
   const {
     setPagination,
     setRowSelection,
     setColumnVisibility,
     setColumnFilters,
     setSorting,
+    setGrouping,
   } = setTableState;
 
   if (error) {
@@ -74,6 +84,7 @@ export function DataTable({
     pageCount: Math.ceil((data?.total ?? 0) / pagination.pageSize),
     columns,
     state: {
+      ...(grouping.length > 0 ? { grouping } : {}),
       sorting,
       rowSelection,
       columnFilters,
@@ -83,6 +94,14 @@ export function DataTable({
         ...hiddenColumns,
       },
     },
+    ...(grouping.length > 0
+      ? {
+          onGroupingChange: setGrouping,
+          getExpandedRowModel: getExpandedRowModel(),
+          getGroupedRowModel: getGroupedRowModel(),
+          autoResetExpanded: false,
+        }
+      : {}),
     onPaginationChange: setPagination,
     manualPagination: true,
     enableRowSelection: true,
@@ -112,6 +131,7 @@ export function DataTable({
       sorting: tableState.sorting,
       pageIndex: tableState.pagination.pageIndex,
       pageSize: tableState.pagination.pageSize,
+      grouping: tableState.grouping,
     });
 
     const params = serializeQuery(formattedParams);
@@ -121,6 +141,7 @@ export function DataTable({
     tableState.pagination.pageSize,
     tableState.sorting,
     tableState.columnFilters,
+    tableState.grouping,
     navigate,
   ]);
 

diff --git a/src/components/DataTable/useSWRDataTable.tsx b/src/components/DataTable/useSWRDataTable.tsx
@@ -5,6 +5,7 @@ import { constructFullUrlWithParams } from "#/lib/constructFullUrlWithParams";
 function formatRequestParams(originalObj) {
   return {
     ...originalObj,
+    grouping: originalObj.grouping.length > 0 ? originalObj.grouping[0] : null,
     sorting: originalObj?.sorting?.length > 0 ? originalObj.sorting[0] : null,
     columnFilters: originalObj.columnFilters.reduce((acc, filter) => {
       acc[filter.id] = filter.value;
@@ -40,6 +41,7 @@ export function useSWRDataTable(path, initialSearch = {}, options = {}) {
         pageSize: tableState.pagination.pageSize,
         sorting: tableState.sorting,
         columnFilters: tableState.columnFilters,
+        grouping: tableState.grouping,
       },
     ],
     dataTableFetcher,

diff --git a/src/components/DataTable/useTableState.tsx b/src/components/DataTable/useTableState.tsx
@@ -18,15 +18,25 @@ export function useTableState(
   );
   const [sorting, setSorting] = useState(initialState.sorting || []);
 
+  const [grouping, setGrouping] = useState(initialState.grouping || []);
+
   const state = useMemo(
     () => ({
       pagination,
       rowSelection,
       columnVisibility,
       columnFilters,
       sorting,
+      grouping,
     }),
-    [pagination, rowSelection, columnVisibility, columnFilters, sorting]
+    [
+      pagination,
+      rowSelection,
+      columnVisibility,
+      columnFilters,
+      sorting,
+      grouping,
+    ]
   );
 
   const handlers = useMemo(
@@ -36,13 +46,15 @@ export function useTableState(
       setColumnVisibility,
       setColumnFilters,
       setSorting,
+      setGrouping,
     }),
     [
       setPagination,
       setRowSelection,
       setColumnVisibility,
       setColumnFilters,
       setSorting,
+      setGrouping,
     ]
   );