仿ant-design的react 原生初级表格组件（搜索，筛选，过滤，编辑等功能）

import React from 'react';
import Helmet from 'react-helmet';
import { Table, Modal, Tooltip, Input, message, Button, Tabs, Upload, Popconfirm } from 'antd';

import Header from '../../core/components/breadHead';
import xian from '../../core/lib/xian.js';

import { Pagination, UploadImage, SearchForm, ShowForm } from '../../xianModules/';
import { util } from '../../../utility/';
const log = [];
const headers = [{
            title: '员工号',
            key: 'staffNo',
            dataIndex: 'staffNo',
            render: (text, record) => xian.formatMoney(text),
        }, {
            title:'昵称',
            key: 'name',
            dataIndex: 'department',
        }, { 
            title:'姓名',
            key: 'realName',
            dataIndex: 'department',
            render: (text, record) => {
                return(
{text}
{record.role}
);
            },
        }, {
            title:'部门',
            key: 'department',
            dataIndex: 'department',
        }];
const obj = [{
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'zDWSxWYFXybQrbn93',
    staffNo : '18',
    name : 'kim',
    realName : 'kim',
    department : '运营部',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}, {
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'axCpbEN99jsmCpZER',
    staffNo : '22',
    name : 'leo',
    realName : 'leo',
    department : '运营部',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}, {
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'jfQpADo3PaMkjLfB8',
    staffNo : '02',
    name : '袁益琴',
    realName : '袁益琴',
    department : '采购部',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}, {
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'roiMQ8PHPQ8t3ERCr',
    staffNo : '53',
    name : 'kim',
    realName : '何庆',
    department : '鲜库',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}];
let preSearchData = [];
export default class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: obj,
        }
    }
    componentWillMount() {
        // 加载component时执行
        const self = this;
        const { hasUser } = self.props;
        const { router } = self.context;

        if (!hasUser) {
            router.push('/login');
        }
        this.logSetState();
    }

    componentDidMount() {
        document.onkeydown = ((e) => {
            if (e.altKey && e.keyCode === 90) {
                this.replay();
            }
        });
    }
    replay() {
        if (log.length === 0) {
            console.warn('No State to replay');
            return;
        }
        let idx = -1;
        const interval = setInterval( function() {
            idx ++;
            if (idx === log.length - 1) {
                clearInterval(interval);
            }
            this.setState(log[idx]);
        }.bind(this), 2000);
    }
    logSetState (newState) {
        if (log.length < 20 ) {
            log.push( log.length === 0 ? this.state : newState );
        } else {
            log.splice(1, 1);
            log.push(newState);
        }
        // this.setState(newState);
    }
    handleTableChange(pagination, filters, sorter) {
        const { current, pageSize } = pagination;
        const { condition } = this.state;

        this.fetch({
            current,
            pageSize,
            condition,
        });
    }

    render() {
        const { data = obj, sortby, edit } = this.state;
       
        return (
            

                
                

                

                    搜索
            
                    
                            {
                                headers.map((colum, index) => {
                                    return ();
                                })
                            }
                            
                            {
                                headers.map((colum, index) => {
                                    return ();
                                })
                            }
                            

                            {
                                data.map((item, index) => {
                                    return (
                                        
                                        {
                                            headers.map((colum, idx) => {
                                                const value = item[colum.key];
                                                
                                                return (                 
                                                            
                                                );
                                            })
                                        }
                                        
                                    );
                                })
                            }
                        

                        

                            
{colum.title}{ sortby === colum.key ? this.state.descending ? '\u2191' : '\u2193' : ''}
                        
                        

                            

                                                       { colum.render ? colum.render(value, item) : value }
                                                    
                       
                    
                
            
        );
    }
    sort(e) {
        const column = headers[e.target.cellIndex].key;
        const datas = this.state.data.slice();
        const descending = this.state.sortby === column && !this.state.descending;
        datas.sort((a, b) => { 
            return descending ? a[column] > b[column] : a[column] < b[column];
        });
        this.setState({
            data: datas,
            sortby: column,
            descending: descending,
        });
        this.logSetState(this.state);
    }
    shorEditor(e) {
        this.setState({
            edit: {
                row: parseInt(e.target.dataset.row, 10),
                cell: e.target.cellIndex,
            },
        });
        this.logSetState(this.state);
    }
    handleChange(e) {
        // console.log(e.target.value);
        const data = this.state.data.slice();
        data[this.state.edit.row][headers[this.state.edit.cell].key] = e.target.value;
        this.setState({
            edit: null,
            data: data,
        });
    }
    toogleSearch(e) {
        if (this.state.search) {
            this.setState({
                data: preSearchData,
                search: false,
            });
            preSearchData = [];
        } else {
            preSearchData = this.state.data;
            this.setState({
                search: true,
            });
        }
        this.logSetState(this.state);
    }
    search(e) {
        if (this.state.search) {
            const needle = e.target.value.toLowerCase();
            if (!needle) {
                this.setState({
                    data: preSearchData,
                });
                return;
            }
            const idx = e.target.dataset.idx;
            // console.log(row[idx]);
            const searchdata = preSearchData.filter((row) => {
                // console.log(row[headers[idx].key]);
                return row[headers[idx].key].toString().toLowerCase().indexOf(needle) > -1;
            });
            this.setState({ data: searchdata });
            this.logSetState(this.state);
        }   
    }
}

Page.contextTypes = {
    router: React.PropTypes.object,
};