rc-table

library7.55.1jsnpmunverified

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.

npm install rc-table

github ↗package ↗

INSTALL

IMPORT

SIG · RC-TABLE

rc-table

javascriptv7.55.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Table

✓ import Table from 'rc-table';

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

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

TableProps

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

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

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

ColumnType

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

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

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

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'); }

Debug

Known issues

breakingVersion `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.

affects: >=7.55.1

gotchaWhen 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.

affects: >=7.x

gotchaThe 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.

affects: All versions

Errors

Common errors & fixes

Table is not a function

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')

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

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 }`.

Upgrade

Version history

7.55.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React component rendering.

react-domrequiredPeer dependency for React component rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/table ↗

packagehttps://www.npmjs.com/package/rc-table ↗