fix: Fix table bugs

Signed-off-by: yazhou <[email protected]>
kubesphere · May 30, 2024 · 9c0dd82 · 9c0dd82
1 parent c7f3d3b
commit 9c0dd82
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 9 deletions.
diff --git 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
@@ -61,15 +61,14 @@ export function TableHead<T>({ header, table }: PropsWithChildren<TableHeadProps
   const {
     options: {
       manualSorting,
-      manualFiltering,
       meta: {
         enableDefault: { th: enableTh = true } = {},
         getProps: { th: getThProps, filters: getFiltersProps } = {},
       } = {},
     } = {},
   } = 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
@@ -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
@@ -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
@@ -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: (
               <>