refactor: Refactor table footer (#237)

* refactor: refactor table footer Signed-off-by: yazhou <[email protected]> * chore: update version Signed-off-by: yazhou <[email protected]> --------- Signed-off-by: yazhou <[email protected]>
kubesphere · Jun 13, 2024 · d32ed55 · d32ed55
1 parent b8b2550
commit d32ed55
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/eleven-yaks-check.md b/.changeset/eleven-yaks-check.md
@@ -0,0 +1,5 @@
+---
+'@kubed/components': patch
+---
+
+refactor: Refactor table footer
diff --git a/packages/components/src/Table/DataTable/Pagination.tsx b/packages/components/src/Table/DataTable/Pagination.tsx
@@ -7,7 +7,7 @@ interface PaginationProps<T> {
   table: Table<T>;
 }
 
-const TableFooter = styled.div`
+export const TableFooter = styled.div`
   position: relative;
   padding: 10px 20px;
   background-color: ${({ theme }) => theme.palette.accents_0};
@@ -41,9 +41,5 @@ export const Pagination = <T extends {}>({ table }: PaginationProps<T>) => {
     };
   }, [table, props.total]);
 
-  return (
-    <TableFooter>
-      <BaseTable.BasePagination instance={instance} {...props} />
-    </TableFooter>
-  );
+  return <BaseTable.BasePagination instance={instance} {...props} />;
 };
diff --git a/packages/components/src/Table/DataTable/Table.tsx b/packages/components/src/Table/DataTable/Table.tsx
@@ -3,7 +3,7 @@ import cx from 'classnames';
 import * as React from 'react';
 import * as BaseTable from '../BaseTable';
 import { BaseDataTable } from './BaseTable';
-import { Pagination } from './Pagination';
+import { Pagination, TableFooter } from './Pagination';
 import { Toolbar } from './Toolbar';
 import {
   DataTableRootProps,
@@ -91,7 +91,11 @@ export function DataTable<T>({ className, table }: DataTableRootProps<T>) {
     <div className={cx('table-container', className)}>
       {!!toolbar && <Toolbar table={table} />}
       <BaseDataTable table={table} />
-      {!!pagination && <Pagination table={table} />}
+      {!!pagination && (
+        <TableFooter>
+          <Pagination table={table} />
+        </TableFooter>
+      )}
     </div>
   );
 }