style: refactor sticky table styles (#294)

* style: refactor sticky table styles Signed-off-by: yazhou <yazhouhu@yunify.com> * ci: Add changeset Signed-off-by: yazhou <yazhouhu@yunify.com> * style: refactor sticky table styles Signed-off-by: yazhou <yazhouhu@yunify.com> --------- Signed-off-by: yazhou <yazhouhu@yunify.com>
kubesphere · Aug 7, 2024 · cb0a386 · cb0a386
1 parent 2dd9d29
commit cb0a386
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 17 deletions.
diff --git a/.changeset/ten-days-sell.md b/.changeset/ten-days-sell.md
@@ -0,0 +1,13 @@
+---
+'@kubed/code-editor': patch
+'@kubed/diff-viewer': patch
+'@kubed/components': patch
+'@kubed/log-viewer': patch
+'@kubed/charts': patch
+'@kubed/hooks': patch
+'@kubed/icons': patch
+'@kubed/tests': patch
+'kubed-documents': patch
+---
+
+style: Refactor with-sticky table styles
diff --git a/packages/components/src/Table/BaseTable/TableCell.tsx b/packages/components/src/Table/BaseTable/TableCell.tsx
@@ -109,6 +109,11 @@ const TableCellRoot = styled.td<{
         top: 0,
         zIndex: fixed ? 3 : 2,
       }),
+      '&.with-sticky': {
+        position: 'sticky',
+        top: 0,
+        zIndex: 2,
+      },
       ...(fixedLastLeft && {
         '&:after': {
           content: '""',
@@ -183,7 +188,13 @@ export const TableCell = React.forwardRef<
     return (
       <TableCellRoot
         as={component as any}
-        className={cx('table-cell', className)}
+        className={cx(
+          'table-cell',
+          {
+            'with-sticky': !!(variant === 'head' && table && table.stickyHeader),
+          },
+          className
+        )}
         $ownerState={cellProps}
         ref={ref}
         {...other}

diff --git a/packages/components/src/Table/BaseTable/TableHead.tsx b/packages/components/src/Table/BaseTable/TableHead.tsx
@@ -13,13 +13,15 @@ interface TableHeadProps {
   className?: string;
   style?: React.CSSProperties;
   hasBorder?: boolean;
+  hasBorderTop?: boolean;
 }
 
 const TableHeadRoot = styled.thead<{
   $ownerState: {
     stickyHeader?: boolean;
+    hasBorderTop?: boolean;
   };
-}>(({ $ownerState: { stickyHeader }, theme }) => ({
+}>(({ $ownerState: { stickyHeader, hasBorderTop }, theme }) => ({
   display: 'table-header-group',
   backgroundColor: theme.palette.background,
 
@@ -28,12 +30,20 @@ const TableHeadRoot = styled.thead<{
     top: 0,
     zIndex: 2,
   }),
+  ...(hasBorderTop && {
+    borderTop: `1px solid ${theme.palette.accents_1}`,
+  }),
+  '&.with-sticky': {
+    position: 'sticky',
+    top: 0,
+    zIndex: 2,
+  },
 }));
 
 export const TableHead = React.forwardRef<
   HTMLTableSectionElement,
   React.PropsWithChildren<TableHeadProps>
->(({ className, hasBorder = tableLv.hasBorder, ...rest }, ref) => {
+>(({ className, hasBorderTop, hasBorder = tableLv.hasBorder, ...rest }, ref) => {
   const lv = React.useMemo(() => ({ ...tableLv, hasBorder }), [hasBorder]);
   const table = useTableContext();
 
@@ -43,9 +53,16 @@ export const TableHead = React.forwardRef<
         {...rest}
         $ownerState={{
           stickyHeader: table?.stickyHeader,
+          hasBorderTop,
         }}
         ref={ref}
-        className={cx('kube-table-head', className)}
+        className={cx(
+          'kube-table-head',
+          {
+            'with-sticky': table?.stickyHeader,
+          },
+          className
+        )}
       />
     </TableLvContext.Provider>
   );

diff --git a/packages/components/src/Table/DataTable/BaseTable.tsx b/packages/components/src/Table/DataTable/BaseTable.tsx
@@ -15,6 +15,7 @@ export function BaseDataTable<T>({ table }: BaseDataTableProps<T>) {
       loading,
       meta: {
         refetch,
+        enable: { toolbar } = {},
         enableDefault: { tr: enableTr = true } = {},
         getProps: {
           table: getTableProps,
@@ -31,7 +32,7 @@ export function BaseDataTable<T>({ table }: BaseDataTableProps<T>) {
   return (
     <>
       <BaseTable.Table {...tableProps}>
-        <BaseTable.TableHead>
+        <BaseTable.TableHead hasBorderTop={!!toolbar}>
           {table.getHeaderGroups().map((headerGroup) => (
             <BaseTable.TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => (

diff --git a/packages/components/src/Table/DataTable/Table.tsx b/packages/components/src/Table/DataTable/Table.tsx
@@ -14,9 +14,6 @@ import {
   StorageStateOptions,
 } from './interfaces';
 
-const ToolbarWithBorder = styled(Toolbar)<any>`
-  border-bottom: 1px solid ${({ theme }) => theme.palette.accents_1};
-`;
 declare module '@tanstack/react-table' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface TableOptionsResolved<TData extends RowData>
@@ -93,7 +90,7 @@ export function DataTable<T>({ className, table }: DataTableRootProps<T>) {
   const { options: { meta: { enable: { pagination, toolbar } = {} } = {} } = {} } = table;
   return (
     <div className={cx('table-container', className)}>
-      {!!toolbar && <ToolbarWithBorder table={table} />}
+      {!!toolbar && <Toolbar table={table} />}
       <BaseDataTable table={table} />
       {!!pagination && (
         <TableFooter>

diff --git a/packages/components/src/Table/Table.story.tsx b/packages/components/src/Table/Table.story.tsx
@@ -17,6 +17,7 @@ import { Menu, MenuItem } from '../Menu/Menu';
 import { Select } from '../Select/Select';
 import { StateHandler, Status2StorageFeature, getDefaultTableOptions, useTable } from './DataTable';
 import { Center } from '../Center/Center';
+import styled from 'styled-components';
 
 const { Table, TableBody, TableCell, TableHead, TableRow, Pagination, Toolbar } = BaseTable;
 export default {
@@ -109,6 +110,18 @@ export const basicTableWithSelected = () => {
 };
 
 export const basicTableWithFixedHeader = () => {
+  const Wrapper = styled.div`
+    padding: 20px;
+    height: 300px;
+    overflow-y: auto;
+    background-color: #f5f5f5;
+    & {
+      .kube-table-head.with-sticky,
+      .table-cell.with-sticky {
+        top: -20px;
+      }
+    }
+  `;
   const data = React.useMemo(() => {
     return [...Array(100).fill(1)].map((_, i) => ({
       col1: i,
@@ -117,14 +130,9 @@ export const basicTableWithFixedHeader = () => {
     }));
   }, []);
   return (
-    <div
-      style={{
-        height: '300px',
-        overflowY: 'auto',
-      }}
-    >
+    <Wrapper>
       <Table stickyHeader>
-        <TableHead hasBorder>
+        <TableHead hasBorder hasBorderTop>
           <TableRow>
             <TableCell colSpan={2}>Header 1</TableCell>
             <TableCell colSpan={1}>Header 2</TableCell>
@@ -145,7 +153,7 @@ export const basicTableWithFixedHeader = () => {
           ))}
         </TableBody>
       </Table>
-    </div>
+    </Wrapper>
   );
 };