fix(Table): fix rowHeight is invalid when virtualized

src/Cell.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import isNil from 'lodash/isNil';
 import get from 'lodash/get';
-import { LAYER_WIDTH } from './constants';
+import { LAYER_WIDTH, ROW_HEADER_HEIGHT, ROW_HEIGHT } from './constants';
 import { useClassNames } from './utils';
 import TableContext from './TableContext';
 import ArrowRight from '@rsuite/icons/ArrowRight';
@@ -73,9 +73,9 @@ const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElem
     classPrefix = 'cell',
     width = 0,
     left = 0,
-    headerHeight = 36,
+    headerHeight = ROW_HEADER_HEIGHT,
     depth = 0,
-    height = 36,
+    height = ROW_HEIGHT,
     style,
     className,
     fullText,

src/Row.tsx

@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { mergeRefs, useClassNames } from './utils';
 import TableContext from './TableContext';
 import { StandardProps } from './@types/common';
+import { ROW_HEADER_HEIGHT, ROW_HEIGHT } from './constants';
 
 export interface RowProps extends StandardProps {
   width?: number;
@@ -16,8 +17,8 @@ export interface RowProps extends StandardProps {
 const Row = React.forwardRef((props: RowProps, ref: React.Ref<HTMLDivElement>) => {
   const {
     classPrefix = 'row',
-    height = 46,
-    headerHeight = 40,
+    height = ROW_HEIGHT,
+    headerHeight = ROW_HEADER_HEIGHT,
     className,
     width,
     top,

src/Table.tsx

@@ -16,7 +16,9 @@ import {
   CELL_PADDING_HEIGHT,
   SORT_TYPE,
   EXPANDED_KEY,
-  TREE_DEPTH
+  TREE_DEPTH,
+  ROW_HEADER_HEIGHT,
+  ROW_HEIGHT
 } from './constants';
 import {
   mergeCells,
@@ -280,9 +282,9 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     },
     showHeader = true,
     sortColumn,
-    rowHeight = 46,
+    rowHeight = ROW_HEIGHT,
     sortType: sortTypeProp,
-    headerHeight: headerHeightProp = 40,
+    headerHeight: headerHeightProp = ROW_HEADER_HEIGHT,
     minHeight = 0,
     height = 200,
     autoHeight,
@@ -834,7 +836,7 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
     for (let i = 0; i < bodyCells.length; i++) {
       const cell = bodyCells[i];
       const rowSpan: number = cell.props?.rowSpan?.(rowData);
-      const dataCellHeight = rowSpan ? rowSpan * (cellHeight || 46) : cellHeight;
+      const dataCellHeight = rowSpan ? rowSpan * (cellHeight || ROW_HEIGHT) : cellHeight;
       const cellKey = cell.props.dataKey || i;
 
       // Record the cell state of the merged row
@@ -1032,7 +1034,8 @@ const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<
             depth: rowData[TREE_DEPTH],
             top: index * nextRowHeight,
             width: rowWidth,
-            height: nextRowHeight
+            height: nextRowHeight,
+            cellHeight: nextRowHeight
           };
           visibleRows.current.push(renderRowData(bodyCells, rowData, rowProps, false));
         }

src/constants.ts

@@ -4,6 +4,8 @@ export const SCROLLBAR_WIDTH = 10;
 export const CELL_PADDING_HEIGHT = 26;
 export const RESIZE_MIN_WIDTH = 20;
 export const SORT_TYPE = { DESC: 'desc', ASC: 'asc' };
+export const ROW_HEIGHT = 46;
+export const ROW_HEADER_HEIGHT = 40;
 
 // transition-duration (ms)
 export const TRANSITION_DURATION = 1000;

src/less/table.less

@@ -13,7 +13,6 @@
   &-row {
     overflow: hidden;
     position: absolute;
-    height: 36px;
     width: 100%;
     top: 0;
     transition: none;

test/CellSpec.js

@@ -11,7 +11,7 @@ describe('Cell', () => {
     const instance = getDOMNode(<Cell>Title</Cell>);
 
     assert.equal(instance.className, 'rs-cell');
-    assert.equal(instance.style.height, '36px');
+    assert.equal(instance.style.height, '46px');
     assert.equal(instance.innerText, Title);
   });
 

test/TableSpec.js

@@ -132,17 +132,6 @@ describe('Table', () => {
     expect(instance).to.have.class('rs-table-bordered');
   });
 
-  it('Should be virtualized. Check: Maximum update depth exceeded', () => {
-    getDOMNode(
-      <Table virtualized data={[{ id: 1, name: 'name' }]}>
-        <Column>
-          <HeaderCell>11</HeaderCell>
-          <Cell dataKey="id" />
-        </Column>
-      </Table>
-    );
-  });
-
   it('Should be bordered for cell', () => {
     const instance = getDOMNode(
       <Table cellBordered>

test/VirtualizedTableSpec.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Table from '../src/Table';
+import Column from '../src/Column';
+import Cell from '../src/Cell';
+import HeaderCell from '../src/HeaderCell';
+
+describe('VirtualizedTable', () => {
+  it('Should be virtualized, and check `maximum update depth exceeded`', () => {
+    expect(() => {
+      render(
+        <Table virtualized data={[{ id: 1 }]}>
+          <Column>
+            <HeaderCell>ID</HeaderCell>
+            <Cell dataKey="id" />
+          </Column>
+        </Table>
+      );
+    }).to.not.throw();
+  });
+
+  // issue: https://github.com/rsuite/rsuite/issues/3226
+  it('Should render correct row height when virtualized', () => {
+    render(
+      <Table virtualized data={[{ id: 1 }]} rowHeight={50} headerHeight={60}>
+        <Column>
+          <HeaderCell>ID</HeaderCell>
+          <Cell dataKey="id" />
+        </Column>
+      </Table>
+    );
+
+    expect(screen.getAllByRole('row')[0]).to.have.style('height', '60px');
+    expect(screen.getAllByRole('row')[1]).to.have.style('height', '50px');
+    expect(screen.getByRole('columnheader')).to.have.style('height', '60px');
+    expect(screen.getByRole('gridcell')).to.have.style('height', '50px');
+  });
+});