{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-table"],"cli":null},"imports":["import Table from 'rc-table';","import type { TableProps } from 'rc-table';","import type { ColumnType } from 'rc-table';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}