|
1 | | -# table [](http://spmjs.io/package/table) |
| 1 | +# rc-table |
2 | 2 |
|
3 | | ---- |
| 3 | +react table component |
4 | 4 |
|
| 5 | +[![NPM version][npm-image]][npm-url] |
| 6 | +[![build status][travis-image]][travis-url] |
| 7 | +[![Test coverage][coveralls-image]][coveralls-url] |
| 8 | +[![gemnasium deps][gemnasium-image]][gemnasium-url] |
| 9 | +[![node version][node-image]][node-url] |
| 10 | +[![npm download][download-image]][download-url] |
5 | 11 |
|
| 12 | +[npm-image]: http://img.shields.io/npm/v/rc-table.svg?style=flat-square |
| 13 | +[npm-url]: http://npmjs.org/package/rc-table |
| 14 | +[travis-image]: https://img.shields.io/travis/react-component/table.svg?style=flat-square |
| 15 | +[travis-url]: https://travis-ci.org/react-component/table |
| 16 | +[coveralls-image]: https://img.shields.io/coveralls/react-component/table.svg?style=flat-square |
| 17 | +[coveralls-url]: https://coveralls.io/r/react-component/table?branch=master |
| 18 | +[gemnasium-image]: http://img.shields.io/gemnasium/react-component/table.svg?style=flat-square |
| 19 | +[gemnasium-url]: https://gemnasium.com/react-component/table |
| 20 | +[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square |
| 21 | +[node-url]: http://nodejs.org/download/ |
| 22 | +[download-image]: https://img.shields.io/npm/dm/rc-table.svg?style=flat-square |
| 23 | +[download-url]: https://npmjs.org/package/rc-table |
6 | 24 |
|
7 | | -## Install |
| 25 | +## install |
8 | 26 |
|
9 | | -``` |
10 | | -$ spm install table --save |
11 | | -``` |
| 27 | +[](https://npmjs.org/package/rc-table) |
12 | 28 |
|
13 | 29 | ## Usage |
14 | 30 |
|
15 | 31 | ```js |
16 | | -var table = require('table'); |
| 32 | +var Table = require('rc-table'); |
| 33 | + |
| 34 | + var columns = [ |
| 35 | + {title : 'header 1',dataIndex :'a', width:100}, |
| 36 | + {id: '123',title : 'header 2',dataIndex :'b', width:100}, |
| 37 | + {title : 'header 3',dataIndex : 'c',width:200}, |
| 38 | + {title : 'operate',dataIndex : '',renderer :function (value,obj) { |
| 39 | + return <a href="#">edit</a> |
| 40 | + }} |
| 41 | + ]; |
| 42 | + |
| 43 | + var data = [{a:'123'},{a:'cdd',b:'edd'},{a:'1333',c:'eee',d:2}]; |
| 44 | + |
| 45 | + var table = React.renderComponent( |
| 46 | + <Table columns={columns} data={data} className="table"/>, |
| 47 | + document.getElementById('t1') |
| 48 | + ); |
| 49 | + |
17 | 50 | // use table |
18 | 51 | ``` |
| 52 | +## API |
| 53 | + |
| 54 | +### property |
| 55 | + |
| 56 | +#### columns |
| 57 | + * The columns config of table |
| 58 | + |
| 59 | + * title : The title of column |
| 60 | + * dataIndex : display the data field |
| 61 | + * width : The width of column. The width of the specific proportion calculation according to the width of the columns |
| 62 | + * renderer : The render function of cell , has two params. value : the text of this cell;obj : the record of this row |
| 63 | + |
| 64 | +#### data |
| 65 | + * The Data to be shown |
| 66 | + |
| 67 | +#### className |
| 68 | + * The css class this table to be used |
| 69 | + |
| 70 | +## Development |
| 71 | + |
| 72 | +``` |
| 73 | +npm install |
| 74 | +npm start |
| 75 | +``` |
| 76 | + |
| 77 | +## Test Case |
| 78 | + |
| 79 | +http://localhost:8000/tests/runner.html?coverage |
| 80 | + |
| 81 | +## Coverage |
| 82 | + |
| 83 | +http://localhost:8000/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8004/tests/runner.html?coverage |
| 84 | + |
| 85 | + |
| 86 | + |
| 87 | + |
| 88 | +## License |
| 89 | + |
| 90 | +rc-table is released under the MIT license. |
0 commit comments