React Table

GreatTable.js

import React, {Fragment} from 'react';
import {Row, Col, Table, Button, Checkbox, Dropdown, Menu} from 'antd';


export default class GreatTable extends React.Component {
  state = {
    visible: false,
    columns: [],
  };

  componentWillReceiveProps(nextProps) {
    this.setState({columns: nextProps.columns})
  }

  handleVisibleChange = (flag) => {
    this.setState({ visible: flag });
  };

  handleChecked = (v, i) => {
    const nextColumns = this.state.columns.map((col, id) => {
      return id === i ? {...col, visible: !col.visible} : col
    });
    this.setState({columns: nextColumns})
  };

  render() {
    const {columns, ...rest} = this.props;
    const nextColumns = this.state.columns.filter(column => column.visible);

    const menu = (
      <Menu onClick={() => {}}>
        {this.state.columns.map((option, idx) => {
          return (
            <Menu.Item key={option.key}>
              <Checkbox
                checked={option.visible}
                onChange={e => this.handleChecked(e.target.checked, idx)}
              > {option.title}
              </Checkbox>
            </Menu.Item>
          )
        })}
      </Menu>
    );

    return (
      <Fragment>
        <Row type="flex" justify="end">
          <Col span={2} offset={20}>
            <Dropdown
              overlay={menu}
              placement="bottomLeft"
              visible={this.state.visible}
              onVisibleChange={this.handleVisibleChange}
            >
              <Button style={{margin: 5}}>列表选项</Button>
            </Dropdown>
          </Col>
        </Row>
        <Row>
          <Table {...rest} columns={nextColumns} />
        </Row>
      </Fragment>
    )
  }
}