English | 简体中文

Highlights

• Flexible column, summary, fixed header, sticky, expandable row, and virtual table support.
• TypeScript-first API designed for composition in design systems.
• Used by Ant Design Table and other React data display experiences.

Install

npm install @rc-component/table

Usage

import Table from '@rc-component/table';
import type { ColumnsType } from '@rc-component/table';

interface User {
  key: string;
  name: string;
  age: number;
  address: string;
}

const columns: ColumnsType<User> = [
  { title: 'Name', dataIndex: 'name', key: 'name', width: 120 },
  { title: 'Age', dataIndex: 'age', key: 'age', width: 80 },
  { title: 'Address', dataIndex: 'address', key: 'address' },
];

const data: User[] = [
  { key: '1', name: 'Jack', age: 28, address: 'Somewhere' },
  { key: '2', name: 'Rose', age: 36, address: 'Somewhere else' },
];

export default () => <Table columns={columns} data={data} />;

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Properties

Methods

scrollTo

Table component exposes scrollTo method to scroll to a specific position:

const tblRef = useRef();
tblRef.current?.scrollTo({ key: 'rowKey', align: 'start' });

Column Props

Summary Props

Table.Summary

Table.Summary.Row

Development

npm install
npm start

The dumi site runs at http://localhost:8000 by default.

Run checks before sending a pull request:

npm run lint
npm run tsc
npm test
npm run build

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

Ecosystem

This package is part of the React Component organization and is maintained alongside Ant Design. The Ant Design mark above is used only as ecosystem context; the package itself stays framework-level and unstyled except for its bundled assets.

License

@rc-component/table is released under the MIT license.