rc-table

What is rc-table?

The rc-table npm package is a React component for rendering tables. It provides a range of features for creating and managing tables in a React application, including customizable columns, sorting, pagination, and more.

What are rc-table's main functionalities?

Customizable columns

Define the structure of the table by specifying columns with titles, data indexes, and keys.

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' }
];

<Table columns={columns} dataSource={data} />

Pagination

Easily paginate your table data by providing a pagination configuration object.

<Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} />

Sorting

Enable sorting on columns by providing a sorter function.

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name', sorter: (a, b) => a.name.length - b.name.length },
  { title: 'Age', dataIndex: 'age', key: 'age', sorter: (a, b) => a.age - b.age }
];

<Table columns={columns} dataSource={data} />

Selection

Allow row selection and handle selected rows with a callback function.

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  }
};

<Table rowSelection={rowSelection} columns={columns} dataSource={data} />

Expandable Rows

Create expandable rows to show additional information about a row.

const expandedRowRender = record => <p>{record.description}</p>;

<Table columns={columns} expandedRowRender={expandedRowRender} dataSource={data} />

Other packages similar to rc-table

react-table

react-table is a lightweight, fast and extendable datagrid built for React. It offers similar functionalities like customizable columns, sorting, and pagination. It is more of a hooks-based library which allows for more customizability and complex features.

ag-grid-react

ag-grid-react is a React wrapper for ag-Grid which is a feature-rich datagrid available for multiple frameworks. It provides advanced features like filtering, tree data, and master/detail views. It is more complex and suitable for enterprise-level applications.

material-table

material-table is built on Material-UI and offers a modern design. It includes features like sorting, searching, exporting, and inline editing. It is a good choice for those who prefer Material Design and want a table with a lot of built-in features.

README

rc-table

React table component with useful functions.

install

Development

npm install
npm start

Example

https://table-react-component.vercel.app/

Usage

import Table from 'rc-table';

const columns = [
  {
    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 = [
  { name: 'Jack', age: 28, address: 'some where', key: '1' },
  { name: 'Rose', age: 36, address: 'some where', key: '2' },
];

React.render(<Table columns={columns} data={data} />, mountNode);

API

Properties

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.expandedRowClassName	Function(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

Column Props

Name	Type	Default	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

Summary Props

Table.Summary

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.

Table.Summary.Row

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.

License

rc-table is released under the MIT license.