feat: support listItemHeight

react-component · Aug 22, 2023 · 28d54a6 · 28d54a6
1 parent 9bdcdd4
commit 28d54a6
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/src/VirtualTable/BodyGrid.tsx b/src/VirtualTable/BodyGrid.tsx
@@ -29,7 +29,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
       'expandedKeys',
       'childrenColumnName',
     ]);
-  const { scrollY, scrollX } = useContext(StaticContext);
+  const { scrollY, scrollX, listItemHeight } = useContext(StaticContext);
 
   // =========================== Ref ============================
   const listRef = React.useRef<ListRef>();
@@ -182,7 +182,7 @@ const Grid = React.forwardRef<GridRef, GridProps>((props, ref) => {
           ref={listRef}
           className={classNames(tblPrefixCls, `${tblPrefixCls}-virtual`)}
           height={scrollY}
-          itemHeight={24}
+          itemHeight={listItemHeight || 24}
           data={flattenData}
           itemKey={item => getRowKey(item.record)}
           scrollWidth={scrollX}

diff --git a/src/VirtualTable/context.ts b/src/VirtualTable/context.ts
@@ -3,6 +3,7 @@ import { createContext } from '@rc-component/context';
 export interface StaticContextProps {
   scrollX: number;
   scrollY: number;
+  listItemHeight: number;
 }
 
 export const StaticContext = createContext<StaticContextProps>(null);

diff --git a/src/VirtualTable/index.tsx b/src/VirtualTable/index.tsx
@@ -15,17 +15,18 @@ const renderBody: CustomizeScrollBody<any> = (rawData, props) => {
   return <Grid ref={ref} data={rawData as any} onScroll={onScroll} />;
 };
 
-export interface StaticTableProps<RecordType> extends Omit<TableProps<RecordType>, 'scroll'> {
+export interface VirtualTableProps<RecordType> extends Omit<TableProps<RecordType>, 'scroll'> {
   scroll: {
     x: number;
     y: number;
   };
+  listItemHeight?: number;
 }
 
 const PRESET_COLUMN_WIDTH = 100;
 
-function VirtualTable<RecordType>(props: StaticTableProps<RecordType>) {
-  const { columns, scroll, prefixCls = DEFAULT_PREFIX, className } = props;
+function VirtualTable<RecordType>(props: VirtualTableProps<RecordType>) {
+  const { columns, scroll, prefixCls = DEFAULT_PREFIX, className, listItemHeight } = props;
 
   const { x: scrollX, y: scrollY } = scroll || {};
   let mergedScrollX = scrollX;
@@ -40,9 +41,15 @@ function VirtualTable<RecordType>(props: StaticTableProps<RecordType>) {
     }
   }
 
+  // ========================= Context ==========================
+  const context = React.useMemo(
+    () => ({ scrollX: mergedScrollX, scrollY, listItemHeight }),
+    [mergedScrollX, scrollY, listItemHeight],
+  );
+
   // ========================== Render ==========================
   return (
-    <StaticContext.Provider value={{ scrollX: mergedScrollX, scrollY }}>
+    <StaticContext.Provider value={context}>
       <Table
         {...props}
         className={classNames(className, `${prefixCls}-virtual`)}