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.
rc-table
react table component
install
Development
npm install
npm start
Example
http://localhost:8000/examples/
online example: http://react-component.github.io/table/examples/
Usage
var React = require('react');
var Table = require('rc-table');
require('rc-table/assets/index.css');
var columns = [
{title: '表头1', dataIndex: 'a', colSpan: 2,key:'a',width: 100},
{id: '123', title: '表头2', dataIndex: 'b', colSpan: 0,key:'b', width: 100, render: function(o, row, index){
let obj ={
children:o,
props:{}
}
if(index === 0){
obj.props.rowSpan = 2;
}
if(index === 1){
obj.props.rowSpan = 0;
}
return obj;
}},
{title: '表头3', dataIndex: 'c', key:'c',width: 200},
{
title: '操作', dataIndex: '', key:'d',render: function () {
return <a href="#">操作</a>
}
}
];
var data = [{a: '123',key:'1'}, {a: 'cdd', b: 'edd',key:'2'}, {a: '1333', c: 'eee', d: 2,key:'3'}];
var table = React.render(
<div>
<h2>simple table</h2>
<Table columns={columns}
data={data}
className="table"/>
</div>,
document.getElementById('__react-content')
);
API
property
name | type | default | description |
---|
prefixCls | String | rc-table | |
---|
className | String | | additional className |
---|
colSpan | Number | | thead colSpan of this column |
---|
useFixedHeader | Boolean | false | whether use separator table for header. better set width for columns |
---|
expandIconAsCell | Boolean | false | whether render expandIcon as a cell |
---|
rowKey | Function(recode,index):string | record.key | default use record.key as rowKey |
---|
rowClassName | Function(recode,index):string | | get row's className |
---|
defaultExpandedRowKeys | String[] | [] | initial expanded rows keys |
---|
expandedRowKeys | String[] | | current expanded rows keys |
---|
onExpandedRowsChange | Function(expandedRows) | save the expanded rows in the internal state | function to call when the expanded rows change |
---|
expandedRowClassName | Function(recode,index):string | | get expanded row's className |
---|
data | Object[] | | data record array to be rendered |
---|
indentSize | Number | 15 | indentSize for every level of data.i.children, better using with column.width specified |
---|
onRowClick | Function(record, index) | | handle rowClick action, index means the index of current row among fatherElement[childrenColumnName] |
---|
columnsPageRange | Array | | columns index range need paging, like [2,10] |
---|
columnsPageSize | Number | 5 | pageSize of columns |
---|
columns | Object[] | |
The columns config of table. contains
name | type | default | description |
---|
key | String | | key of this column |
---|
className | String | | className of this column |
---|
title | React Node | | title of this column |
---|
dataIndex | String | | display field of the data record |
---|
width | String|Number | | he width of the specific proportion calculation according to the width of the columns |
---|
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 |
---|
|
---|
Test Case
http://localhost:8000/tests/runner.html?coverage
Coverage
http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage
License
rc-table is released under the MIT license.