@lugia/rc-table
v7.21.3
Published
table ui component for react
Downloads
6
Readme
rc-table
React table component with useful functions.
install
Development
npm install
npm start
Example
https://table.react-component.now.sh/
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):string | 'key' | If rowKey is string, record[rowKey]
will be used as key. If rowKey is function, the return value of rowKey(record)
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 |
| 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 |
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 | | 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 | | 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 |
License
rc-table is released under the MIT license.