reactable

react table

Install

npm install --save @eatong/reactable

roadmap

• [x] basic table showing
• [x] header resizeable
• [x] fixed header
• [x] fixed columns
• [x] auto width
• [x] cached width
• [x] fixed column at right side
• [x] cell animation when value changed
• [x] row selection
• [x] effective edit
• [x] fixed footer row
• [x] child row
• [x] full row render
• [X] children header
• [x] custom row class
• [x] column column class
• [x] custom cell class
• [x] cell editable
• [x] row animation
• [x] disable row selection
• [x] keyboard navigation
• [x] pagination
• [x] hide column
• [x] 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>
    )
  }
}

License

MIT © eaTong