@eatong/reactable NPM

reactable

react table

Install

npm install --save @eatong/reactable

roadmap

basic table showing
header resizeable
fixed header
fixed columns
auto width
cached width
fixed column at right side
cell animation when value changed
row selection
effective edit
fixed footer row
child row
full row render
children header
custom row class
column column class
custom cell class
cell editable
row animation
disable row selection
keyboard navigation
pagination
hide column
column filter and column sort

Usage

import React, {Component} from 'react'
import 'antd/dist/antd.css';
import Reactable from 'reactable'

const columns = [
  {title: 'aaa', dataIndex: 'a', fixed: true},
  {title: 'bbbb', dataIndex: 'b', width: 200},
  {title: 'ccc', dataIndex: 'c', width: 'auto'},
  {title: 'ddd', dataIndex: 'd', width: 'auto', editRender: () => <input/>},
  {title: 'eee', dataIndex: 'e', width: '150', fixed: 'right'},
  {title: 'ffff', dataIndex: 'f', fixed: true}
];

export default class App extends Component {
  state = {
    dataSource: [
      {
        id: 1,
        a: '11111',
        b: '1b1b11',
        c: '1c1c1c1c11',
        d: '1d1d1d1d1d1d1d1d',
        e: '1e1e1e1e1e1ee1',
        children: [
          {id: `child-key-0`, a: '000000aaa', b: '0000bbb', c: '0000ccc', d: '000ddd', e: '000eee', f: 'fff'}
        ]
      },
      {
        id: 2,
        a: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaa',
        b: 'bbbbbbb',
        c: 'cccccc',
        d: 'dddddd',
        e: 'eeeeeeeeeeeeeee',
        children: [
          {id: `child-key-1`, a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd', e: 'eee', f: 'fff'}
        ]
      },
      {id: 3, a: 'aasdf', b: '23234', c: 'asdfasfd', d: '333232333', e: '2323232'},
      {id: 4, a: 'eee', b: '234sdfw4rq2334q2342', c: 'aaaaa', d: '33333', e: 'aaaa'},
      {id: 5, a: 'fasd cv', b: 'asdfa243232323', c: '234243rwefdsars', d: '34ewerfdas', e: '234qrwaefsdasdf'},
      {id: 6, a: 'sdfasdf24rwfsd', b: 'asd2r13rt', c: '23rfgsterwq4r34', d: '234q2weafsdtg', e: 'asdrq12r3egsdf'}
    ]
  };

  componentWillMount() {
    setTimeout(() => {
      const {dataSource} = this.state;
      dataSource[0].a = 'dasfaslkdfjas;dlfjk';
      this.setState({dataSource: [...dataSource]});
      // this.setState({dataSource: [...this.state.dataSource, ...this.generateDataSource()]})
    }, 3000)
  }

  generateDataSource() {
    const dataSource = [];
    for (let i = 0; i < 100; i++) {
      dataSource.push(
        {
          id: 'key' + i,
          a: `aaaa：」${Math.random()}`,
          b: `bbbb：」${Math.random()}`,
          c: `c：」${Math.random()}`,
          d: `d：」${Math.random()}`,
          e: `e：」${Math.random()}`,
          children: [
            {id: `child-key-${0}`, a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd', e: 'eee', f: 'fff'}
          ]
        })
    }
    return dataSource;
  }

  render() {
    return (
      <div className={'reactable-test'}>
        <Reactable
          editMode
          columns={columns}
          dataSource={this.state.dataSource}
          onTableReady={table => this.table = table}
          getRowClass={(row, index) => index % 2 ? 'odd' : 'even'}
          getCellClass={(row, index, column) => index}
          rowSelection={{
            // type: 'radio',
            onChange: (a, b, c) => {
              console.log(a, b, c);
            }
          }}
          onChangeCell={(value, index, key) => this.table.updateCell(index + 1, 'c', value)}
        />

        <button onClick={() => {
          this.table.updateCell(1 + ~~(Math.random() * 6), 'a', Math.random());
          this.table.updateCell(1 + ~~(Math.random() * 6), 'b', Math.random());
          this.table.updateCell(1 + ~~(Math.random() * 6), 'c', Math.random());
          this.table.updateCell(1 + ~~(Math.random() * 6), 'd', Math.random());
          this.table.updateCell(1 + ~~(Math.random() * 6), 'e', Math.random());
        }}>
          update random cell value
        </button>
        <button onClick={() => this.table.updateRow(1, {a: 'new A', b: 'new b', c: 'new c', d: 'new d', e: 'new e'})}>
          update key 1
        </button>
        <button onClick={() => {
          this.table.addRows([{a: 1, b: 2, c: 3, d: 4, e: 5, id: Math.random()}], 0, {autoScroll: true});
        }}>
          add row
        </button>
        <button onClick={() => {
          this.table.addRows([{a: 1, b: 2, c: 3, d: 4, e: 5, id: Math.random()}], null, {autoScroll: true});
        }}>
          add row at end
        </button>
        <button onClick={() => {
          const data = {a: 1, b: 2, c: 3, d: 4, e: 5, id: Math.random()};
          const data2 = {a: 11, b: 22, c: 33, d: 44, e: 5, id: Math.random()};
          this.table.addRows([data, data2], ~~(Math.random() * this.table.getDataSource().length), {replace: true});
        }}>
          replace random row
        </button>
      </div>
    )
  }
}