nikogu / table

Table UI Component For React

rc-table

react table component

install

Development

npm install
npm start

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}];

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

API

property

columns

• The columns config of table

  • 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.