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

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
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
expandIconAsCell	Boolean	false	whether render expandIcon as a cell
expandIconColumnIndex	Number	0	The index of expandIcon which column will be inserted when expandIconAsCell is false
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]
columnsPageSize	Number	5	pageSize of columns. (Deprecated, use fixed columns)
columnsPageRange	Array		columns index range need paging, like [2,10]. (Deprecated, use column.fixed)
showHeader	Boolean	true	whether table head is shown
footer	Function(currentData)		table footer render function
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 width of the specific proportion calculation according to the width of the columns fixed String|Boolean this column will be fixed when table scroll horizontally: true or 'left' or 'right' 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.