rc-table

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} />