{"id":14864,"library":"rc-table","title":"rc-table - React Table Component","description":"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.","status":"active","version":"7.55.1","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/table","tags":["javascript","react","react-table","table","component","ui","typescript"],"install":[{"cmd":"npm install rc-table","lang":"bash","label":"npm"},{"cmd":"yarn add rc-table","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-table","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component rendering.","package":"react","optional":false},{"reason":"Peer dependency for React component rendering.","package":"react-dom","optional":false}],"imports":[{"note":"The primary `Table` component is exported as a default export.","wrong":"import { Table } from 'rc-table'; // Incorrect named import for the default export","symbol":"Table","correct":"import Table from 'rc-table';"},{"note":"Always use `import type` for type-only imports to ensure they are stripped during compilation, especially in TypeScript projects.","wrong":"import { TableProps } from 'rc-table'; // Imports the type as a value, which can cause issues with bundlers or runtime errors.","symbol":"TableProps","correct":"import type { TableProps } from 'rc-table';"},{"note":"CommonJS users cannot import types directly; types are primarily for TypeScript consumers. Named exports for types should use `import type`.","wrong":"const { ColumnType } = require('rc-table'); // CommonJS does not support type imports directly, and this would try to access a non-existent runtime export.","symbol":"ColumnType","correct":"import type { ColumnType } from 'rc-table';"}],"quickstart":{"code":"import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport Table from 'rc-table';\nimport type { ColumnType } from 'rc-table';\n\ninterface DataType {\n  key: string;\n  name: string;\n  age: number;\n  address: string;\n}\n\nconst columns: ColumnType<DataType>[] = [\n  {\n    title: 'Name',\n    dataIndex: 'name',\n    key: 'name',\n    width: 100,\n  },\n  {\n    title: 'Age',\n    dataIndex: 'age',\n    key: 'age',\n    width: 100,\n  },\n  {\n    title: 'Address',\n    dataIndex: 'address',\n    key: 'address',\n    width: 200,\n  },\n  {\n    title: 'Operations',\n    dataIndex: '',\n    key: 'operations',\n    render: () => <a href=\"#\">Delete</a>,\n  },\n];\n\nconst data: DataType[] = [\n  { name: 'Jack', age: 28, address: 'some where', key: '1' },\n  { name: 'Rose', age: 36, address: 'some where', key: '2' },\n];\n\nfunction App() {\n  return <Table<DataType> columns={columns} data={data} />; \n}\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<App />);\n} else {\n  console.error('Root element not found');\n}","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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`.","severity":"breaking","affected_versions":">=7.55.1"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=7.x"},{"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.","message":"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`.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use `import Table from 'rc-table';` for ES modules. For CommonJS, use `const Table = require('rc-table');` (without curly braces).","cause":"Attempting to use `Table` as a named import when it's a default export, or using `require` with an incorrect destructuring pattern.","error":"Table is not a function"},{"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.","cause":"This typically occurs when the `data` prop is `undefined` or `null`, or `columns` is malformed, leading to internal iteration errors.","error":"TypeError: Cannot read properties of undefined (reading 'length')"},{"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 }`.","cause":"The `useFixedHeader` or `scroll` props are enabled, but individual column `width` properties are missing, preventing correct layout calculation.","error":"Fixed header or scrolling not working / columns misaligned"}],"ecosystem":"npm"}