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 Table = require('rc-table');

var columns = [
  {title : 'header 1',dataIndex :'a', width:100},
  {id: '123',title : 'header 2',dataIndex :'b', width:100},
  {title : 'header 3',dataIndex : 'c',width:200},
  {title : 'operate',dataIndex : '',renderer :function (value,obj) {
    return <a href="#">edit</a>
  }}
];

var data = [{a:'123'},{a:'cdd',b:'edd'},{a:'1333',c:'eee',d:2}];

React.renderComponent(
      <Table columns={columns} data={data} className="table"/>,
      document.getElementById('t1')
);

API

property

rowKey

Function(recode):string

• get key value of each row from each row record data

columns

• The columns config of table
  • key : key of this column
  • title : The title of column
  • dataIndex : display the data field
  • width : The width of column. The width of the specific proportion calculation according to the width of the columns
  • renderer : The render function of cell , has two params. value : the text of this cell;obj : the record of this row

data

• The Data to be shown

className

• The css class this table to be used

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.