diff --git a/README.md b/README.md
index 85d08f2..0b9250b 100644
--- a/README.md
+++ b/README.md
@@ -99,6 +99,7 @@ const App = () => (
 | autoHeight               | boolean                                                            | The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear |
 | bordered                 | boolean                                                            | Show border                                                                                                                         |
 | cellBordered             | boolean                                                            | Show cell border                                                                                                                    |
+| children                 | (components: { Cell, HeaderCell, ColumnGroup }) => React.ReactNode | Render props that receives parameterized Cell, HeaderCell, ColumnGroup components - making typescript usage more convenient         |
 | data \*                  | object[]                                                           | Table data                                                                                                                          |
 | defaultExpandAllRows     | boolean                                                            | Expand all nodes By default                                                                                                         |
 | defaultExpandedRowKeys   | string[]                                                           | Specify the default expanded row by `rowkey`                                                                                        |
@@ -238,3 +239,61 @@ const NameCell = ({ rowData, ...props }) => (
 [coverage]: https://coveralls.io/github/rsuite/rsuite-table
 [actions-svg]: https://github.com/rsuite/rsuite-table/workflows/Node.js%20CI/badge.svg?branch=main
 [actions-home]: https://github.com/rsuite/rsuite-table/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
+
+### Type safety
+
+We can pass generic type parameters to Table, Cell etc. for better type-safety when using typescript.
+
+Passing a render prop to Table is recommended when using TS, as this will ensure that
+the right generic type parameter is automatically propagated to the Cell component.
+
+```ts
+const products: Product[] = [{ name: "Pineapple" }];
+
+<Table<Product, string> ref={table} data={products}>
+  {({ Column, HeaderCell, Cell }) => (
+    <>
+      <Column>
+        <HeaderCell>Name</HeaderCell>
+        {/* No need for passing explicit type parameter to Cell */}
+        <Cell>{row => row.name}</Cell>
+      </Column>
+    </>
+  )}
+</Table>;
+```
+
+In fact, the type parameter from table can be inferred from the data passed to it, so the type parameter to Table can also be skipped.
+
+```ts
+const products: Product[] = [{ name: "Pineapple" }];
+
+<Table data={products}>
+  {({ Column, HeaderCell, Cell }) => (
+    <>
+      <Column>
+        <HeaderCell>Name</HeaderCell>
+        <Cell>{row => row.name}</Cell>
+      </Column>
+    </>
+  )}
+</Table>;
+```
+
+When writing reusable components, it is recommended to make your components generic as well. For example:
+
+```ts
+interface ImageCellProps<TKey extends string, TRow extends Record<TKey, string>> {
+  rowData: TRow,
+  dataKey: TKey,
+  // ... any other props
+}
+
+const ImageCell = <TKey extends string, TRow extends Record<TKey, string>>(
+  { rowData, dataKey, ...rest }: ImageCellProps<TKey, TRow>
+) => (
+  <Cell<TRow, TKey> {...rest}>
+    <img src={rowData[dataKey]} width="50" />
+  </Cell>
+);
+```
diff --git a/docs/examples/Virtualized.md b/docs/examples/Virtualized.md
index 87e339a..ed6c4f1 100644
--- a/docs/examples/Virtualized.md
+++ b/docs/examples/Virtualized.md
@@ -38,52 +38,59 @@ const LargeListsTable = () => {
           console.log(data);
         }}
       >
-        <Column width={70} align="center" fixed>
-          <HeaderCell>Id</HeaderCell>
-          <Cell dataKey="id" />
-        </Column>
-
-        <Column width={80} align="center">
-          <HeaderCell>Avartar</HeaderCell>
-          <ImageCell dataKey="avartar" />
-        </Column>
-
-        <Column width={130} fullText>
-          <HeaderCell>First Name</HeaderCell>
-          <Cell dataKey="firstName" />
-        </Column>
-
-        <Column width={130} fullText>
-          <HeaderCell>Last Name</HeaderCell>
-          <Cell dataKey="lastName" />
-        </Column>
-
-        <Column width={200} fullText>
-          <HeaderCell>City</HeaderCell>
-          <Cell dataKey="city" />
-        </Column>
-
-        <Column width={200} fullText>
-          <HeaderCell>Street</HeaderCell>
-          <Cell dataKey="street" />
-        </Column>
-
-        <Column width={200} fullText>
-          <HeaderCell>Company</HeaderCell>
-          <Cell dataKey="company" />
-        </Column>
-        <Column width={200} fullText>
-          <HeaderCell>phone</HeaderCell>
-          <Cell dataKey="phone" />
-        </Column>
-        <Column width={200} fullText>
-          <HeaderCell>amount</HeaderCell>
-          <Cell dataKey="amount" />
-        </Column>
-        <Column width={200} fullText>
-          <HeaderCell>age</HeaderCell>
-          <Cell dataKey="age" />
-        </Column>
+        {({ Column, HeaderCell, Cell }) => (
+          <>
+            <Column width={70} align="center" fixed>
+              <HeaderCell>Id</HeaderCell>
+              <Cell dataKey="id" />
+            </Column>
+
+            <Column width={80} align="center">
+              <HeaderCell>Avartar</HeaderCell>
+              <ImageCell dataKey="avartar" />
+            </Column>
+
+            <Column width={130} fullText>
+              <HeaderCell>First Name</HeaderCell>
+              <Cell dataKey="firstName" />
+            </Column>
+
+            <Column width={130} fullText>
+              <HeaderCell>Last Name</HeaderCell>
+              <Cell dataKey="lastName" />
+            </Column>
+
+            <Column width={200} fullText>
+              <HeaderCell>City</HeaderCell>
+              <Cell dataKey="city" />
+            </Column>
+
+            <Column width={200} fullText>
+              <HeaderCell>Street</HeaderCell>
+              <Cell dataKey="street" />
+            </Column>
+
+            <Column width={200} fullText>
+              <HeaderCell>Company</HeaderCell>
+              <Cell dataKey="company" />
+            </Column>
+
+            <Column width={200} fullText>
+              <HeaderCell>phone</HeaderCell>
+              <Cell dataKey="phone" />
+            </Column>
+
+            <Column width={200} fullText>
+              <HeaderCell>amount</HeaderCell>
+              <Cell dataKey="amount" />
+            </Column>
+
+            <Column width={200} fullText>
+              <HeaderCell>age</HeaderCell>
+              <Cell dataKey="age" />
+            </Column>
+          </>
+        )}
       </Table>
       <button
         onClick={() => {
diff --git a/package.json b/package.json
index c389ce8..ec3c4ab 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@types/prop-types": "^15.7.1",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/react-is": "^18.2.4",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "autoprefixer": "^8.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 295f5e7..5684d14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,6 +88,9 @@ devDependencies:
   '@types/react-dom':
     specifier: ^18.0.6
     version: 18.0.6
+  '@types/react-is':
+    specifier: ^18.2.4
+    version: 18.2.4
   '@typescript-eslint/eslint-plugin':
     specifier: ^6.9.0
     version: 6.9.0(@typescript-eslint/parser@6.9.0)(eslint@7.32.0)(typescript@5.2.2)
@@ -2243,6 +2246,12 @@ packages:
       '@types/react': 18.0.17
     dev: true
 
+  /@types/react-is@18.2.4:
+    resolution: {integrity: sha512-wBc7HgmbCcrvw0fZjxbgz/xrrlZKzEqmABBMeSvpTvdm25u6KI6xdIi9pRE2G0C1Lw5ETFdcn4UbYZ4/rpqUYw==}
+    dependencies:
+      '@types/react': 18.0.17
+    dev: true
+
   /@types/react-window@1.8.5:
     resolution: {integrity: sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==}
     dependencies:
diff --git a/src/Cell.tsx b/src/Cell.tsx
index 4a4338a..59a05d6 100644
--- a/src/Cell.tsx
+++ b/src/Cell.tsx
@@ -8,10 +8,10 @@ import { useClassNames, convertToFlex } from './utils';
 import TableContext from './TableContext';
 import ArrowRight from '@rsuite/icons/ArrowRight';
 import ArrowDown from '@rsuite/icons/ArrowDown';
-import { StandardProps, RowDataType } from './@types/common';
+import { StandardProps, RowDataType, RowKeyType } from './@types/common';
 import { columnHandledProps } from './Column';
 
-export interface CellProps extends StandardProps {
+export interface CellProps<Row extends RowDataType> extends StandardProps {
   /** Data binding key, but also a sort of key */
   dataKey?: string;
 
@@ -19,15 +19,16 @@ export interface CellProps extends StandardProps {
   rowIndex?: number;
 
   /** Row Data */
-  rowData?: any;
+  rowData?: Row;
 }
 
-export interface InnerCellProps extends Omit<CellProps, 'children'> {
+export interface InnerCellProps<Row extends RowDataType, Key extends RowKeyType>
+  extends Omit<CellProps<Row>, 'children'> {
   align?: React.CSSProperties['justifyContent'];
   verticalAlign?: React.CSSProperties['alignItems'] | 'top' | 'middle' | 'bottom';
   isHeaderCell?: boolean;
   width?: number;
-  height?: number | ((rowData: RowDataType) => number);
+  height?: number | ((rowData: Row) => number);
   left?: number;
   headerHeight?: number;
   style?: React.CSSProperties;
@@ -35,8 +36,8 @@ export interface InnerCellProps extends Omit<CellProps, 'children'> {
   firstColumn?: boolean;
   lastColumn?: boolean;
   hasChildren?: boolean;
-  children?: React.ReactNode | ((rowData: RowDataType, rowIndex?: number) => React.ReactNode);
-  rowKey?: string | number;
+  children?: React.ReactNode | ((rowData: Row, rowIndex?: number) => React.ReactNode);
+  rowKey?: Key;
   rowSpan?: number;
   depth?: number;
   wordWrap?: boolean | 'break-all' | 'break-word' | 'keep-all';
@@ -44,16 +45,11 @@ export interface InnerCellProps extends Omit<CellProps, 'children'> {
   treeCol?: boolean;
   expanded?: boolean;
   predefinedStyle?: React.CSSProperties;
-  onTreeToggle?: (
-    rowKey?: string | number,
-    rowIndex?: number,
-    rowData?: RowDataType,
-    event?: React.MouseEvent
-  ) => void;
+  onTreeToggle?: (rowKey?: Key, rowIndex?: number, rowData?: Row, event?: React.MouseEvent) => void;
 
   renderTreeToggle?: (
     expandButton: React.ReactNode,
-    rowData?: RowDataType,
+    rowData?: Row,
     expanded?: boolean
   ) => React.ReactNode;
   renderCell?: (contentChildren: any) => React.ReactNode;
@@ -68,151 +64,168 @@ const groupKeys = [
   'renderSortIcon'
 ];
 
-const Cell = React.forwardRef((props: InnerCellProps, ref: React.Ref<HTMLDivElement>) => {
-  const {
-    classPrefix = 'cell',
-    width = 0,
-    left = 0,
-    headerHeight = ROW_HEADER_HEIGHT,
-    depth = 0,
-    height = ROW_HEIGHT,
-    style,
-    className,
-    fullText,
-    firstColumn,
-    lastColumn,
-    isHeaderCell,
-    align,
-    children,
-    rowData,
-    dataKey,
-    rowIndex,
-    removed,
-    rowKey,
-    rowSpan,
-    wordWrap,
-    verticalAlign,
-    expanded,
-    treeCol,
-    hasChildren,
-    predefinedStyle,
-    renderCell,
-    renderTreeToggle,
-    onClick,
-    onTreeToggle,
-    ...rest
-  } = props;
-
-  const { rtl, hasCustomTreeCol, isTree } = React.useContext(TableContext);
-
-  const isTreeCol = treeCol || (!hasCustomTreeCol && firstColumn && isTree);
-  const cellHeight = typeof height === 'function' ? height(rowData) : height;
-
-  if (isTreeCol && !isHeaderCell && !rowData) {
-    throw new Error('[Table.Cell]: `rowData` is required for tree column');
-  }
+const Cell = React.forwardRef(
+  <Row extends RowDataType, Key extends RowKeyType>(
+    props: InnerCellProps<Row, Key>,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const {
+      classPrefix = 'cell',
+      width = 0,
+      left = 0,
+      headerHeight = ROW_HEADER_HEIGHT,
+      depth = 0,
+      height = ROW_HEIGHT,
+      style,
+      className,
+      fullText,
+      firstColumn,
+      lastColumn,
+      isHeaderCell,
+      align,
+      children,
+      rowData,
+      dataKey,
+      rowIndex,
+      removed,
+      rowKey,
+      rowSpan,
+      wordWrap,
+      verticalAlign,
+      expanded,
+      treeCol,
+      hasChildren,
+      predefinedStyle,
+      renderCell,
+      renderTreeToggle,
+      onClick,
+      onTreeToggle,
+      ...rest
+    } = props;
 
-  const handleTreeToggle = useCallback(
-    (event: React.MouseEvent) => {
-      onTreeToggle?.(rowKey, rowIndex, rowData, event);
-    },
-    [onTreeToggle, rowData, rowIndex, rowKey]
-  );
-
-  const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
-  const classes = merge(
-    className,
-    withClassPrefix({
-      expanded: expanded && isTreeCol,
-      first: firstColumn,
-      last: lastColumn,
-      rowspan: rowSpan && !isHeaderCell,
-      'full-text': fullText
-    })
-  );
-
-  const nextHeight = isHeaderCell ? headerHeight : cellHeight;
-  const styles = {
-    ...predefinedStyle,
-    [fullText ? 'minWidth' : 'width']: width,
-    height: nextHeight,
-    zIndex: depth,
-    [rtl ? 'right' : 'left']: left
-  };
-
-  const paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
-  const contentStyles: React.CSSProperties = {
-    ...convertToFlex({ align, verticalAlign }),
-    ...style,
-    width: fullText ? width - 1 : width,
-    height: nextHeight,
-    [paddingKey]: isTreeCol ? depth * LAYER_WIDTH + 10 : style?.[paddingKey] || style?.padding
-  };
-
-  if (wordWrap) {
-    contentStyles.wordBreak = typeof wordWrap === 'boolean' ? 'break-all' : wordWrap;
-    contentStyles.overflowWrap = wordWrap === 'break-word' ? wordWrap : undefined;
-  }
+    const { rtl, hasCustomTreeCol, isTree } = React.useContext(TableContext);
 
-  let cellContent = isNil(children) && rowData && dataKey ? get(rowData, dataKey) : children;
+    const isTreeCol = treeCol || (!hasCustomTreeCol && firstColumn && isTree);
+    const cellHeight =
+      typeof height === 'function' ? (rowData ? height(rowData) : ROW_HEIGHT) : height;
 
-  if (typeof children === 'function') {
-    cellContent = children(rowData, rowIndex);
-  }
+    if (isTreeCol && !isHeaderCell && !rowData) {
+      throw new Error('[Table.Cell]: `rowData` is required for tree column');
+    }
+
+    const handleTreeToggle = useCallback(
+      (event: React.MouseEvent) => {
+        onTreeToggle?.(rowKey, rowIndex, rowData, event);
+      },
+      [onTreeToggle, rowData, rowIndex, rowKey]
+    );
 
-  const renderTreeNodeExpandIcon = () => {
-    const ExpandIconComponent = expanded ? ArrowDown : ArrowRight;
-    const expandButton = <ExpandIconComponent className={prefix('expand-icon')} />;
-
-    if (isTreeCol && hasChildren) {
-      return (
-        <span
-          role="button"
-          tabIndex={-1}
-          className={prefix('expand-wrapper')}
-          onClick={handleTreeToggle}
-        >
-          {renderTreeToggle ? renderTreeToggle(expandButton, rowData, expanded) : expandButton}
-        </span>
-      );
+    const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
+    const classes = merge(
+      className,
+      withClassPrefix({
+        expanded: expanded && isTreeCol,
+        first: firstColumn,
+        last: lastColumn,
+        rowspan: rowSpan && !isHeaderCell,
+        'full-text': fullText
+      })
+    );
+
+    const nextHeight = isHeaderCell ? headerHeight : cellHeight;
+    const styles = {
+      ...predefinedStyle,
+      [fullText ? 'minWidth' : 'width']: width,
+      height: nextHeight,
+      zIndex: depth,
+      [rtl ? 'right' : 'left']: left
+    };
+
+    const paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
+    const contentStyles: React.CSSProperties = {
+      ...convertToFlex({ align, verticalAlign }),
+      ...style,
+      width: fullText ? width - 1 : width,
+      height: nextHeight,
+      [paddingKey]: isTreeCol ? depth * LAYER_WIDTH + 10 : style?.[paddingKey] || style?.padding
+    };
+
+    if (wordWrap) {
+      contentStyles.wordBreak = typeof wordWrap === 'boolean' ? 'break-all' : wordWrap;
+      contentStyles.overflowWrap = wordWrap === 'break-word' ? wordWrap : undefined;
     }
 
-    return null;
-  };
-
-  const content = wordWrap ? (
-    <div className={prefix('wrap')}>
-      {renderTreeNodeExpandIcon()}
-      {renderCell ? renderCell(cellContent) : cellContent}
-    </div>
-  ) : (
-    <>
-      {renderTreeNodeExpandIcon()}
-      {renderCell ? renderCell(cellContent) : cellContent}
-    </>
-  );
-
-  if (removed) {
-    return null;
-  }
+    let cellContent: React.ReactNode = null;
+
+    if (typeof children === 'function') {
+      if (!rowData) {
+        cellContent = null;
+      } else {
+        cellContent = children(rowData, rowIndex);
+      }
+    } else if (isNil(children)) {
+      if (rowData && dataKey) {
+        cellContent = get(rowData, dataKey);
+      }
+    } else {
+      cellContent = children;
+    }
+
+    const renderTreeNodeExpandIcon = () => {
+      const ExpandIconComponent = expanded ? ArrowDown : ArrowRight;
+      const expandButton = <ExpandIconComponent className={prefix('expand-icon')} />;
+
+      if (isTreeCol && hasChildren) {
+        return (
+          <span
+            role="button"
+            tabIndex={-1}
+            className={prefix('expand-wrapper')}
+            onClick={handleTreeToggle}
+          >
+            {renderTreeToggle ? renderTreeToggle(expandButton, rowData, expanded) : expandButton}
+          </span>
+        );
+      }
+
+      return null;
+    };
+
+    const content = wordWrap ? (
+      <div className={prefix('wrap')}>
+        {renderTreeNodeExpandIcon()}
+        {renderCell ? renderCell(cellContent) : cellContent}
+      </div>
+    ) : (
+      <>
+        {renderTreeNodeExpandIcon()}
+        {renderCell ? renderCell(cellContent) : cellContent}
+      </>
+    );
+
+    if (removed) {
+      return null;
+    }
 
-  return (
-    <div
-      ref={ref}
-      role={isHeaderCell ? 'columnheader' : 'gridcell'}
-      {...omit(rest, [...groupKeys, ...columnHandledProps])}
-      onClick={onClick}
-      className={classes}
-      style={styles}
-    >
-      <div className={prefix('content')} style={contentStyles}>
-        {content}
+    return (
+      <div
+        ref={ref}
+        role={isHeaderCell ? 'columnheader' : 'gridcell'}
+        {...omit(rest, [...groupKeys, ...columnHandledProps])}
+        onClick={onClick}
+        className={classes}
+        style={styles}
+      >
+        <div className={prefix('content')} style={contentStyles}>
+          {content}
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 Cell.displayName = 'Table.Cell';
+
 Cell.propTypes = {
   align: PropTypes.string,
   verticalAlign: PropTypes.string,
@@ -243,4 +256,6 @@ Cell.propTypes = {
   fullText: PropTypes.bool
 };
 
-export default Cell;
+export default Cell as <Row extends RowDataType, Key extends RowKeyType>(
+  props: InnerCellProps<Row, Key> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement;
diff --git a/src/Column.tsx b/src/Column.tsx
index 883726c..e4eddb9 100644
--- a/src/Column.tsx
+++ b/src/Column.tsx
@@ -1,6 +1,8 @@
+import React from 'react';
 import PropTypes from 'prop-types';
+import { RowDataType } from './@types/common';
 
-export interface ColumnProps {
+export interface ColumnProps<Row extends RowDataType> {
   /** Alignment */
   align?: React.CSSProperties['justifyContent'];
 
@@ -8,7 +10,7 @@ export interface ColumnProps {
   colSpan?: number;
 
   /** Merges rows on the specified column. */
-  rowSpan?: (rowData: any) => number;
+  rowSpan?: (rowData: Row) => number;
 
   /** Fixed column */
   fixed?: boolean | 'left' | 'right';
@@ -45,8 +47,8 @@ export interface ColumnProps {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function Column(_props: ColumnProps) {
-  return null;
+function Column<Row extends RowDataType>(_props: ColumnProps<Row>) {
+  return <></>;
 }
 
 const propTypes = {
@@ -67,6 +69,7 @@ const propTypes = {
 };
 
 Column.displayName = 'Table.Column';
+
 Column.defaultProps = {
   width: 100
 };
diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx
index da3e655..a1708b8 100644
--- a/src/HeaderCell.tsx
+++ b/src/HeaderCell.tsx
@@ -8,8 +8,10 @@ import SortDown from '@rsuite/icons/SortDown';
 import ColumnResizeHandler, { FixedType } from './ColumnResizeHandler';
 import { useUpdateEffect, useClassNames } from './utils';
 import Cell, { InnerCellProps } from './Cell';
+import { RowDataType, RowKeyType } from './@types/common';
 
-export interface HeaderCellProps extends Omit<InnerCellProps, 'onResize'> {
+export interface HeaderCellProps<Row extends RowDataType, Key extends RowKeyType>
+  extends Omit<InnerCellProps<Row, Key>, 'onResize'> {
   index?: number;
   minWidth?: number;
   sortColumn?: string;
@@ -38,126 +40,131 @@ const SORTED_ICON = {
   asc: SortUp
 };
 
-const HeaderCell = React.forwardRef((props: HeaderCellProps, ref: React.Ref<HTMLDivElement>) => {
-  const {
-    className,
-    classPrefix = 'cell-header',
-    width,
-    dataKey,
-    headerHeight,
-    children,
-    left,
-    sortable,
-    sortColumn,
-    sortType,
-    groupHeader,
-    resizable,
-    fixed,
-    minWidth,
-    index,
-    flexGrow,
-    align,
-    verticalAlign,
-    onColumnResizeEnd,
-    onResize,
-    onColumnResizeStart,
-    onColumnResizeMove,
-    onSortColumn,
-    renderSortIcon,
-    ...rest
-  } = props;
-
-  const [columnWidth, setColumnWidth] = useState(isNil(flexGrow) ? width : 0);
-
-  useUpdateEffect(() => {
-    setColumnWidth(isNil(flexGrow) ? width : 0);
-  }, [flexGrow, width]);
-
-  const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
-  const classes = merge(className, withClassPrefix({ sortable }));
-
-  let ariaSort;
-
-  if (sortColumn === dataKey) {
-    ariaSort = 'other';
-    if (sortType === 'asc') {
-      ariaSort = 'ascending';
-    } else if (sortType === 'desc') {
-      ariaSort = 'descending';
+const HeaderCell = React.forwardRef(
+  <Row extends RowDataType, Key extends RowKeyType>(
+    props: HeaderCellProps<Row, Key>,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const {
+      className,
+      classPrefix = 'cell-header',
+      width,
+      dataKey,
+      headerHeight,
+      children,
+      left,
+      sortable,
+      sortColumn,
+      sortType,
+      groupHeader,
+      resizable,
+      fixed,
+      minWidth,
+      index,
+      flexGrow,
+      align,
+      verticalAlign,
+      onColumnResizeEnd,
+      onResize,
+      onColumnResizeStart,
+      onColumnResizeMove,
+      onSortColumn,
+      renderSortIcon,
+      ...rest
+    } = props;
+
+    const [columnWidth, setColumnWidth] = useState(isNil(flexGrow) ? width : 0);
+
+    useUpdateEffect(() => {
+      setColumnWidth(isNil(flexGrow) ? width : 0);
+    }, [flexGrow, width]);
+
+    const { withClassPrefix, merge, prefix } = useClassNames(classPrefix);
+    const classes = merge(className, withClassPrefix({ sortable }));
+
+    let ariaSort;
+
+    if (sortColumn === dataKey) {
+      ariaSort = 'other';
+      if (sortType === 'asc') {
+        ariaSort = 'ascending';
+      } else if (sortType === 'desc') {
+        ariaSort = 'descending';
+      }
     }
-  }
 
-  const handleClick = useCallback(() => {
-    if (sortable) {
-      onSortColumn?.(dataKey);
-    }
-  }, [dataKey, onSortColumn, sortable]);
-
-  const handleColumnResizeStart = useCallback(() => {
-    onColumnResizeStart?.(columnWidth, left, !!fixed);
-  }, [columnWidth, fixed, left, onColumnResizeStart]);
-
-  const handleColumnResizeEnd = useCallback(
-    (nextColumnWidth?: number, cursorDelta?: number) => {
-      setColumnWidth(nextColumnWidth);
-      onColumnResizeEnd?.(nextColumnWidth, cursorDelta, dataKey, index);
-      onResize?.(nextColumnWidth, dataKey);
-    },
-    [dataKey, index, onColumnResizeEnd, onResize]
-  );
-
-  const renderSortColumn = () => {
-    if (sortable && !groupHeader) {
-      const SortIcon = sortColumn === dataKey && sortType ? SORTED_ICON[sortType] : Sort;
-      const iconClasses = classNames(prefix('icon-sort'), {
-        [prefix(`icon-sort-${sortType}`)]: sortColumn === dataKey
-      });
-
-      const sortIcon = renderSortIcon ? (
-        renderSortIcon(sortColumn === dataKey ? sortType : undefined)
-      ) : (
-        <SortIcon className={iconClasses} />
-      );
-
-      return <span className={prefix('sort-wrapper')}>{sortIcon}</span>;
-    }
-    return null;
-  };
-
-  return (
-    <div ref={ref} className={classes}>
-      <Cell
-        aria-sort={ariaSort}
-        {...rest}
-        width={width}
-        dataKey={dataKey}
-        left={left}
-        headerHeight={headerHeight}
-        isHeaderCell={true}
-        align={!groupHeader ? align : undefined}
-        verticalAlign={!groupHeader ? verticalAlign : undefined}
-        onClick={!groupHeader ? handleClick : undefined}
-      >
-        {children}
-        {renderSortColumn()}
-      </Cell>
-
-      {resizable ? (
-        <ColumnResizeHandler
-          defaultColumnWidth={columnWidth}
-          key={columnWidth}
-          columnLeft={left}
-          columnFixed={fixed}
-          height={headerHeight ? headerHeight - 1 : undefined}
-          minWidth={minWidth}
-          onColumnResizeMove={onColumnResizeMove}
-          onColumnResizeStart={handleColumnResizeStart}
-          onColumnResizeEnd={handleColumnResizeEnd}
-        />
-      ) : null}
-    </div>
-  );
-});
+    const handleClick = useCallback(() => {
+      if (sortable) {
+        onSortColumn?.(dataKey);
+      }
+    }, [dataKey, onSortColumn, sortable]);
+
+    const handleColumnResizeStart = useCallback(() => {
+      onColumnResizeStart?.(columnWidth, left, !!fixed);
+    }, [columnWidth, fixed, left, onColumnResizeStart]);
+
+    const handleColumnResizeEnd = useCallback(
+      (nextColumnWidth?: number, cursorDelta?: number) => {
+        setColumnWidth(nextColumnWidth);
+        onColumnResizeEnd?.(nextColumnWidth, cursorDelta, dataKey, index);
+        onResize?.(nextColumnWidth, dataKey);
+      },
+      [dataKey, index, onColumnResizeEnd, onResize]
+    );
+
+    const renderSortColumn = () => {
+      if (sortable && !groupHeader) {
+        const SortIcon = sortColumn === dataKey && sortType ? SORTED_ICON[sortType] : Sort;
+        const iconClasses = classNames(prefix('icon-sort'), {
+          [prefix(`icon-sort-${sortType}`)]: sortColumn === dataKey
+        });
+
+        const sortIcon = renderSortIcon ? (
+          renderSortIcon(sortColumn === dataKey ? sortType : undefined)
+        ) : (
+          <SortIcon className={iconClasses} />
+        );
+
+        return <span className={prefix('sort-wrapper')}>{sortIcon}</span>;
+      }
+      return null;
+    };
+
+    return (
+      <div ref={ref} className={classes}>
+        <Cell
+          aria-sort={ariaSort}
+          {...rest}
+          width={width}
+          dataKey={dataKey}
+          left={left}
+          headerHeight={headerHeight}
+          isHeaderCell={true}
+          align={!groupHeader ? align : undefined}
+          verticalAlign={!groupHeader ? verticalAlign : undefined}
+          onClick={!groupHeader ? handleClick : undefined}
+        >
+          {children}
+          {renderSortColumn()}
+        </Cell>
+
+        {resizable ? (
+          <ColumnResizeHandler
+            defaultColumnWidth={columnWidth}
+            key={columnWidth}
+            columnLeft={left}
+            columnFixed={fixed}
+            height={headerHeight ? headerHeight - 1 : undefined}
+            minWidth={minWidth}
+            onColumnResizeMove={onColumnResizeMove}
+            onColumnResizeStart={handleColumnResizeStart}
+            onColumnResizeEnd={handleColumnResizeEnd}
+          />
+        ) : null}
+      </div>
+    );
+  }
+);
 
 HeaderCell.displayName = 'HeaderCell';
 HeaderCell.propTypes = {
@@ -178,4 +185,6 @@ HeaderCell.propTypes = {
   renderSortIcon: PropTypes.func
 };
 
-export default HeaderCell;
+export default HeaderCell as <Row extends RowDataType, Key extends RowKeyType>(
+  props: HeaderCellProps<Row, Key> & React.RefAttributes<HTMLDivElement>
+) => React.ReactElement;
diff --git a/src/Table.tsx b/src/Table.tsx
index 287adca..58624f8 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -1,8 +1,15 @@
-import React, { useState, useRef, useCallback, useImperativeHandle, useReducer } from 'react';
+import React, {
+  useState,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  useReducer,
+  useMemo
+} from 'react';
+import * as ReactIs from 'react-is';
 import { getTranslateDOMPositionXY } from 'dom-lib/translateDOMPositionXY';
 import PropTypes from 'prop-types';
 import isFunction from 'lodash/isFunction';
-import flatten from 'lodash/flatten';
 import debounce from 'lodash/debounce';
 import Row, { RowProps } from './Row';
 import CellGroup from './CellGroup';
@@ -11,6 +18,9 @@ import MouseArea from './MouseArea';
 import Loader from './Loader';
 import EmptyMessage from './EmptyMessage';
 import TableContext from './TableContext';
+import Cell, { InnerCellProps } from './Cell';
+import HeaderCell, { HeaderCellProps } from './HeaderCell';
+import Column, { ColumnProps } from './Column';
 import {
   SCROLLBAR_WIDTH,
   CELL_PADDING_HEIGHT,
@@ -48,6 +58,7 @@ import type {
   TableSizeChangeEventName,
   RowDataType
 } from './@types/common';
+import { flattenChildren } from './utils/children';
 /**
  * Filter those expanded nodes.
  * @param data
@@ -75,7 +86,8 @@ const filterTreeData = <Row extends RowDataType, Key>(
   });
 };
 
-export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
+export interface TableProps<Row extends RowDataType, Key extends RowKeyType>
+  extends Omit<StandardProps, 'onScroll' | 'children'> {
   /**
    * The height of the table will be automatically expanded according to the number of data rows,
    * and no vertical scroll bar will appear
@@ -246,6 +258,19 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
    * @deprecated use `ref` instead (see `ref.current.body`)
    **/
   bodyRef?: (ref: HTMLElement) => void;
+
+  children?:
+    | React.ReactNode
+    | React.ReactNode[]
+    | ((props: {
+        Cell: (
+          props: InnerCellProps<Row, Key> & React.RefAttributes<HTMLDivElement>
+        ) => React.ReactElement;
+        Column: (props: ColumnProps<Row>) => React.ReactElement;
+        HeaderCell: (
+          props: HeaderCellProps<Row, Key> & React.RefAttributes<HTMLDivElement>
+        ) => React.ReactElement;
+      }) => React.ReactNode | React.ReactNode[]);
 }
 
 interface TableRowProps extends RowProps {
@@ -256,902 +281,919 @@ interface TableRowProps extends RowProps {
 
 const DATA_PLACEHOLDER = [];
 
-const Table = React.forwardRef(<Row extends RowDataType, Key>(props: TableProps<Row, Key>, ref) => {
-  const {
-    affixHeader,
-    children,
-    classPrefix = 'rs-table',
-    className,
-    data: dataProp = DATA_PLACEHOLDER,
-    defaultSortType = SORT_TYPE.DESC as SortType,
-    width: widthProp,
-    expandedRowKeys: expandedRowKeysProp,
-    defaultExpandAllRows,
-    defaultExpandedRowKeys,
-    style,
-    id,
-    isTree,
-    hover = true,
-    bordered,
-    cellBordered,
-    wordWrap,
-    loading,
-    locale = {
-      emptyMessage: 'No data found',
-      loading: 'Loading...'
-    },
-    showHeader = true,
-    sortColumn,
-    rowHeight = ROW_HEIGHT,
-    sortType: sortTypeProp,
-    headerHeight: headerHeightProp = ROW_HEADER_HEIGHT,
-    minHeight = 0,
-    height = 200,
-    autoHeight,
-    fillHeight,
-    rtl: rtlProp,
-    translate3d,
-    rowKey,
-    virtualized,
-    rowClassName,
-    rowExpandedHeight = 100,
-    disabledScroll,
-    affixHorizontalScrollbar,
-    loadAnimation,
-    shouldUpdateScroll = true,
-    renderRow: renderRowProp,
-    renderRowExpanded: renderRowExpandedProp,
-    renderLoading,
-    renderEmpty,
-    onSortColumn,
-    onScroll,
-    renderTreeToggle,
-    onRowClick,
-    onRowContextMenu,
-    onExpandChange,
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd,
-    ...rest
-  } = props;
-
-  const {
-    withClassPrefix,
-    merge: mergeCls,
-    prefix
-  } = useClassNames(classPrefix, typeof classPrefix !== 'undefined');
-
-  // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
-  const [, forceUpdate] = useReducer(x => x + 1, 0);
-
-  const [expandedRowKeys, setExpandedRowKeys] = useControlled(
-    expandedRowKeysProp,
-    defaultExpandAllRows
-      ? findRowKeys(dataProp, rowKey, isFunction(renderRowExpandedProp))
-      : defaultExpandedRowKeys || []
-  );
-
-  const [data, setData] = useState(() => {
-    return isTree ? filterTreeData(dataProp, expandedRowKeys, rowKey) : dataProp;
-  });
-
-  if (isTree) {
-    if (!rowKey) {
-      throw new Error('The `rowKey` is required when set isTree');
-    } else if (data.length > 0) {
-      if (!data[0].hasOwnProperty(rowKey)) {
-        throw new Error('The `rowKey` is not found in data');
-      }
-    }
-  }
+const getChildrenProps = {
+  Cell,
+  HeaderCell,
+  Column
+};
 
-  const { tableRowsMaxHeight, bindTableRowsRef } = useTableRows({
-    data: dataProp,
-    expandedRowKeys,
-    wordWrap,
-    prefix
-  });
+const Table = React.forwardRef(
+  <Row extends RowDataType, Key extends RowKeyType>(props: TableProps<Row, Key>, ref) => {
+    const {
+      affixHeader,
+      children: getChildren,
+      classPrefix = 'rs-table',
+      className,
+      data: dataProp = DATA_PLACEHOLDER,
+      defaultSortType = SORT_TYPE.DESC as SortType,
+      width: widthProp,
+      expandedRowKeys: expandedRowKeysProp,
+      defaultExpandAllRows,
+      defaultExpandedRowKeys,
+      style,
+      id,
+      isTree,
+      hover = true,
+      bordered,
+      cellBordered,
+      wordWrap,
+      loading,
+      locale = {
+        emptyMessage: 'No data found',
+        loading: 'Loading...'
+      },
+      showHeader = true,
+      sortColumn,
+      rowHeight = ROW_HEIGHT,
+      sortType: sortTypeProp,
+      headerHeight: headerHeightProp = ROW_HEADER_HEIGHT,
+      minHeight = 0,
+      height = 200,
+      autoHeight,
+      fillHeight,
+      rtl: rtlProp,
+      translate3d,
+      rowKey,
+      virtualized,
+      rowClassName,
+      rowExpandedHeight = 100,
+      disabledScroll,
+      affixHorizontalScrollbar,
+      loadAnimation,
+      shouldUpdateScroll = true,
+      renderRow: renderRowProp,
+      renderRowExpanded: renderRowExpandedProp,
+      renderLoading,
+      renderEmpty,
+      onSortColumn,
+      onScroll,
+      renderTreeToggle,
+      onRowClick,
+      onRowContextMenu,
+      onExpandChange,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      ...rest
+    } = props;
+
+    const children = useMemo(
+      () => flattenChildren(isFunction(getChildren) ? getChildren(getChildrenProps) : getChildren),
+      [getChildren]
+    );
 
-  const headerHeight = showHeader ? headerHeightProp : 0;
-  const rtl = rtlProp || isRTL();
-
-  const getRowHeight = () => {
-    return typeof rowHeight === 'function' ? rowHeight() : rowHeight;
-  };
-
-  const translateDOMPositionXY = useRef(
-    getTranslateDOMPositionXY({ forceUseTransform: true, enable3DTransform: translate3d })
-  );
-
-  // Check for the existence of fixed columns in all column properties.
-  const shouldFixedColumn = Array.from(flatten(children as any) as Iterable<any>).some(
-    child => child?.props?.fixed
-  );
-
-  // Check all column properties for the existence of rowSpan.
-  const shouldRowSpanColumn = Array.from(flatten(children as any) as Iterable<any>).some(
-    child => child?.props?.rowSpan
-  );
-
-  const visibleRows = useRef<React.ReactNode[]>([]);
-  const mouseAreaRef = useRef<HTMLDivElement>(null);
-  const tableRef = useRef<HTMLDivElement>(null);
-  const tableHeaderRef = useRef<HTMLDivElement>(null);
-  const affixHeaderWrapperRef = useRef<HTMLDivElement>(null);
-  const headerWrapperRef = useRef<HTMLDivElement>(null);
-  const tableBodyRef = useRef<HTMLDivElement>(null);
-  const wheelWrapperRef = useRef<HTMLDivElement>(null);
-  const scrollbarXRef = useRef<ScrollbarInstance>(null);
-  const scrollbarYRef = useRef<ScrollbarInstance>(null);
-
-  const handleTableResizeChange = (_prevSize, event: TableSizeChangeEventName) => {
-    forceUpdate();
+    const {
+      withClassPrefix,
+      merge: mergeCls,
+      prefix
+    } = useClassNames(classPrefix, typeof classPrefix !== 'undefined');
 
-    /**
-     * Reset the position of the scroll bar after the table size changes.
-     */
-    if (typeof shouldUpdateScroll === 'function') {
-      onScrollTo(shouldUpdateScroll(event));
-    } else if (shouldUpdateScroll) {
-      const vertical = event === 'bodyHeightChanged';
-      vertical ? onScrollTop(0) : onScrollLeft(0);
-    }
+    // Use `forceUpdate` to force the component to re-render after manipulating the DOM.
+    const [, forceUpdate] = useReducer(x => x + 1, 0);
 
-    if (event === 'bodyWidthChanged') {
-      deferUpdatePosition();
-    }
-  };
-
-  const {
-    contentHeight,
-    contentWidth,
-    minScrollY,
-    minScrollX,
-    scrollY,
-    scrollX,
-    tableWidth,
-    tableOffset,
-    headerOffset,
-    setScrollY,
-    setScrollX,
-    getTableHeight
-  } = useTableDimension({
-    // The data should be flattened,
-    // otherwise the array length required to calculate the scroll height in the TreeTable is not real.
-    data,
-    width: widthProp,
-    rowHeight,
-    tableRef,
-    headerWrapperRef,
-    prefix,
-    affixHeader,
-    affixHorizontalScrollbar,
-    headerHeight,
-    height,
-    minHeight,
-    autoHeight,
-    fillHeight,
-    children,
-    expandedRowKeys,
-    showHeader,
-    bordered,
-    onTableScroll: debounce((coords: { x?: number; y?: number }) => onScrollTo(coords), 100),
-    onTableResizeChange: handleTableResizeChange
-  });
+    const [expandedRowKeys, setExpandedRowKeys] = useControlled(
+      expandedRowKeysProp,
+      defaultExpandAllRows
+        ? findRowKeys(dataProp, rowKey, isFunction(renderRowExpandedProp))
+        : defaultExpandedRowKeys || []
+    );
 
-  useAffix({
-    getTableHeight,
-    contentHeight,
-    affixHorizontalScrollbar,
-    affixHeader,
-    tableOffset,
-    headerOffset,
-    headerHeight,
-    scrollbarXRef,
-    affixHeaderWrapperRef
-  });
+    const [data, setData] = useState(() => {
+      return isTree ? filterTreeData(dataProp, expandedRowKeys, rowKey) : dataProp;
+    });
 
-  const { forceUpdatePosition, deferUpdatePosition } = usePosition({
-    data: dataProp,
-    height,
-    tableWidth,
-    tableRef,
-    prefix,
-    translateDOMPositionXY,
-    wheelWrapperRef,
-    headerWrapperRef,
-    affixHeaderWrapperRef,
-    tableHeaderRef,
-    scrollX,
-    scrollY,
-    contentWidth,
-    shouldFixedColumn
-  });
+    if (isTree) {
+      if (!rowKey) {
+        throw new Error('The `rowKey` is required when set isTree');
+      } else if (data.length > 0) {
+        if (!data[0].hasOwnProperty(rowKey)) {
+          throw new Error('The `rowKey` is not found in data');
+        }
+      }
+    }
 
-  const {
-    isScrolling,
-    onScrollHorizontal,
-    onScrollVertical,
-    onScrollBody,
-    onScrollTop,
-    onScrollLeft,
-    onScrollTo,
-    onScrollByKeydown
-  } = useScrollListener({
-    rtl,
-    data: dataProp,
-    height,
-    virtualized,
-    getTableHeight,
-    contentHeight,
-    headerHeight,
-    autoHeight,
-    tableBodyRef,
-    scrollbarXRef,
-    scrollbarYRef,
-    disabledScroll,
-    loading,
-    tableRef,
-    contentWidth,
-    tableWidth,
-    scrollY,
-    minScrollY,
-    minScrollX,
-    scrollX,
-    setScrollX,
-    setScrollY,
-    forceUpdatePosition,
-    deferUpdatePosition,
-    onScroll,
-    onTouchStart,
-    onTouchMove,
-    onTouchEnd
-  });
+    const { tableRowsMaxHeight, bindTableRowsRef } = useTableRows({
+      data: dataProp,
+      expandedRowKeys,
+      wordWrap,
+      prefix
+    });
 
-  const { headerCells, bodyCells, allColumnsWidth, hasCustomTreeCol } = useCellDescriptor({
-    children,
-    rtl,
-    mouseAreaRef,
-    tableRef,
-    minScrollX,
-    scrollX,
-    tableWidth,
-    headerHeight,
-    showHeader,
-    sortType: sortTypeProp,
-    defaultSortType,
-    sortColumn,
-    prefix,
-    onSortColumn,
-
-    // Force table update after column width change, so scrollbar re-renders.
-    onHeaderCellResize: forceUpdate,
-    rowHeight
-  });
+    const headerHeight = showHeader ? headerHeightProp : 0;
+    const rtl = rtlProp || isRTL();
 
-  const colCounts = useRef(headerCells?.length || 0);
+    const getRowHeight = () => {
+      return typeof rowHeight === 'function' ? rowHeight() : rowHeight;
+    };
 
-  useUpdateEffect(() => {
-    setData(isTree ? filterTreeData(dataProp, expandedRowKeys, rowKey) : dataProp);
-  }, [dataProp, expandedRowKeys, rowKey, isTree]);
+    const translateDOMPositionXY = useRef(
+      getTranslateDOMPositionXY({ forceUseTransform: true, enable3DTransform: translate3d })
+    );
 
-  useUpdateEffect(() => {
-    if (headerCells?.length !== colCounts.current) {
-      onScrollLeft(0);
-      colCounts.current = headerCells?.length || 0;
-    }
-  }, [children]);
-
-  useImperativeHandle(ref, () => ({
-    get root() {
-      return tableRef.current;
-    },
-    get body() {
-      return wheelWrapperRef.current;
-    },
-
-    // The scroll position of the table
-    get scrollPosition() {
-      return {
-        top: Math.abs(scrollY.current),
-        left: Math.abs(scrollX.current)
-      };
-    },
-    scrollTop: onScrollTop,
-    scrollLeft: onScrollLeft
-  }));
+    // Check for the existence of fixed columns in all column properties.
+    const shouldFixedColumn = children.some(
+      child => ReactIs.isElement(child) && child?.props?.fixed
+    );
 
-  const rowWidth = allColumnsWidth > tableWidth.current ? allColumnsWidth : tableWidth.current;
+    // Check all column properties for the existence of rowSpan.
+    const shouldRowSpanColumn = children.some(
+      child => ReactIs.isElement(child) && child?.props?.rowSpan
+    );
 
-  // Whether to show vertical scroll bar
-  const hasVerticalScrollbar =
-    !autoHeight && contentHeight.current > getTableHeight() - headerHeight;
+    const visibleRows = useRef<React.ReactNode[]>([]);
+    const mouseAreaRef = useRef<HTMLDivElement>(null);
+    const tableRef = useRef<HTMLDivElement>(null);
+    const tableHeaderRef = useRef<HTMLDivElement>(null);
+    const affixHeaderWrapperRef = useRef<HTMLDivElement>(null);
+    const headerWrapperRef = useRef<HTMLDivElement>(null);
+    const tableBodyRef = useRef<HTMLDivElement>(null);
+    const wheelWrapperRef = useRef<HTMLDivElement>(null);
+    const scrollbarXRef = useRef<ScrollbarInstance>(null);
+    const scrollbarYRef = useRef<ScrollbarInstance>(null);
+
+    const handleTableResizeChange = (_prevSize, event: TableSizeChangeEventName) => {
+      forceUpdate();
+
+      /**
+       * Reset the position of the scroll bar after the table size changes.
+       */
+      if (typeof shouldUpdateScroll === 'function') {
+        onScrollTo(shouldUpdateScroll(event));
+      } else if (shouldUpdateScroll) {
+        const vertical = event === 'bodyHeightChanged';
+        vertical ? onScrollTop(0) : onScrollLeft(0);
+      }
 
-  // Whether to show the horizontal scroll bar
-  const hasHorizontalScrollbar = contentWidth.current > tableWidth.current;
+      if (event === 'bodyWidthChanged') {
+        deferUpdatePosition();
+      }
+    };
 
-  const classes = mergeCls(
-    className,
-    withClassPrefix({
+    const {
+      contentHeight,
+      contentWidth,
+      minScrollY,
+      minScrollX,
+      scrollY,
+      scrollX,
+      tableWidth,
+      tableOffset,
+      headerOffset,
+      setScrollY,
+      setScrollX,
+      getTableHeight
+    } = useTableDimension({
+      // The data should be flattened,
+      // otherwise the array length required to calculate the scroll height in the TreeTable is not real.
+      data,
+      width: widthProp,
+      rowHeight,
+      tableRef,
+      headerWrapperRef,
+      prefix,
+      affixHeader,
+      affixHorizontalScrollbar,
+      headerHeight,
+      height,
+      minHeight,
+      autoHeight,
+      fillHeight,
+      children,
+      expandedRowKeys,
+      showHeader,
       bordered,
-      hover: hover && !shouldRowSpanColumn,
+      onTableScroll: debounce((coords: { x?: number; y?: number }) => onScrollTo(coords), 100),
+      onTableResizeChange: handleTableResizeChange
+    });
+
+    useAffix({
+      getTableHeight,
+      contentHeight,
+      affixHorizontalScrollbar,
+      affixHeader,
+      tableOffset,
+      headerOffset,
+      headerHeight,
+      scrollbarXRef,
+      affixHeaderWrapperRef
+    });
+
+    const { forceUpdatePosition, deferUpdatePosition } = usePosition({
+      data: dataProp,
+      height,
+      tableWidth,
+      tableRef,
+      prefix,
+      translateDOMPositionXY,
+      wheelWrapperRef,
+      headerWrapperRef,
+      affixHeaderWrapperRef,
+      tableHeaderRef,
+      scrollX,
+      scrollY,
+      contentWidth,
+      shouldFixedColumn
+    });
+
+    const {
+      isScrolling,
+      onScrollHorizontal,
+      onScrollVertical,
+      onScrollBody,
+      onScrollTop,
+      onScrollLeft,
+      onScrollTo,
+      onScrollByKeydown
+    } = useScrollListener({
+      rtl,
+      data: dataProp,
+      height,
+      virtualized,
+      getTableHeight,
+      contentHeight,
+      headerHeight,
+      autoHeight,
+      tableBodyRef,
+      scrollbarXRef,
+      scrollbarYRef,
+      disabledScroll,
       loading,
-      treetable: isTree,
-      'word-wrap': wordWrap,
-      'cell-bordered': cellBordered
-    })
-  );
-
-  const styles = {
-    width: widthProp || 'auto',
-    height: getTableHeight(),
-    ...style
-  };
-
-  const renderRowExpanded = useCallback(
-    (rowData?: Row) => {
-      let height = 0;
-      if (typeof rowExpandedHeight === 'function') {
-        height = rowExpandedHeight(rowData);
-      } else {
-        height = rowExpandedHeight;
+      tableRef,
+      contentWidth,
+      tableWidth,
+      scrollY,
+      minScrollY,
+      minScrollX,
+      scrollX,
+      setScrollX,
+      setScrollY,
+      forceUpdatePosition,
+      deferUpdatePosition,
+      onScroll,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd
+    });
+
+    const { headerCells, bodyCells, allColumnsWidth, hasCustomTreeCol } = useCellDescriptor({
+      children,
+      rtl,
+      mouseAreaRef,
+      tableRef,
+      minScrollX,
+      scrollX,
+      tableWidth,
+      headerHeight,
+      showHeader,
+      sortType: sortTypeProp,
+      defaultSortType,
+      sortColumn,
+      prefix,
+      onSortColumn,
+
+      // Force table update after column width change, so scrollbar re-renders.
+      onHeaderCellResize: forceUpdate,
+      rowHeight
+    });
+
+    const colCounts = useRef(headerCells?.length || 0);
+
+    useUpdateEffect(() => {
+      setData(isTree ? filterTreeData(dataProp, expandedRowKeys, rowKey) : dataProp);
+    }, [dataProp, expandedRowKeys, rowKey, isTree]);
+
+    useUpdateEffect(() => {
+      if (headerCells?.length !== colCounts.current) {
+        onScrollLeft(0);
+        colCounts.current = headerCells?.length || 0;
       }
-      const styles = { height };
+    }, [children]);
+
+    useImperativeHandle(ref, () => ({
+      get root() {
+        return tableRef.current;
+      },
+      get body() {
+        return wheelWrapperRef.current;
+      },
+
+      // The scroll position of the table
+      get scrollPosition() {
+        return {
+          top: Math.abs(scrollY.current),
+          left: Math.abs(scrollX.current)
+        };
+      },
+      scrollTop: onScrollTop,
+      scrollLeft: onScrollLeft
+    }));
+
+    const rowWidth = allColumnsWidth > tableWidth.current ? allColumnsWidth : tableWidth.current;
+
+    // Whether to show vertical scroll bar
+    const hasVerticalScrollbar =
+      !autoHeight && contentHeight.current > getTableHeight() - headerHeight;
+
+    // Whether to show the horizontal scroll bar
+    const hasHorizontalScrollbar = contentWidth.current > tableWidth.current;
+
+    const classes = mergeCls(
+      className,
+      withClassPrefix({
+        bordered,
+        hover: hover && !shouldRowSpanColumn,
+        loading,
+        treetable: isTree,
+        'word-wrap': wordWrap,
+        'cell-bordered': cellBordered
+      })
+    );
 
-      if (typeof renderRowExpandedProp === 'function') {
-        return (
-          <div className={prefix('row-expanded')} style={styles}>
-            {renderRowExpandedProp(rowData)}
-          </div>
-        );
+    const styles = {
+      width: widthProp || 'auto',
+      height: getTableHeight(),
+      ...style
+    };
+
+    const renderRowExpanded = useCallback(
+      (rowData?: Row) => {
+        let height = 0;
+        if (typeof rowExpandedHeight === 'function') {
+          height = rowExpandedHeight(rowData);
+        } else {
+          height = rowExpandedHeight;
+        }
+        const styles = { height };
+
+        if (typeof renderRowExpandedProp === 'function') {
+          return (
+            <div className={prefix('row-expanded')} style={styles}>
+              {renderRowExpandedProp(rowData)}
+            </div>
+          );
+        }
+        return null;
+      },
+      [prefix, renderRowExpandedProp, rowExpandedHeight]
+    );
+
+    const renderRow = (
+      props: TableRowProps,
+      cells: any[],
+      shouldRenderExpandedRow?: boolean,
+      rowData?: any
+    ) => {
+      const { depth, rowIndex, ...restRowProps } = props;
+
+      if (typeof rowClassName === 'function') {
+        restRowProps.className = rowClassName(rowData, rowIndex);
+      } else {
+        restRowProps.className = rowClassName;
       }
-      return null;
-    },
-    [prefix, renderRowExpandedProp, rowExpandedHeight]
-  );
-
-  const renderRow = (
-    props: TableRowProps,
-    cells: any[],
-    shouldRenderExpandedRow?: boolean,
-    rowData?: any
-  ) => {
-    const { depth, rowIndex, ...restRowProps } = props;
-
-    if (typeof rowClassName === 'function') {
-      restRowProps.className = rowClassName(rowData, rowIndex);
-    } else {
-      restRowProps.className = rowClassName;
-    }
 
-    const rowStyles: React.CSSProperties = {
-      ...props?.style
-    };
-    let rowRight = 0;
+      const rowStyles: React.CSSProperties = {
+        ...props?.style
+      };
+      let rowRight = 0;
 
-    if (rtl && contentWidth.current > tableWidth.current) {
-      rowRight = tableWidth.current - contentWidth.current;
-      rowStyles.right = rowRight;
-    }
+      if (rtl && contentWidth.current > tableWidth.current) {
+        rowRight = tableWidth.current - contentWidth.current;
+        rowStyles.right = rowRight;
+      }
 
-    let rowNode: React.ReactNode = null;
+      let rowNode: React.ReactNode = null;
 
-    // IF there are fixed columns, add a fixed group
-    if (shouldFixedColumn && contentWidth.current > tableWidth.current) {
-      const fixedLeftCells: React.ReactNode[] = [];
-      const fixedRightCells: React.ReactNode[] = [];
-      const scrollCells: React.ReactNode[] = [];
-      let fixedLeftCellGroupWidth = 0;
-      let fixedRightCellGroupWidth = 0;
+      // IF there are fixed columns, add a fixed group
+      if (shouldFixedColumn && contentWidth.current > tableWidth.current) {
+        const fixedLeftCells: React.ReactNode[] = [];
+        const fixedRightCells: React.ReactNode[] = [];
+        const scrollCells: React.ReactNode[] = [];
+        let fixedLeftCellGroupWidth = 0;
+        let fixedRightCellGroupWidth = 0;
 
-      for (let i = 0; i < cells.length; i++) {
-        const cell = cells[i];
-        const { fixed, width } = cell.props;
+        for (let i = 0; i < cells.length; i++) {
+          const cell = cells[i];
+          const { fixed, width } = cell.props;
 
-        let isFixedStart = fixed === 'left' || fixed === true;
-        let isFixedEnd = fixed === 'right';
+          let isFixedStart = fixed === 'left' || fixed === true;
+          let isFixedEnd = fixed === 'right';
 
-        if (rtl) {
-          isFixedStart = fixed === 'right';
-          isFixedEnd = fixed === 'left' || fixed === true;
+          if (rtl) {
+            isFixedStart = fixed === 'right';
+            isFixedEnd = fixed === 'left' || fixed === true;
+          }
+
+          if (isFixedStart) {
+            fixedLeftCells.push(cell);
+            fixedLeftCellGroupWidth += width;
+          } else if (isFixedEnd) {
+            fixedRightCells.push(cell);
+            fixedRightCellGroupWidth += width;
+          } else {
+            scrollCells.push(cell);
+          }
         }
 
-        if (isFixedStart) {
-          fixedLeftCells.push(cell);
-          fixedLeftCellGroupWidth += width;
-        } else if (isFixedEnd) {
-          fixedRightCells.push(cell);
-          fixedRightCellGroupWidth += width;
-        } else {
-          scrollCells.push(cell);
+        if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
+          fixedRightCellGroupWidth += SCROLLBAR_WIDTH;
         }
-      }
 
-      if (hasVerticalScrollbar && fixedRightCellGroupWidth) {
-        fixedRightCellGroupWidth += SCROLLBAR_WIDTH;
+        rowNode = (
+          <>
+            {fixedLeftCellGroupWidth ? (
+              <CellGroup
+                fixed="left"
+                height={props.isHeaderRow ? props.headerHeight : props.height}
+                width={fixedLeftCellGroupWidth}
+                style={
+                  rtl
+                    ? { right: tableWidth.current - fixedLeftCellGroupWidth - rowRight }
+                    : undefined
+                }
+              >
+                {mergeCells(resetLeftForCells(fixedLeftCells))}
+              </CellGroup>
+            ) : null}
+
+            <CellGroup>{mergeCells(scrollCells)}</CellGroup>
+
+            {fixedRightCellGroupWidth ? (
+              <CellGroup
+                fixed="right"
+                style={
+                  rtl
+                    ? { right: 0 - rowRight }
+                    : { left: tableWidth.current - fixedRightCellGroupWidth }
+                }
+                height={props.isHeaderRow ? props.headerHeight : props.height}
+                width={fixedRightCellGroupWidth}
+              >
+                {mergeCells(
+                  resetLeftForCells(fixedRightCells, hasVerticalScrollbar ? SCROLLBAR_WIDTH : 0)
+                )}
+              </CellGroup>
+            ) : null}
+
+            {shouldRenderExpandedRow && renderRowExpanded(rowData)}
+          </>
+        );
+      } else {
+        rowNode = (
+          <>
+            <CellGroup>{mergeCells(cells)}</CellGroup>
+            {shouldRenderExpandedRow && renderRowExpanded(rowData)}
+          </>
+        );
       }
 
-      rowNode = (
-        <>
-          {fixedLeftCellGroupWidth ? (
-            <CellGroup
-              fixed="left"
-              height={props.isHeaderRow ? props.headerHeight : props.height}
-              width={fixedLeftCellGroupWidth}
-              style={
-                rtl ? { right: tableWidth.current - fixedLeftCellGroupWidth - rowRight } : undefined
-              }
-            >
-              {mergeCells(resetLeftForCells(fixedLeftCells))}
-            </CellGroup>
-          ) : null}
-
-          <CellGroup>{mergeCells(scrollCells)}</CellGroup>
-
-          {fixedRightCellGroupWidth ? (
-            <CellGroup
-              fixed="right"
-              style={
-                rtl
-                  ? { right: 0 - rowRight }
-                  : { left: tableWidth.current - fixedRightCellGroupWidth }
-              }
-              height={props.isHeaderRow ? props.headerHeight : props.height}
-              width={fixedRightCellGroupWidth}
-            >
-              {mergeCells(
-                resetLeftForCells(fixedRightCells, hasVerticalScrollbar ? SCROLLBAR_WIDTH : 0)
-              )}
-            </CellGroup>
-          ) : null}
-
-          {shouldRenderExpandedRow && renderRowExpanded(rowData)}
-        </>
+      return (
+        <Row {...restRowProps} data-depth={depth} style={rowStyles}>
+          {renderRowProp ? renderRowProp(rowNode, rowData) : rowNode}
+        </Row>
       );
-    } else {
-      rowNode = (
-        <>
-          <CellGroup>{mergeCells(cells)}</CellGroup>
-          {shouldRenderExpandedRow && renderRowExpanded(rowData)}
-        </>
+    };
+
+    const renderTableHeader = (headerCells: any[], rowWidth: number) => {
+      const top = typeof affixHeader === 'number' ? affixHeader : 0;
+      const rowProps: TableRowProps = {
+        'aria-rowindex': 1,
+        rowRef: tableHeaderRef,
+        width: rowWidth,
+        height: getRowHeight(),
+        headerHeight,
+        isHeaderRow: true,
+        top: 0,
+        rowIndex: -1
+      };
+
+      const fixedStyle: React.CSSProperties = {
+        position: 'fixed',
+        overflow: 'hidden',
+        height: headerHeight,
+        width: tableWidth.current,
+        top
+      };
+
+      // Affix header
+      const header = (
+        <div className={prefix('affix-header')} style={fixedStyle} ref={affixHeaderWrapperRef}>
+          {renderRow(rowProps, headerCells)}
+        </div>
       );
-    }
 
-    return (
-      <Row {...restRowProps} data-depth={depth} style={rowStyles}>
-        {renderRowProp ? renderRowProp(rowNode, rowData) : rowNode}
-      </Row>
-    );
-  };
-
-  const renderTableHeader = (headerCells: any[], rowWidth: number) => {
-    const top = typeof affixHeader === 'number' ? affixHeader : 0;
-    const rowProps: TableRowProps = {
-      'aria-rowindex': 1,
-      rowRef: tableHeaderRef,
-      width: rowWidth,
-      height: getRowHeight(),
-      headerHeight,
-      isHeaderRow: true,
-      top: 0,
-      rowIndex: -1
+      return (
+        <React.Fragment>
+          {(affixHeader === 0 || affixHeader) && header}
+          <div role="rowgroup" className={prefix('header-row-wrapper')} ref={headerWrapperRef}>
+            {renderRow(rowProps, headerCells)}
+          </div>
+        </React.Fragment>
+      );
     };
 
-    const fixedStyle: React.CSSProperties = {
-      position: 'fixed',
-      overflow: 'hidden',
-      height: headerHeight,
-      width: tableWidth.current,
-      top
-    };
+    const shouldRenderExpandedRow = useCallback(
+      (rowData: Row) => {
+        if (
+          isFunction(renderRowExpandedProp) &&
+          !isTree &&
+          rowKey &&
+          expandedRowKeys.some(key => key === rowData[rowKey])
+        ) {
+          return true;
+        }
 
-    // Affix header
-    const header = (
-      <div className={prefix('affix-header')} style={fixedStyle} ref={affixHeaderWrapperRef}>
-        {renderRow(rowProps, headerCells)}
-      </div>
+        return false;
+      },
+      [expandedRowKeys, isTree, renderRowExpandedProp, rowKey]
     );
 
-    return (
-      <React.Fragment>
-        {(affixHeader === 0 || affixHeader) && header}
-        <div role="rowgroup" className={prefix('header-row-wrapper')} ref={headerWrapperRef}>
-          {renderRow(rowProps, headerCells)}
-        </div>
-      </React.Fragment>
+    const bindRowClick = useCallback(
+      (rowData: Row) => {
+        return (event: React.MouseEvent) => {
+          onRowClick?.(rowData, event);
+        };
+      },
+      [onRowClick]
     );
-  };
-
-  const shouldRenderExpandedRow = useCallback(
-    (rowData: Row) => {
-      if (
-        isFunction(renderRowExpandedProp) &&
-        !isTree &&
-        rowKey &&
-        expandedRowKeys.some(key => key === rowData[rowKey])
-      ) {
-        return true;
-      }
 
-      return false;
-    },
-    [expandedRowKeys, isTree, renderRowExpandedProp, rowKey]
-  );
+    const bindRowContextMenu = useCallback(
+      (rowData: Row) => {
+        return (event: React.MouseEvent) => {
+          onRowContextMenu?.(rowData, event);
+        };
+      },
+      [onRowContextMenu]
+    );
 
-  const bindRowClick = useCallback(
-    (rowData: Row) => {
-      return (event: React.MouseEvent) => {
-        onRowClick?.(rowData, event);
-      };
-    },
-    [onRowClick]
-  );
-
-  const bindRowContextMenu = useCallback(
-    (rowData: Row) => {
-      return (event: React.MouseEvent) => {
-        onRowContextMenu?.(rowData, event);
-      };
-    },
-    [onRowContextMenu]
-  );
-
-  const handleTreeToggle = useCallback(
-    (treeRowKey: any, _rowIndex: number, rowData: Row) => {
-      let open = false;
-      const nextExpandedRowKeys: Key[] = [];
-
-      for (let i = 0; i < expandedRowKeys.length; i++) {
-        const key = expandedRowKeys[i];
-        if (key === treeRowKey) {
-          open = true;
-        } else {
-          nextExpandedRowKeys.push(key);
+    const handleTreeToggle = useCallback(
+      (treeRowKey: any, _rowIndex: number, rowData: Row) => {
+        let open = false;
+        const nextExpandedRowKeys: Key[] = [];
+
+        for (let i = 0; i < expandedRowKeys.length; i++) {
+          const key = expandedRowKeys[i];
+          if (key === treeRowKey) {
+            open = true;
+          } else {
+            nextExpandedRowKeys.push(key);
+          }
         }
-      }
 
-      if (!open) {
-        nextExpandedRowKeys.push(treeRowKey);
-      }
+        if (!open) {
+          nextExpandedRowKeys.push(treeRowKey);
+        }
 
-      setExpandedRowKeys(nextExpandedRowKeys);
-      onExpandChange?.(!open, rowData);
-    },
-    [expandedRowKeys, onExpandChange, setExpandedRowKeys]
-  );
+        setExpandedRowKeys(nextExpandedRowKeys);
+        onExpandChange?.(!open, rowData);
+      },
+      [expandedRowKeys, onExpandChange, setExpandedRowKeys]
+    );
 
-  /**
-   * Records the status of merged rows.
-   * { cellKey: [count,index]}
-   */
-  const rowSpanState = useRef<{ [cellKey: string]: [number, number] }>({});
-
-  const renderRowData = (
-    bodyCells: any[],
-    rowData: any,
-    props: TableRowProps & { cellHeight?: number },
-    shouldRenderExpandedRow?: boolean
-  ) => {
-    const hasChildren = isTree && rowData.children && Array.isArray(rowData.children);
-    const nextRowKey =
-      rowKey && typeof rowData[rowKey] !== 'undefined' ? rowData[rowKey] : props.key;
-
-    const { cellHeight, ...restRowProps } = props;
-
-    const rowProps: TableRowProps = {
-      ...restRowProps,
-      key: nextRowKey,
-      'aria-rowindex': (props.key as number) + 2,
-      rowRef: bindTableRowsRef(props.key as any, rowData),
-      onClick: bindRowClick(rowData),
-      onContextMenu: bindRowContextMenu(rowData)
-    };
+    /**
+     * Records the status of merged rows.
+     * { cellKey: [count,index]}
+     */
+    const rowSpanState = useRef<{ [cellKey: string]: [number, number] }>({});
+
+    const renderRowData = (
+      bodyCells: any[],
+      rowData: any,
+      props: TableRowProps & { cellHeight?: number },
+      shouldRenderExpandedRow?: boolean
+    ) => {
+      const hasChildren = isTree && rowData.children && Array.isArray(rowData.children);
+      const nextRowKey =
+        rowKey && typeof rowData[rowKey] !== 'undefined' ? rowData[rowKey] : props.key;
+
+      const { cellHeight, ...restRowProps } = props;
+
+      const rowProps: TableRowProps = {
+        ...restRowProps,
+        key: nextRowKey,
+        'aria-rowindex': (props.key as number) + 2,
+        rowRef: bindTableRowsRef(props.key as any, rowData),
+        onClick: bindRowClick(rowData),
+        onContextMenu: bindRowContextMenu(rowData)
+      };
 
-    const expanded = expandedRowKeys.some(key => rowKey && key === rowData[rowKey]);
-    const cells: React.ReactNode[] = [];
+      const expanded = expandedRowKeys.some(key => rowKey && key === rowData[rowKey]);
+      const cells: React.ReactNode[] = [];
 
-    for (let i = 0; i < bodyCells.length; i++) {
-      const cell = bodyCells[i];
-      const rowSpan: number = cell.props?.rowSpan?.(rowData);
-      const dataCellHeight = rowSpan ? rowSpan * (cellHeight || ROW_HEIGHT) : cellHeight;
-      const cellKey = cell.props.dataKey || i;
+      for (let i = 0; i < bodyCells.length; i++) {
+        const cell = bodyCells[i];
+        const rowSpan: number = cell.props?.rowSpan?.(rowData);
+        const dataCellHeight = rowSpan ? rowSpan * (cellHeight || ROW_HEIGHT) : cellHeight;
+        const cellKey = cell.props.dataKey || i;
 
-      // Record the cell state of the merged row
-      if (rowSpanState.current[cellKey]?.[1] > 0) {
-        rowSpanState.current[cellKey][1] -= 1;
+        // Record the cell state of the merged row
+        if (rowSpanState.current[cellKey]?.[1] > 0) {
+          rowSpanState.current[cellKey][1] -= 1;
 
-        // Restart counting when merged to the last cell.
-        if (rowSpanState.current[cellKey][1] === 0) {
-          rowSpanState.current[cellKey][0] = 0;
+          // Restart counting when merged to the last cell.
+          if (rowSpanState.current[cellKey][1] === 0) {
+            rowSpanState.current[cellKey][0] = 0;
+          }
         }
-      }
-
-      if (rowSpan) {
-        // The state of the initial merged cell
-        rowSpanState.current[cellKey] = [rowSpan, rowSpan];
-        rowProps.rowSpan = rowSpan;
-        rowProps.style = { overflow: 'inherit' };
-      }
 
-      // Cells marked as deleted when checking for merged cell.
-      const removedCell =
-        cell.props?.rowSpan && !rowSpan && rowSpanState.current[cellKey]?.[0] !== 0 ? true : false;
-
-      cells.push(
-        React.cloneElement(cell, {
-          hasChildren,
-          rowData,
-          rowIndex: props.rowIndex,
-          wordWrap,
-          height: dataCellHeight,
-          depth: props.depth,
-          renderTreeToggle,
-          onTreeToggle: handleTreeToggle,
-          rowKey: nextRowKey,
-          expanded,
-          rowSpan,
-          removed: removedCell
-        })
-      );
-    }
+        if (rowSpan) {
+          // The state of the initial merged cell
+          rowSpanState.current[cellKey] = [rowSpan, rowSpan];
+          rowProps.rowSpan = rowSpan;
+          rowProps.style = { overflow: 'inherit' };
+        }
 
-    return renderRow(rowProps, cells, shouldRenderExpandedRow, rowData);
-  };
+        // Cells marked as deleted when checking for merged cell.
+        const removedCell =
+          cell.props?.rowSpan && !rowSpan && rowSpanState.current[cellKey]?.[0] !== 0
+            ? true
+            : false;
+
+        cells.push(
+          React.cloneElement(cell, {
+            hasChildren,
+            rowData,
+            rowIndex: props.rowIndex,
+            wordWrap,
+            height: dataCellHeight,
+            depth: props.depth,
+            renderTreeToggle,
+            onTreeToggle: handleTreeToggle,
+            rowKey: nextRowKey,
+            expanded,
+            rowSpan,
+            removed: removedCell
+          })
+        );
+      }
 
-  const renderScrollbar = () => {
-    const height = getTableHeight();
+      return renderRow(rowProps, cells, shouldRenderExpandedRow, rowData);
+    };
 
-    if (disabledScroll) {
-      return null;
-    }
+    const renderScrollbar = () => {
+      const height = getTableHeight();
 
-    const scrollbars: React.ReactNode[] = [];
-
-    if (hasHorizontalScrollbar) {
-      scrollbars.push(
-        <Scrollbar
-          key="scrollbar"
-          tableId={id}
-          style={{ width: tableWidth.current }}
-          length={tableWidth.current}
-          onScroll={onScrollHorizontal}
-          scrollLength={contentWidth.current}
-          ref={scrollbarXRef}
-        />
-      );
-    }
+      if (disabledScroll) {
+        return null;
+      }
 
-    if (hasVerticalScrollbar) {
-      scrollbars.push(
-        <Scrollbar
-          vertical
-          key="vertical-scrollbar"
-          tableId={id}
-          length={height - headerHeight}
-          onScroll={onScrollVertical}
-          scrollLength={contentHeight.current}
-          ref={scrollbarYRef}
-        />
-      );
-    }
+      const scrollbars: React.ReactNode[] = [];
+
+      if (hasHorizontalScrollbar) {
+        scrollbars.push(
+          <Scrollbar
+            key="scrollbar"
+            tableId={id}
+            style={{ width: tableWidth.current }}
+            length={tableWidth.current}
+            onScroll={onScrollHorizontal}
+            scrollLength={contentWidth.current}
+            ref={scrollbarXRef}
+          />
+        );
+      }
 
-    return scrollbars;
-  };
+      if (hasVerticalScrollbar) {
+        scrollbars.push(
+          <Scrollbar
+            vertical
+            key="vertical-scrollbar"
+            tableId={id}
+            length={height - headerHeight}
+            onScroll={onScrollVertical}
+            scrollLength={contentHeight.current}
+            ref={scrollbarYRef}
+          />
+        );
+      }
 
-  const renderTableBody = (bodyCells: any[], rowWidth: number) => {
-    const height = getTableHeight();
-    const bodyHeight = height - headerHeight;
-    const bodyStyles = {
-      top: headerHeight,
-      height: bodyHeight
+      return scrollbars;
     };
 
-    let contentHeight = 0;
-    let topHideHeight = 0;
-    let bottomHideHeight = 0;
+    const renderTableBody = (bodyCells: any[], rowWidth: number) => {
+      const height = getTableHeight();
+      const bodyHeight = height - headerHeight;
+      const bodyStyles = {
+        top: headerHeight,
+        height: bodyHeight
+      };
 
-    visibleRows.current = [];
+      let contentHeight = 0;
+      let topHideHeight = 0;
+      let bottomHideHeight = 0;
 
-    if (data) {
-      let top = 0; // Row position
-      let minTop = Math.abs(scrollY.current);
-      let startHeight = 0;
-      if (typeof rowExpandedHeight === 'function') {
-        startHeight = data.length ? rowExpandedHeight(data[0]) : 100;
-      } else {
-        startHeight = rowExpandedHeight;
-      }
+      visibleRows.current = [];
 
-      let maxTop = minTop + height + startHeight;
-      const isCustomRowHeight = typeof rowHeight === 'function';
-      const isUncertainHeight = !!renderRowExpandedProp || isCustomRowHeight || wordWrap;
-
-      // If virtualized is enabled and the row height in the Table is variable,
-      // you need to loop through the data to get the height of each row.
-      if ((isUncertainHeight && virtualized) || !virtualized) {
-        // Avoid white screens on the top and bottom of the table when touching and scrolling on the mobile terminal.
-        // So supplement the display data row.
-        if (isSupportTouchEvent()) {
-          const coveredHeight = height * 3;
-          minTop = Math.max(minTop - coveredHeight, 0);
-          maxTop = maxTop + coveredHeight;
+      if (data) {
+        let top = 0; // Row position
+        let minTop = Math.abs(scrollY.current);
+        let startHeight = 0;
+        if (typeof rowExpandedHeight === 'function') {
+          startHeight = data.length ? rowExpandedHeight(data[0]) : 100;
+        } else {
+          startHeight = rowExpandedHeight;
         }
 
-        for (let index = 0; index < data.length; index++) {
-          const rowData = data[index];
-          const maxHeight = tableRowsMaxHeight[index];
-          const expandedRow = shouldRenderExpandedRow(rowData);
-
-          let nextRowHeight = 0;
-          let cellHeight = 0;
+        let maxTop = minTop + height + startHeight;
+        const isCustomRowHeight = typeof rowHeight === 'function';
+        const isUncertainHeight = !!renderRowExpandedProp || isCustomRowHeight || wordWrap;
+
+        // If virtualized is enabled and the row height in the Table is variable,
+        // you need to loop through the data to get the height of each row.
+        if ((isUncertainHeight && virtualized) || !virtualized) {
+          // Avoid white screens on the top and bottom of the table when touching and scrolling on the mobile terminal.
+          // So supplement the display data row.
+          if (isSupportTouchEvent()) {
+            const coveredHeight = height * 3;
+            minTop = Math.max(minTop - coveredHeight, 0);
+            maxTop = maxTop + coveredHeight;
+          }
 
-          if (typeof rowHeight === 'function') {
-            nextRowHeight = rowHeight(rowData);
-            cellHeight = nextRowHeight;
-          } else {
-            nextRowHeight = maxHeight
-              ? Math.max(maxHeight + CELL_PADDING_HEIGHT, rowHeight)
-              : rowHeight;
-
-            cellHeight = nextRowHeight;
-            if (expandedRow) {
-              // If the row is expanded, the height of the expanded row is added.
-              if (typeof rowExpandedHeight === 'function') {
-                nextRowHeight += rowExpandedHeight(rowData);
-              } else {
-                nextRowHeight += rowExpandedHeight;
+          for (let index = 0; index < data.length; index++) {
+            const rowData = data[index];
+            const maxHeight = tableRowsMaxHeight[index];
+            const expandedRow = shouldRenderExpandedRow(rowData);
+
+            let nextRowHeight = 0;
+            let cellHeight = 0;
+
+            if (typeof rowHeight === 'function') {
+              nextRowHeight = rowHeight(rowData);
+              cellHeight = nextRowHeight;
+            } else {
+              nextRowHeight = maxHeight
+                ? Math.max(maxHeight + CELL_PADDING_HEIGHT, rowHeight)
+                : rowHeight;
+
+              cellHeight = nextRowHeight;
+              if (expandedRow) {
+                // If the row is expanded, the height of the expanded row is added.
+                if (typeof rowExpandedHeight === 'function') {
+                  nextRowHeight += rowExpandedHeight(rowData);
+                } else {
+                  nextRowHeight += rowExpandedHeight;
+                }
               }
             }
-          }
 
-          contentHeight += nextRowHeight;
-
-          const rowProps = {
-            key: index,
-            top,
-            rowIndex: index,
-            width: rowWidth,
-            depth: rowData[TREE_DEPTH],
-            height: nextRowHeight,
-            cellHeight
-          };
-
-          top += nextRowHeight;
-
-          if (virtualized && !wordWrap) {
-            if (top + nextRowHeight < minTop) {
-              topHideHeight += nextRowHeight;
-              continue;
-            } else if (top > maxTop) {
-              bottomHideHeight += nextRowHeight;
-              continue;
+            contentHeight += nextRowHeight;
+
+            const rowProps = {
+              key: index,
+              top,
+              rowIndex: index,
+              width: rowWidth,
+              depth: rowData[TREE_DEPTH],
+              height: nextRowHeight,
+              cellHeight
+            };
+
+            top += nextRowHeight;
+
+            if (virtualized && !wordWrap) {
+              if (top + nextRowHeight < minTop) {
+                topHideHeight += nextRowHeight;
+                continue;
+              } else if (top > maxTop) {
+                bottomHideHeight += nextRowHeight;
+                continue;
+              }
             }
-          }
-
-          visibleRows.current.push(renderRowData(bodyCells, rowData, rowProps, expandedRow));
-        }
-      } else {
-        /** virtualized */
-
-        // If the row height of the Table is fixed, it is directly calculated by the row height and the number of rows,
-        // thereby reducing the performance cost of traversing all data.
-        const nextRowHeight = getRowHeight();
-        let startIndex = Math.max(Math.floor(minTop / nextRowHeight), 0);
-        let endIndex = Math.min(
-          startIndex + Math.ceil(bodyHeight / nextRowHeight) + 5,
-          data.length
-        );
 
-        // Avoid white screens on the top and bottom of the table when touching and scrolling on the mobile terminal.
-        // So supplement the display data row.
-        if (isSupportTouchEvent()) {
-          const coveredCount = Math.floor((height / nextRowHeight) * 3);
-          startIndex = Math.max(startIndex - coveredCount, 0);
-          endIndex = Math.min(endIndex + coveredCount, data.length);
-        }
+            visibleRows.current.push(renderRowData(bodyCells, rowData, rowProps, expandedRow));
+          }
+        } else {
+          /** virtualized */
+
+          // If the row height of the Table is fixed, it is directly calculated by the row height and the number of rows,
+          // thereby reducing the performance cost of traversing all data.
+          const nextRowHeight = getRowHeight();
+          let startIndex = Math.max(Math.floor(minTop / nextRowHeight), 0);
+          let endIndex = Math.min(
+            startIndex + Math.ceil(bodyHeight / nextRowHeight) + 5,
+            data.length
+          );
+
+          // Avoid white screens on the top and bottom of the table when touching and scrolling on the mobile terminal.
+          // So supplement the display data row.
+          if (isSupportTouchEvent()) {
+            const coveredCount = Math.floor((height / nextRowHeight) * 3);
+            startIndex = Math.max(startIndex - coveredCount, 0);
+            endIndex = Math.min(endIndex + coveredCount, data.length);
+          }
 
-        contentHeight = data.length * nextRowHeight;
-        topHideHeight = startIndex * nextRowHeight;
-        bottomHideHeight = (data.length - endIndex) * nextRowHeight;
-
-        for (let index = startIndex; index < endIndex; index++) {
-          const rowData = data[index];
-          const rowProps = {
-            key: index,
-            rowIndex: index,
-            depth: rowData[TREE_DEPTH],
-            top: index * nextRowHeight,
-            width: rowWidth,
-            height: nextRowHeight,
-            cellHeight: nextRowHeight
-          };
-          visibleRows.current.push(renderRowData(bodyCells, rowData, rowProps, false));
+          contentHeight = data.length * nextRowHeight;
+          topHideHeight = startIndex * nextRowHeight;
+          bottomHideHeight = (data.length - endIndex) * nextRowHeight;
+
+          for (let index = startIndex; index < endIndex; index++) {
+            const rowData = data[index];
+            const rowProps = {
+              key: index,
+              rowIndex: index,
+              depth: rowData[TREE_DEPTH],
+              top: index * nextRowHeight,
+              width: rowWidth,
+              height: nextRowHeight,
+              cellHeight: nextRowHeight
+            };
+            visibleRows.current.push(renderRowData(bodyCells, rowData, rowProps, false));
+          }
         }
       }
-    }
 
-    const wheelStyles: React.CSSProperties = {
-      position: 'absolute',
-      height: contentHeight,
-      minHeight: height,
-      pointerEvents: isScrolling ? 'none' : undefined
-    };
-    const topRowStyles = { height: topHideHeight };
-    const bottomRowStyles = { height: bottomHideHeight };
+      const wheelStyles: React.CSSProperties = {
+        position: 'absolute',
+        height: contentHeight,
+        minHeight: height,
+        pointerEvents: isScrolling ? 'none' : undefined
+      };
+      const topRowStyles = { height: topHideHeight };
+      const bottomRowStyles = { height: bottomHideHeight };
+
+      return (
+        <div
+          ref={tableBodyRef}
+          role="rowgroup"
+          className={prefix('body-row-wrapper')}
+          style={bodyStyles}
+          onScroll={onScrollBody}
+        >
+          <div style={wheelStyles} className={prefix('body-wheel-area')} ref={wheelWrapperRef}>
+            {topHideHeight ? <Row style={topRowStyles} className="virtualized" /> : null}
+            {visibleRows.current}
+            {bottomHideHeight ? <Row style={bottomRowStyles} className="virtualized" /> : null}
+          </div>
 
-    return (
-      <div
-        ref={tableBodyRef}
-        role="rowgroup"
-        className={prefix('body-row-wrapper')}
-        style={bodyStyles}
-        onScroll={onScrollBody}
-      >
-        <div style={wheelStyles} className={prefix('body-wheel-area')} ref={wheelWrapperRef}>
-          {topHideHeight ? <Row style={topRowStyles} className="virtualized" /> : null}
-          {visibleRows.current}
-          {bottomHideHeight ? <Row style={bottomRowStyles} className="virtualized" /> : null}
+          <EmptyMessage
+            locale={locale}
+            renderEmpty={renderEmpty}
+            addPrefix={prefix}
+            loading={!!visibleRows.current?.length || loading}
+          />
+          {renderScrollbar()}
+          <Loader
+            locale={locale}
+            loadAnimation={loadAnimation}
+            loading={loading}
+            addPrefix={prefix}
+            renderLoading={renderLoading}
+          />
         </div>
+      );
+    };
 
-        <EmptyMessage
-          locale={locale}
-          renderEmpty={renderEmpty}
-          addPrefix={prefix}
-          loading={!!visibleRows.current?.length || loading}
-        />
-        {renderScrollbar()}
-        <Loader
-          locale={locale}
-          loadAnimation={loadAnimation}
-          loading={loading}
-          addPrefix={prefix}
-          renderLoading={renderLoading}
-        />
-      </div>
+    const contextValue = React.useMemo(
+      () => ({
+        classPrefix,
+        translateDOMPositionXY: translateDOMPositionXY.current,
+        rtl,
+        isTree,
+        hasCustomTreeCol
+      }),
+      [classPrefix, hasCustomTreeCol, isTree, rtl]
     );
-  };
 
-  const contextValue = React.useMemo(
-    () => ({
-      classPrefix,
-      translateDOMPositionXY: translateDOMPositionXY.current,
-      rtl,
-      isTree,
-      hasCustomTreeCol
-    }),
-    [classPrefix, hasCustomTreeCol, isTree, rtl]
-  );
-
-  return (
-    <TableContext.Provider value={contextValue}>
-      <div
-        role={isTree ? 'treegrid' : 'grid'}
-        // The aria-rowcount is specified on the element with the table.
-        // Its value is an integer equal to the total number of rows available, including header rows.
-        aria-rowcount={data.length + 1}
-        aria-colcount={colCounts.current}
-        aria-busy={loading}
-        {...rest}
-        className={classes}
-        style={styles}
-        ref={tableRef}
-        tabIndex={-1}
-        onKeyDown={onScrollByKeydown}
-      >
-        {showHeader && renderTableHeader(headerCells, rowWidth)}
-        {children && renderTableBody(bodyCells, rowWidth)}
-        {showHeader && (
-          <MouseArea
-            ref={mouseAreaRef}
-            addPrefix={prefix}
-            headerHeight={headerHeight}
-            height={getTableHeight()}
-          />
-        )}
-      </div>
-    </TableContext.Provider>
-  );
-});
+    return (
+      <TableContext.Provider value={contextValue}>
+        <div
+          role={isTree ? 'treegrid' : 'grid'}
+          // The aria-rowcount is specified on the element with the table.
+          // Its value is an integer equal to the total number of rows available, including header rows.
+          aria-rowcount={data.length + 1}
+          aria-colcount={colCounts.current}
+          aria-busy={loading}
+          {...rest}
+          className={classes}
+          style={styles}
+          ref={tableRef}
+          tabIndex={-1}
+          onKeyDown={onScrollByKeydown}
+        >
+          {showHeader && renderTableHeader(headerCells, rowWidth)}
+          {children && renderTableBody(bodyCells, rowWidth)}
+          {showHeader && (
+            <MouseArea
+              ref={mouseAreaRef}
+              addPrefix={prefix}
+              headerHeight={headerHeight}
+              height={getTableHeight()}
+            />
+          )}
+        </div>
+      </TableContext.Provider>
+    );
+  }
+);
 
 Table.displayName = 'Table';
 Table.propTypes = {
@@ -1207,7 +1249,8 @@ Table.propTypes = {
   onTouchEnd: PropTypes.func
 };
 
-export interface TableInstance<Row, Key> extends React.FunctionComponent<TableProps<Row, Key>> {
+export interface TableInstance<Row extends RowDataType, Key extends RowKeyType>
+  extends React.FunctionComponent<TableProps<Row, Key>> {
   /** The table body element */
   readonly body: HTMLDivElement;
   /** The table root element */
@@ -1220,6 +1263,6 @@ export interface TableInstance<Row, Key> extends React.FunctionComponent<TablePr
   scrollLeft: (left: number) => void;
 }
 
-export default Table as <Row extends RowDataType, Key>(
+export default Table as <Row extends RowDataType, Key extends RowKeyType>(
   props: TableProps<Row, Key> & React.RefAttributes<TableInstance<Row, Key>>
 ) => React.ReactElement;
diff --git a/src/utils/children.ts b/src/utils/children.ts
new file mode 100644
index 0000000..ae86ed7
--- /dev/null
+++ b/src/utils/children.ts
@@ -0,0 +1,19 @@
+import React from 'react';
+import * as ReactIS from 'react-is';
+
+export const flattenChildren = (
+  children: React.ReactNode | React.ReactNode[],
+  flattened: React.ReactNode[] = []
+) => {
+  for (const child of React.Children.toArray(children)) {
+    if (ReactIS.isFragment(child)) {
+      const childEl = child as React.ReactElement;
+      if (childEl.props?.children) {
+        flattenChildren(childEl.props.children, flattened);
+      }
+    } else {
+      flattened.push(child);
+    }
+  }
+  return flattened;
+};
diff --git a/src/utils/getColumnProps.ts b/src/utils/getColumnProps.ts
index 9fc974b..67dbb89 100644
--- a/src/utils/getColumnProps.ts
+++ b/src/utils/getColumnProps.ts
@@ -1,5 +1,6 @@
+import React from 'react';
+import { RowDataType } from '../@types/common';
 import { ColumnProps } from '../Column';
-export type Column = React.ReactElement<ColumnProps>;
 
 /**
  * Get the union of the props of the column itself and the props of the custom column
@@ -15,7 +16,9 @@ export type Column = React.ReactElement<ColumnProps>;
  * </CustomColumn>
  *
  */
-export default function getColumnProps(column: Column): ColumnProps {
+export default function getColumnProps<Row extends RowDataType>(
+  column: React.ReactElement
+): ColumnProps<Row> {
   const columnDefaultProps = column['type']?.['render']?.()?.props || {};
 
   return { ...columnDefaultProps, ...column?.props };
diff --git a/src/utils/getTotalByColumns.ts b/src/utils/getTotalByColumns.ts
index 6f11091..6ae67af 100644
--- a/src/utils/getTotalByColumns.ts
+++ b/src/utils/getTotalByColumns.ts
@@ -1,15 +1,19 @@
 import React from 'react';
 import isPlainObject from 'lodash/isPlainObject';
-import getColumnProps, { Column } from './getColumnProps';
+import getColumnProps from './getColumnProps';
+import { RowDataType } from '../@types/common';
+import { ColumnProps } from '../Column';
 
-function getTotalByColumns(columns: Column | React.ReactNode[]) {
+function getTotalByColumns<Row extends RowDataType>(
+  columns: React.ReactElement<ColumnProps<Row>> | React.ReactElement<ColumnProps<Row>>[]
+) {
   let totalFlexGrow = 0;
   let totalWidth = 0;
 
   const count = (items: React.ReactNode[]) => {
     Array.from(items).forEach(column => {
       if (React.isValidElement(column)) {
-        const { flexGrow, width = 0 } = getColumnProps(column as Column);
+        const { flexGrow, width = 0 } = getColumnProps(column);
         totalFlexGrow += flexGrow || 0;
         totalWidth += flexGrow ? 0 : width;
       } else if (Array.isArray(column)) {
diff --git a/src/utils/useCellDescriptor.ts b/src/utils/useCellDescriptor.ts
index 5a00c69..ce1444e 100644
--- a/src/utils/useCellDescriptor.ts
+++ b/src/utils/useCellDescriptor.ts
@@ -16,7 +16,7 @@ import flushSync from './flushSync';
 import useMount from './useMount';
 
 interface CellDescriptorProps<Row> {
-  children: React.ReactNode;
+  children: React.ReactNode[];
   rtl: boolean;
   minScrollX: React.MutableRefObject<number>;
   scrollX: React.MutableRefObject<number>;
@@ -192,9 +192,9 @@ const useCellDescriptor = <Row extends RowDataType>(
 
   const columns = getTableColumns(children) as React.ReactElement[];
   const count = columns.length;
-  const { totalFlexGrow, totalWidth } = getTotalByColumns(columns);
+  const { totalFlexGrow, totalWidth } = getTotalByColumns<Row>(columns);
 
-  React.Children.forEach(columns, (column: React.ReactElement<ColumnProps>, index) => {
+  React.Children.forEach(columns, (column: React.ReactElement<ColumnProps<Row>>, index) => {
     if (React.isValidElement(column)) {
       const columnChildren = column.props.children as React.ReactNode[];
       const columnProps = getColumnProps(column);
diff --git a/test/Table.test.tsx b/test/Table.test.tsx
index e03ce4c..96ac764 100644
--- a/test/Table.test.tsx
+++ b/test/Table.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { expectType } from 'ts-expect';
 import Table, { TableInstance } from '../src/Table';
+import Cell from '../src/Cell';
 
 type Row = {
   id: number;
@@ -61,7 +62,57 @@ const ref = React.createRef<TableInstance<Row, string>>();
 
 <Table ref={ref} />;
 
+<Table ref={ref}>
+  {({ Column, HeaderCell, Cell }) => (
+    <>
+      <Column>
+        <HeaderCell>Id</HeaderCell>
+        <Cell>{({ id }) => id}</Cell>
+      </Column>
+    </>
+  )}
+</Table>;
+
 ref.current?.body;
 ref.current?.root;
 ref.current?.scrollLeft(100);
 ref.current?.scrollTop(100);
+
+interface InventoryItem {
+  id: string;
+  name: string;
+}
+
+const table = React.createRef<TableInstance<InventoryItem, string>>();
+
+<Table<InventoryItem, string> ref={table}>
+  {({ Column, HeaderCell, Cell }) => (
+    <>
+      <Column>
+        <HeaderCell>Name</HeaderCell>
+        <Cell>{row => row.name}</Cell>
+      </Column>
+      <Column>
+        <HeaderCell>Type</HeaderCell>
+        {/** @ts-expect-error Property 'type' does not exist on type 'InventoryItem' */}
+        <Cell>{row => row.type}</Cell>
+      </Column>
+    </>
+  )}
+</Table>;
+
+interface ImageCellProps<TKey extends string, TRow extends Record<TKey, string>> {
+  rowData: TRow;
+  dataKey: TKey;
+  // ... any other props
+}
+
+export const ImageCell = <TKey extends string, TRow extends Record<TKey, string>>({
+  rowData,
+  dataKey,
+  ...rest
+}: ImageCellProps<TKey, TRow>) => (
+  <Cell<TRow, TKey> {...rest}>
+    <img src={rowData[dataKey]} width="50" />
+  </Cell>
+);
diff --git a/test/TableSpec.js b/test/TableSpec.js
index 41658a1..7858131 100644
--- a/test/TableSpec.js
+++ b/test/TableSpec.js
@@ -29,6 +29,26 @@ describe('Table', () => {
         </Column>
       </Table>
     );
+    expect(instance.querySelectorAll('.rs-table-cell')).to.be.length(2);
+  });
+
+  it('Should accept render prop', () => {
+    const instance = getDOMNode(
+      <Table>
+        {({ Column, HeaderCell, Cell }) => (
+          <>
+            <Column>
+              <HeaderCell>11</HeaderCell>
+              <Cell>12</Cell>
+            </Column>
+            <Column>
+              <HeaderCell>11</HeaderCell>
+              <Cell>12</Cell>
+            </Column>
+          </>
+        )}
+      </Table>
+    );
 
     expect(instance.querySelectorAll('.rs-table-cell')).to.be.length(2);
   });