rc-table - React Table Component

7.55.1 · active · verified Sun Apr 19

rc-table is a foundational UI component for React applications, designed to provide comprehensive table functionalities without imposing specific styling. It serves as a highly customizable base for building complex data grid interfaces, allowing developers to integrate their own design systems. The current stable version is 7.55.1. The project demonstrates an active release cadence, frequently publishing patch and minor versions to address bugs and introduce new features. Key differentiators include its unopinionated nature regarding aesthetics, offering full control over presentation, while providing robust features such as fixed headers, expandable rows, virtual scrolling (since v1.9.0 of the underlying `@rc-component/table`), and a flexible API for columns and data manipulation.

Common errors

```
Table is not a function
```
cause Attempting to use `Table` as a named import when it's a default export, or using `require` with an incorrect destructuring pattern.

fix Use `import Table from 'rc-table';` for ES modules. For CommonJS, use `const Table = require('rc-table');` (without curly braces).
```
TypeError: Cannot read properties of undefined (reading 'length')
```
cause This typically occurs when the `data` prop is `undefined` or `null`, or `columns` is malformed, leading to internal iteration errors.

fix Ensure both the `columns` and `data` props are always provided as valid array types, even if empty (e.g., `columns={[]} data={[]}`). Check for asynchronous data loading that might initially render the table with undefined props.
```
Fixed header or scrolling not working / columns misaligned
```
cause The `useFixedHeader` or `scroll` props are enabled, but individual column `width` properties are missing, preventing correct layout calculation.

fix Add a `width` property to every column definition in your `columns` array when using fixed headers or scrolling. For example: `{ title: 'Name', dataIndex: 'name', width: 150 }`.

Warnings

breaking Version `7.55.1` reverted a fix introduced in `7.55.0` regarding duplicate unique identifiers in `MeasureRow` column headers (`#1376`). If your application relied on the behavior or fix present in `7.55.0`, you might experience a regression or unexpected behavior after upgrading to `7.55.1`.
Fix: Review your table implementations that might be affected by changes to `MeasureRow` or unique identifiers. If the `v7.55.0` fix was critical for your use case, consider staying on `v7.55.0` if possible, or implementing a custom workaround. Monitor future releases for a re-introduction of the fix.
gotcha When using `useFixedHeader` or the `scroll` prop for horizontal/vertical scrolling, it is crucial to set explicit `width` properties for all columns. Without fixed widths, table layout calculations can be incorrect, leading to misaligned headers, columns, or unexpected scrolling behavior.
Fix: Ensure all `columns` objects include a `width` property with a numerical value (e.g., `width: 100`) when `useFixedHeader` is `true` or `scroll` is configured.
gotcha The project appears to have an associated package `@rc-component/table`, which has its own versioning (`1.x.x`) and features (e.g., React 19 support in `@rc-component/table@1.8.0`). While `rc-table`'s peer dependencies currently state `react: >=16.9.0`, there might be future breaking changes or migration paths if `rc-table` fully integrates or renames to `@rc-component/table`.
Fix: When upgrading `rc-table`, carefully review the changelog for any mentions of `@rc-component/table` or significant internal refactors. Be prepared for potential future updates to peer dependencies or a migration to the `@rc-component/table` package if it becomes the primary offering.

Install

npm install rc-table npm
yarn add rc-table yarn
pnpm add rc-table pnpm

Imports

Table

wrong:

import { Table } from 'rc-table'; // Incorrect named import for the default export

correct:

import Table from 'rc-table';

The primary `Table` component is exported as a default export.

TableProps

wrong:

import { TableProps } from 'rc-table'; // Imports the type as a value, which can cause issues with bundlers or runtime errors.

correct:

import type { TableProps } from 'rc-table';

Always use `import type` for type-only imports to ensure they are stripped during compilation, especially in TypeScript projects.

ColumnType

wrong:

const { ColumnType } = require('rc-table'); // CommonJS does not support type imports directly, and this would try to access a non-existent runtime export.

correct:

import type { ColumnType } from 'rc-table';

CommonJS users cannot import types directly; types are primarily for TypeScript consumers. Named exports for types should use `import type`.

Quickstart

This quickstart demonstrates how to render a basic table with defined columns and data using rc-table in a React TypeScript environment, including type definitions.

import React from 'react';
import { createRoot } from 'react-dom/client';
import Table from 'rc-table';
import type { ColumnType } from 'rc-table';

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

const columns: ColumnType<DataType>[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 100,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 100,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    width: 200,
  },
  {
    title: 'Operations',
    dataIndex: '',
    key: 'operations',
    render: () => <a href="#">Delete</a>,
  },
];

const data: DataType[] = [
  { name: 'Jack', age: 28, address: 'some where', key: '1' },
  { name: 'Rose', age: 36, address: 'some where', key: '2' },
];

function App() {
  return <Table<DataType> columns={columns} data={data} />; 
}

const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
} else {
  console.error('Root element not found');
}

view raw JSON →