1 | # rc-table
|
2 |
|
3 | React table component with useful functions.
|
4 |
|
5 | [![NPM version][npm-image]][npm-url]
|
6 | [![build status][travis-image]][travis-url]
|
7 | [![Test coverage][codecov-image]][codecov-url]
|
8 | [![Dependencies][david-image]][david-url]
|
9 | [![DevDependencies][david-dev-image]][david-dev-url]
|
10 | [![npm download][download-image]][download-url]
|
11 | [![bundle size][bundlephobia-image]][bundlephobia-url]
|
12 |
|
13 | [npm-image]: http://img.shields.io/npm/v/rc-table.svg?style=flat-square
|
14 | [npm-url]: http://npmjs.org/package/rc-table
|
15 | [travis-image]: https://img.shields.io/travis/react-component/table.svg?style=flat-square
|
16 | [travis-url]: https://travis-ci.org/react-component/table
|
17 | [coveralls-image]: https://img.shields.io/coveralls/react-component/table.svg?style=flat-square
|
18 | [coveralls-url]: https://coveralls.io/r/react-component/table?branch=master
|
19 | [codecov-image]: https://img.shields.io/codecov/c/github/react-component/table/master.svg?style=flat-square
|
20 | [codecov-url]: https://codecov.io/gh/react-component/table/branch/master
|
21 | [david-url]: https://david-dm.org/react-component/table
|
22 | [david-image]: https://david-dm.org/react-component/table/status.svg?style=flat-square
|
23 | [david-dev-url]: https://david-dm.org/react-component/table?type=dev
|
24 | [david-dev-image]: https://david-dm.org/react-component/table/dev-status.svg?style=flat-square
|
25 | [download-image]: https://img.shields.io/npm/dm/rc-table.svg?style=flat-square
|
26 | [download-url]: https://npmjs.org/package/rc-table
|
27 | [bundlephobia-url]: https://bundlephobia.com/result?p=rc-table
|
28 | [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-table
|
29 |
|
30 | ## install
|
31 |
|
32 | [![rc-table](https://nodei.co/npm/rc-table.png)](https://npmjs.org/package/rc-table)
|
33 |
|
34 | ## Development
|
35 |
|
36 | ```
|
37 | npm install
|
38 | npm start
|
39 | ```
|
40 |
|
41 | ## Example
|
42 |
|
43 | http://react-component.github.io/table/examples/
|
44 |
|
45 | ## Usage
|
46 |
|
47 | ```js
|
48 | import Table from 'rc-table';
|
49 |
|
50 | const columns = [
|
51 | {
|
52 | title: 'Name',
|
53 | dataIndex: 'name',
|
54 | key: 'name',
|
55 | width: 100,
|
56 | },
|
57 | {
|
58 | title: 'Age',
|
59 | dataIndex: 'age',
|
60 | key: 'age',
|
61 | width: 100,
|
62 | },
|
63 | {
|
64 | title: 'Address',
|
65 | dataIndex: 'address',
|
66 | key: 'address',
|
67 | width: 200,
|
68 | },
|
69 | {
|
70 | title: 'Operations',
|
71 | dataIndex: '',
|
72 | key: 'operations',
|
73 | render: () => <a href="#">Delete</a>,
|
74 | },
|
75 | ];
|
76 |
|
77 | const data = [
|
78 | { name: 'Jack', age: 28, address: 'some where', key: '1' },
|
79 | { name: 'Rose', age: 36, address: 'some where', key: '2' },
|
80 | ];
|
81 |
|
82 | React.render(<Table columns={columns} data={data} />, mountNode);
|
83 | ```
|
84 |
|
85 | ## API
|
86 |
|
87 | ### Properties
|
88 |
|
89 | | Name | Type | Default | Description |
|
90 | | --- | --- | --- | --- |
|
91 | | 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 |
|
92 | | prefixCls | String | rc-table | |
|
93 | | className | String | | additional className |
|
94 | | id | String | | identifier of the container div |
|
95 | | useFixedHeader | Boolean | false | whether use separator table for header. better set width for columns |
|
96 | | 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 |
|
97 | | expandable | Object | | Config expand props |
|
98 | | expandable.defaultExpandAllRows | Boolean | false | Expand All Rows initially |
|
99 | | expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys |
|
100 | | expandable.expandedRowKeys | String[] | | current expanded rows keys |
|
101 | | expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode | | Content render to expanded row |
|
102 | | expandable.expandedRowClassName | Function(recode, index, indent):string | | get expanded row's className |
|
103 | | expandable.expandRowByClick | boolean | | Support expand by click row |
|
104 | | expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false |
|
105 | | expandable.expandIcon | props => ReactNode | | Customize expand icon |
|
106 | | expandable.indentSize | Number | 15 | indentSize for every level of data.i.children, better using with column.width specified |
|
107 | | expandable.rowExpandable | (record) => boolean | | Config row support expandable |
|
108 | | expandable.onExpand | Function(expanded, record) | | function to call when click expand icon |
|
109 | | expandable.onExpandedRowsChange | Function(expandedRows) | | function to call when the expanded rows change |
|
110 | | 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. |
|
111 | | rowClassName | string or Function(record, index, indent):string | | get row's className |
|
112 | | rowRef | Function(record, index, indent):string | | get row's ref key |
|
113 | | data | Object[] | | data record array to be rendered |
|
114 | | onRow | Function(record, index) | | Set custom props per each row. |
|
115 | | onHeaderRow | Function(record, index) | | Set custom props per each header row. |
|
116 | | showHeader | Boolean | true | whether table head is shown |
|
117 | | title | Function(currentData) | | table title render function |
|
118 | | footer | Function(currentData) | | table footer render function |
|
119 | | emptyText | React.Node or Function | `No Data` | Display text when data is empty |
|
120 | | columns | Object[] | | The columns config of table, see table below |
|
121 | | components | Object | | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details |
|
122 |
|
123 | ## Column Props
|
124 |
|
125 | | Name | Type | Default | Description |
|
126 | | --- | --- | --- | --- |
|
127 | | key | String | | key of this column |
|
128 | | className | String | | className of this column |
|
129 | | colSpan | Number | | thead colSpan of this column |
|
130 | | title | React Node | | title of this column |
|
131 | | dataIndex | String | | display field of the data record |
|
132 | | width | String \| Number | | width of the specific proportion calculation according to the width of the columns |
|
133 | | fixed | String \| Boolean | | this column will be fixed when table scroll horizontally: true or 'left' or 'right' |
|
134 | | align | String | | specify how cell content is aligned |
|
135 | | ellipsis | Boolean | | specify whether cell content be ellipsized |
|
136 | | onCell | Function(record, index) | | Set custom props per each cell. |
|
137 | | onHeaderCell | Function(record) | | Set custom props per each header cell. |
|
138 | | 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 |
|
139 |
|
140 | ## License
|
141 |
|
142 | rc-table is released under the MIT license.
|