GITHUB SNAPSHOT

react-component/table

TopGit repo profile for react-component/table, with GitHub repository stats and README context.

Stars

★ 1.4k

Forks

⑂ 619

Language

TypeScript

Topic

Frontend

License

MIT

Updated

22d ago

Contributors

👥 133

Homepage

View ↗

View on GitHub ↗

QUICK VERDICT

react-component/table — 1.4k★ on GitHub (TypeScript). 📋 Low-level table primitives for React, maintained in the Ant Design ecosystem.

Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.

WHY NO REVIEW YET

TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.

Snapshot

Stars★ 1.4k

Forks⑂ 619

LanguageTypeScript

TopicFrontend

LicenseMIT

Homepage

View ↗

Read our review methodology ↗

Top contributors

Show top contributors

Top 21 contributors to react-component/table

Name	Type	Default	Description
tableLayout	`auto` \| `fixed`	`auto` \| `fixed` for any columns is fixed or ellipsis or header is fixed	https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
prefixCls	String	`rc-table`
className	String		additional className
id	String		identifier of the container div
useFixedHeader	Boolean	false	whether use separator table for header. better set width for columns
scroll	Object	{x: false, y: false}	whether table can be scroll in x/y direction, `x` or `y` can be a number that indicated the width and height of table body
expandable	Object		Config expand props
expandable.defaultExpandAllRows	Boolean	false	Expand All Rows initially
expandable.defaultExpandedRowKeys	String[]	[]	initial expanded rows keys
expandable.expandedRowKeys	String[]		current expanded rows keys
expandable.expandedRowRender	Function(recode, index, indent, expanded):ReactNode		Content render to expanded row
expandable.forceRender	Boolean	false	Force render expanded row content before expansion. In virtual mode, only rows currently mounted by the virtual list are force-rendered; off-screen rows may still be unmounted
expandable.expandedRowClassName	`string` \| `(recode, index, indent) => string`		get expanded row's className
expandable.expandRowByClick	boolean		Support expand by click row
expandable.expandIconColumnIndex	Number	0	The index of expandIcon which column will be inserted when expandIconAsCell is false
expandable.expandIcon	props => ReactNode		Customize expand icon
expandable.indentSize	Number	15	indentSize for every level of data.i.children, better using with column.width specified
expandable.rowExpandable	(record) => boolean		Config row support expandable
expandable.onExpand	Function(expanded, record)		function to call when click expand icon
expandable.onExpandedRowsChange	Function(expandedRows)		function to call when the expanded rows change
expandable.fixed	String \| Boolean	-	this expand icon will be fixed when table scroll horizontally: true or `left` or `right` and `expandIconColumnIndex` need to stay first or last
rowKey	string or Function(record, index):string	'key'	If rowKey is string, `record[rowKey]` will be used as key. If rowKey is function, the return value of `rowKey(record, index)` will be use as key.
rowClassName	string or Function(record, index, indent):string		get row's className
rowRef	Function(record, index, indent):string		get row's ref key
data	Object[]		data record array to be rendered
onRow	Function(record, index)		Set custom props per each row.
onHeaderRow	Function(record, index)		Set custom props per each header row.
showHeader	Boolean	true	whether table head is shown
hidden	Boolean	`false`	Hidden column.
title	Function(currentData)		table title render function
footer	Function(currentData)		table footer render function
emptyText	React.Node or Function	`No Data`	Display text when data is empty
columns	Object[]		The columns config of table, see table below
components	Object		Override table elements, see #171 for more details
sticky	boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement }	false	stick header and scroll bar
summary	(data: readonly RecordType[]) => React.ReactNode	-	`summary` attribute in `table` component is used to define the summary row.
rowHoverable	boolean	true	Table hover interaction

Name	Type	Default	Description
index	number	-	Row index to scroll to
top	number	-	Scroll to specific top position (in px)
key	string	-	Scroll to row by row key
offset	number	-	Additional offset from target position
align	`start` \| `center` \| `end` \| `nearest`	`nearest`	Alignment of the target element within the scroll container. `start` aligns to top, `center` to middle, `end` to bottom, `nearest` automatically chooses the closest alignment. Note: Virtual table does not support `center`.

Name	Type	Description
key	String	key of this column
className	String	className of this column
colSpan	Number	thead colSpan of this column
title	React Node	title of this column
dataIndex	String	display field of the data record
width	String \| Number	width of the specific proportion calculation according to the width of the columns
minWidth	Number	the minimum width of the column, only worked when tableLayout is auto
fixed	String \| Boolean	this column will be fixed when table scroll horizontally: true or 'left' or 'right'
align	String	specify how cell content is aligned
ellipsis	Boolean	specify whether cell content be ellipsized
rowScope	'row' \| 'rowgroup'	Set scope attribute for all cells in this column
onCell	Function(record, index)	Set custom props per each cell.
onHeaderCell	Function(record)	Set custom props per each header cell.
render	Function(value, row, index)	The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan

Name	Type	Default	Description
key	String		key of this summary
fixed	boolean \| 'top' \| 'bottom'	-	`true` fixes the summary row at the bottom of the table. `top` fixes the summary row at the top of the table, while `bottom` fixes it at the bottom. `undefined` or `false` makes the summary row scrollable along with the table.

Name	Type	Default	Description
key	String		key of this summary
className	String	-	className of this summary row
style	React.CSSProperties	-	style of this summary row
onClick	(e?: React.MouseEvent<HTMLElement>) => void	-	The `onClick` attribute in `Table.Summary.Row` component can be used to set a click event handler for the summary row.

Related repositories

FREQUENTLY ASKED

Quick answers

How does react-component/table compare to other Frontend projects?

react-component/table is tracked by TopGit in the Frontend category, with 1.4k GitHub stars and written in TypeScript. Browse the Frontend topic page on TopGit to compare it against similar projects by stars and activity.

How many stars does react-component/table have?

react-component/table has 1.4k GitHub stars — refresh the page for the live number, or check github.com/react-component/table. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.

Is react-component/table open source?

Yes — react-component/table ships under the MIT license, which makes its source code freely readable (and, depending on license terms, forkable and reusable). Source: github.com/react-component/table.

What else is in the Frontend space?

react-component/table is tracked by TopGit under the Frontend category, alongside 5 GitHub-tagged topics. Trending and Topics pages list peer repositories of comparable stars and language.

What is react-component/table?

react-component/table (react-component/table) is a TypeScript project on GitHub. From the project's own README: 📋 Low-level table primitives for React, maintained in the Ant Design ecosystem.

Where can I see react-component/table in action?

The project maintains a homepage at https://react-component.github.io/table. The README tab on this page also usually contains screenshots and a quickstart.

Where do I read more about react-component/table?

This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/react-component/table is the definitive source.

Read full README in the tab above.

Is table worth your time?

ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of table.

Ask ChatGPT Ask Claude Ask Perplexity Ask Google AI Mode Ask Kimi Ask Grok

GitHub

react-component/table

Snapshot

Top contributors

@rc-component/table

Highlights

Install

Usage

Examples

API

Properties

Methods

scrollTo

Column Props

Summary Props

Table.Summary

Table.Summary.Row

Development

Release

Ecosystem

License

Related repositories

Quick answers

Is table worth your time?