react table
npm install @eatong/reactable> react table
 
``bash`
npm install --save @eatong/reactable
- [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
`jsx
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: () => },
{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'}child-key-1
]
},
{
id: 2,
a: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaa',
b: 'bbbbbbb',
c: 'cccccc',
d: 'dddddd',
e: 'eeeeeeeeeeeeeee',
children: [
{id: , 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()},bbbb：」${Math.random()}
b: ,c：」${Math.random()}
c: ,d：」${Math.random()}
d: ,e：」${Math.random()}
e: ,child-key-${0}
children: [
{id: , a: 'aaa', b: 'bbb', c: 'ccc', d: 'ddd', e: 'eee', f: 'fff'}
]
})
}
return dataSource;
}
render() {
return (
``
MIT © eaTong