feat: add maxContext prop to Table component for dynamic width adjust…

… ment (#324) * feat: add maxContext prop to Table component for dynamic width adjustment Signed-off-by: ya zhou <[email protected]> * ci: update version Signed-off-by: ya zhou <[email protected]> * feat: enhance Table component with scroll status tracking and dynamic styling Signed-off-by: ya zhou <[email protected]> * feat: update Dropdown component in TableHead to append content to document body Signed-off-by: ya zhou <[email protected]> * feat: enhance Table component with additional columns and pagination support Signed-off-by: ya zhou <[email protected]> --------- Signed-off-by: ya zhou <[email protected]>
kubesphere · Dec 17, 2024 · 830ab57 · 830ab57
1 parent 85b8544
commit 830ab57
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 44 deletions.
diff --git a/.changeset/early-gifts-lie.md b/.changeset/early-gifts-lie.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
+---
+
+feat: add maxContext prop to Table component for dynamic width adjustment
diff --git a/packages/components/src/Table/BaseTable/Table.tsx b/packages/components/src/Table/BaseTable/Table.tsx
@@ -1,11 +1,13 @@
-import styled from 'styled-components';
-import * as React from 'react';
 import cx from 'classnames';
+import { throttle } from 'lodash';
+import * as React from 'react';
+import styled, { css } from 'styled-components';
 import { TableContext } from './context';
 
 const TableRoot = styled('table')<{
   $stickyHeader?: boolean;
-}>(({ theme, $stickyHeader }) => ({
+  $maxContext?: boolean;
+}>(({ theme, $stickyHeader, $maxContext }) => ({
   display: 'table',
   width: '100%',
   borderCollapse: 'collapse',
@@ -17,9 +19,12 @@ const TableRoot = styled('table')<{
   },
   ...($stickyHeader && {
     borderCollapse: 'separate',
-    width: 'max-content',
+    width: '100%',
     minWidth: '100%',
   }),
+  ...($maxContext && {
+    width: 'max-content',
+  }),
 }));
 
 interface TableInnerProps {
@@ -29,12 +34,27 @@ interface TableInnerProps {
   className?: string;
   style?: React.CSSProperties;
   tableWrapperClassName?: string;
+  maxContext?: boolean;
+  wrapperStyle?: React.CSSProperties;
 }
 
 export type { TableInnerProps as TableProps };
 
-const TableWrapper = styled.div`
-  position: relative;
+const TableWrapper = styled.div<{ atStart?: boolean; atEnd?: boolean }>`
+  ${({ atStart }) =>
+    atStart &&
+    css`
+      .table-cell--fixed-last-left:after {
+        box-shadow: unset;
+      }
+    `}
+  ${({ atEnd }) =>
+    atEnd &&
+    css`
+      .table-cell--fixed-last-right:before {
+        box-shadow: unset;
+      }
+    `}
 `;
 
 export const Table = React.forwardRef<HTMLTableElement, React.PropsWithChildren<TableInnerProps>>(
@@ -45,6 +65,8 @@ export const Table = React.forwardRef<HTMLTableElement, React.PropsWithChildren<
       stickyHeader = false,
       className,
       tableWrapperClassName,
+      maxContext,
+      wrapperStyle,
       ...other
     } = props;
 
@@ -56,14 +78,80 @@ export const Table = React.forwardRef<HTMLTableElement, React.PropsWithChildren<
       }),
       [padding, size, stickyHeader]
     );
+
+    const wrapperRef = React.useRef<HTMLDivElement>(null);
+    const [scrollStatus, setScrollStatus] = React.useState<{ atStart: boolean; atEnd: boolean }>({
+      atStart: true,
+      atEnd: false,
+    });
+
+    React.useEffect(() => {
+      // const throttle = (func: () => void, limit: number) => {
+      //   let lastFunc: ReturnType<typeof setTimeout>;
+      //   let lastRan: number;
+      //   return () => {
+      //     const now = Date.now();
+      //     if (!lastRan) {
+      //       func();
+      //       lastRan = now;
+      //     } else {
+      //       clearTimeout(lastFunc);
+      //       lastFunc = setTimeout(() => {
+      //         if (Date.now() - lastRan >= limit) {
+      //           func();
+      //           lastRan = Date.now();
+      //         }
+      //       }, limit - (now - lastRan));
+      //     }
+      //   };
+      // };
+
+      const handleScroll = () => {
+        if (wrapperRef.current) {
+          const { scrollLeft, scrollWidth, clientWidth } = wrapperRef.current;
+          setScrollStatus({
+            atStart: scrollLeft === 0,
+            atEnd: scrollLeft + clientWidth >= scrollWidth,
+          });
+        }
+      };
+
+      const throttledHandleScroll = throttle(handleScroll, 200);
+
+      const wrapper = wrapperRef.current;
+      if (wrapper) {
+        throttledHandleScroll();
+        wrapper.addEventListener('scroll', throttledHandleScroll);
+
+        const resizeObserver = new ResizeObserver(throttledHandleScroll);
+        resizeObserver.observe(wrapper);
+
+        return () => {
+          wrapper.removeEventListener('scroll', throttledHandleScroll);
+          resizeObserver.disconnect();
+        };
+      }
+
+      return () => {};
+    }, []);
+
     return (
       <TableContext.Provider value={table}>
-        <TableWrapper className={cx(tableWrapperClassName, 'kube-table-wrapper')}>
+        <TableWrapper
+          ref={wrapperRef}
+          className={cx(tableWrapperClassName, 'kube-table-wrapper')}
+          atStart={scrollStatus.atStart}
+          atEnd={scrollStatus.atEnd}
+          style={wrapperStyle ?? {}}
+        >
           <TableRoot
             {...other}
             $stickyHeader={stickyHeader}
+            $maxContext={maxContext}
             ref={ref}
-            className={cx(className, 'kube-table')}
+            className={cx(className, 'kube-table', {
+              'kube-table--max-context': maxContext,
+            })}
           />
         </TableWrapper>
       </TableContext.Provider>

diff --git a/packages/components/src/Table/BaseTable/TableCell.tsx b/packages/components/src/Table/BaseTable/TableCell.tsx
@@ -74,6 +74,7 @@ const TableCellRoot = styled.td<{
       verticalAlign: 'inherit',
       ...(width && {
         width: typeof width === 'number' ? `${width}px` : width,
+        minWidth: typeof width === 'number' ? `${width}px` : width,
       }),
       // boxShadow: `inset 0 -1px 0 0 ${theme.palette.accents_1}`,
       ...(size && {
@@ -199,6 +200,8 @@ export const TableCell = React.forwardRef<
           'table-cell',
           {
             'with-sticky': !!(variant === 'head' && table && table.stickyHeader),
+            'table-cell--fixed-last-left': fixedLastLeft,
+            'table-cell--fixed-last-right': fixedLastRight,
           },
           className
         )}

diff --git a/packages/components/src/Table/DataTable/TableHead.tsx b/packages/components/src/Table/DataTable/TableHead.tsx
@@ -180,7 +180,7 @@ export function TableHead<T>({ header, table }: PropsWithChildren<TableHeadProps
       );
 
       return (
-        <Dropdown content={content}>
+        <Dropdown content={content} appendTo={document.body}>
           <DropdownWrapper>
             {flexRender(header.column.columnDef.header, header.getContext())}
             <CaretDown className="sort-indicator" />