From 9c0dd82b8770d281f4f348d6f2ca637f7db6b723 Mon Sep 17 00:00:00 2001
From: yazhou <yazhouhu@yunify.com>
Date: Thu, 30 May 2024 14:50:39 +0800
Subject: [PATCH] fix: Fix table bugs

Signed-off-by: yazhou <yazhouhu@yunify.com>
---
 .../components/src/Table/DataTable/Table.tsx  |  1 +
 .../src/Table/DataTable/TableHead.tsx         |  7 +++---
 .../features/InitPaginationFeature.ts         | 25 ++++++++++++++++++-
 .../src/Table/DataTable/utils/index.tsx       | 16 ++++++++++--
 packages/components/src/Table/Table.story.tsx | 20 ++++++++++++---
 5 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/Table/DataTable/Table.tsx b/packages/components/src/Table/DataTable/Table.tsx
index 8d81f49c..166d9d71 100644
--- a/packages/components/src/Table/DataTable/Table.tsx
+++ b/packages/components/src/Table/DataTable/Table.tsx
@@ -19,6 +19,7 @@ declare module '@tanstack/react-table' {
     extends StorageStateOptions,
       FeaturesHandlersOptions {
     loading?: boolean;
+    autoResetFiltersWhenPageChange?: boolean;
   }
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/packages/components/src/Table/DataTable/TableHead.tsx b/packages/components/src/Table/DataTable/TableHead.tsx
index c63de758..192c356a 100644
--- a/packages/components/src/Table/DataTable/TableHead.tsx
+++ b/packages/components/src/Table/DataTable/TableHead.tsx
@@ -61,7 +61,6 @@ export function TableHead<T>({ header, table }: PropsWithChildren<TableHeadProps
   const {
     options: {
       manualSorting,
-      manualFiltering,
       meta: {
         enableDefault: { th: enableTh = true } = {},
         getProps: { th: getThProps, filters: getFiltersProps } = {},
@@ -69,7 +68,7 @@ export function TableHead<T>({ header, table }: PropsWithChildren<TableHeadProps
     } = {},
   } = table;
 
-  const searchKey = manualFiltering ? _searchKey ?? id : id;
+  const searchKey = _searchKey ?? id;
 
   const isCheckbox = selectType
     ? selectType === 'multiple'
@@ -86,7 +85,9 @@ export function TableHead<T>({ header, table }: PropsWithChildren<TableHeadProps
   const filterOptions =
     suggestions.find((suggestion) => suggestion.key === searchKey)?.options ?? [];
 
-  const sortable = !manualSorting ? header.column.getCanSort() : _sortable;
+  const sortable =
+    header.column.columnDef.enableSorting ??
+    (!manualSorting ? header.column.getCanSort() : _sortable);
 
   const { enableMultiSort = false } = table.options;
 
diff --git a/packages/components/src/Table/DataTable/features/InitPaginationFeature.ts b/packages/components/src/Table/DataTable/features/InitPaginationFeature.ts
index 94f2038a..73ea5079 100644
--- a/packages/components/src/Table/DataTable/features/InitPaginationFeature.ts
+++ b/packages/components/src/Table/DataTable/features/InitPaginationFeature.ts
@@ -1,4 +1,11 @@
-import { TableFeature, TableOptionsResolved, getPaginationRowModel } from '@tanstack/react-table';
+import {
+  PaginationState,
+  TableFeature,
+  TableOptionsResolved,
+  Updater,
+  functionalUpdate,
+  getPaginationRowModel,
+} from '@tanstack/react-table';
 
 const getPaginationOptions = <TData>(options: TableOptionsResolved<TData>) => {
   const {
@@ -15,6 +22,7 @@ const getPaginationOptions = <TData>(options: TableOptionsResolved<TData>) => {
     manualPagination: true,
     rowCount: 0,
     autoResetPageIndex: false,
+    autoResetFiltersWhenPageChange: true,
     ...options,
   };
 };
@@ -32,4 +40,19 @@ export const InitPaginationFeature: TableFeature<any> = {
   getDefaultOptionsResolved: (options) => {
     return getPaginationOptions(options);
   },
+  createTable: (table) => {
+    // eslint-disable-next-line no-param-reassign
+    table.setPagination = (updater) => {
+      const safeUpdater: Updater<PaginationState> = (old) => {
+        const newState = functionalUpdate(updater, old);
+        return newState;
+      };
+
+      const { autoResetFiltersWhenPageChange = false } = table.options;
+      if (autoResetFiltersWhenPageChange) {
+        table.setRowSelection({});
+      }
+      return table.options.onPaginationChange?.(safeUpdater);
+    };
+  },
 };
diff --git a/packages/components/src/Table/DataTable/utils/index.tsx b/packages/components/src/Table/DataTable/utils/index.tsx
index d26222e5..cad3d75b 100644
--- a/packages/components/src/Table/DataTable/utils/index.tsx
+++ b/packages/components/src/Table/DataTable/utils/index.tsx
@@ -76,7 +76,11 @@ export function getDefaultToolbarProps<T>(
   if (enableSettingMenu === undefined) {
     enableSettingMenu = visibilityColumns.length > 0;
   }
-  const enableBatchActions = table.getIsAllPageRowsSelected() || table.getIsSomeRowsSelected();
+  const enableBatchActions =
+    table.getIsAllRowsSelected() ||
+    table.getIsAllPageRowsSelected() ||
+    table.getIsSomeRowsSelected() ||
+    table.getIsSomePageRowsSelected();
 
   let filterProps;
   let defaultFilterProps;
@@ -106,6 +110,14 @@ export function getDefaultToolbarProps<T>(
         const { id: menuItemKey } = column;
         const isVisible = column.getIsVisible();
         const icon = isVisible ? <Eye /> : <EyeClosed />;
+        let title = column.columnDef.header;
+        if (typeof column.columnDef.header === 'function') {
+          title = column.columnDef.header({
+            table,
+            header: undefined,
+            column,
+          });
+        }
         return (
           <MenuItem
             key={menuItemKey}
@@ -114,7 +126,7 @@ export function getDefaultToolbarProps<T>(
               column.toggleVisibility(!isVisible);
             }}
           >
-            {column.id}
+            {title}
           </MenuItem>
         );
       })}
diff --git a/packages/components/src/Table/Table.story.tsx b/packages/components/src/Table/Table.story.tsx
index 8eff5946..c64f1e9a 100644
--- a/packages/components/src/Table/Table.story.tsx
+++ b/packages/components/src/Table/Table.story.tsx
@@ -406,6 +406,7 @@ const defaultColumns: ColumnDef<Person>[] = [
       {
         accessorKey: 'firstName',
         cell: (info) => info.getValue(),
+        enableSorting: true,
         footer: (props) => props.column.id,
       },
       {
@@ -424,8 +425,11 @@ const defaultColumns: ColumnDef<Person>[] = [
     columns: [
       {
         accessorKey: 'age',
-        header: () => 'Age',
+        header: () => {
+          return 'Age';
+        },
         footer: (props) => props.column.id,
+        enableHiding: true,
         meta: {
           sortable: true,
           // filterOptions: [
@@ -452,6 +456,8 @@ const defaultColumns: ColumnDef<Person>[] = [
             accessorKey: 'status',
             header: 'Status',
             footer: (props) => props.column.id,
+
+            enableHiding: true,
             meta: {
               searchKey: 'status1',
             },
@@ -633,7 +639,7 @@ export const DataTableWithSelected = () => {
       id: 'selection',
       header: ({ table }) => (
         <Checkbox
-          checked={table.getIsAllRowsSelected()}
+          checked={table.getIsAllRowsSelected() || table.getIsAllPageRowsSelected()}
           indeterminate={table.getIsSomeRowsSelected()}
           onChange={table.getToggleAllRowsSelectedHandler()} //or getToggleAllPageRowsSelectedHandler
         />
@@ -729,7 +735,15 @@ export const DataTableWithSelected = () => {
         }),
         toolbar: () => {
           return {
-            batchActions: <Button> Delete </Button>,
+            batchActions: (
+              <Button
+                onClick={() => {
+                  console.log(rowSelection);
+                }}
+              >
+                Delete
+              </Button>
+            ),
             toolbarLeft: <Select />,
             toolbarRight: (
               <>