fix(ui): fix table fixed

DevCloudFE · Jun 15, 2023 · 81a51ac · 81a51ac
1 parent b752ec3
commit 81a51ac
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/platform/src/app/components/table/Table.tsx b/packages/platform/src/app/components/table/Table.tsx
@@ -55,12 +55,18 @@ export interface AppTableProps<T> {
     width: number | string;
   };
   aExpand?: (data: T, index: number) => React.ReactNode;
+  aExpandFixed?: {
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+  };
   aScroll?: { x?: number | string; y?: number | string };
   aKey?: (data: T, index: number) => any;
 }
 
 export function AppTable<T = any>(props: AppTableProps<T>): JSX.Element | null {
-  const { className, aName, aData, aColumns, aActions, aExpand, aScroll, aKey = (data) => data['id'] } = props;
+  const { className, aName, aData, aColumns, aActions, aExpand, aExpandFixed, aScroll, aKey = (data) => data['id'] } = props;
 
   const columns = aColumns.filter((column) => !column.hidden);
   const titleIndex = columns.findIndex((column) => column.title);
@@ -76,7 +82,7 @@ export function AppTable<T = any>(props: AppTableProps<T>): JSX.Element | null {
       <DTable
         className={getClassName('d-none d-md-block', className)}
         style={{
-          minHeight: aScroll?.y,
+          maxHeight: aScroll?.y,
           overflowX: isUndefined(aScroll?.x) ? 'hidden' : 'auto',
           overflowY: isUndefined(aScroll?.y) ? 'hidden' : 'auto',
         }}
@@ -85,14 +91,14 @@ export function AppTable<T = any>(props: AppTableProps<T>): JSX.Element | null {
           {aName && <caption>{aName}</caption>}
           <thead>
             <tr>
-              {!isUndefined(aExpand) && <DTable.Th dWidth={60}></DTable.Th>}
+              {!isUndefined(aExpand) && <DTable.Th dWidth={60} dFixed={Object.assign({ top: 0 }, aExpandFixed)}></DTable.Th>}
               {columns.map((column, index) => (
                 <DTable.Th
                   key={index}
                   dWidth={column.width}
                   dSort={column.thProps?.sort}
                   dActions={column.thProps?.actions}
-                  dFixed={column.fixed}
+                  dFixed={Object.assign({ top: 0 }, column.fixed)}
                   dAlign={column.align}
                 >
                   {column.th}

diff --git a/packages/ui/src/components/table/Cell.tsx b/packages/ui/src/components/table/Cell.tsx
@@ -9,9 +9,9 @@ import { DTableContext } from './Table';
 
 const ZINDEX_CONFIG = {
   top: 5,
-  right: 1,
+  right: 2,
   bottom: 5,
-  left: 1,
+  left: 2,
 };
 
 export interface DCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
@@ -61,7 +61,7 @@ export function DCell(props: DCellProps): JSX.Element | null {
     fixedStyle = {
       ...dFixed,
       position: 'sticky',
-      zIndex: Object.keys(dFixed).reduce((previous, current) => previous + ZINDEX_CONFIG[current], 0),
+      zIndex: (dTag === 'th' ? 1 : 0) + Object.keys(dFixed).reduce((previous, current) => previous + ZINDEX_CONFIG[current], 0),
     };
 
     if ('left' in dFixed) {