Installation

npm i ant-table-columns

or

yarn add ant-table-columns

Examples

import { TableMenuModal, comLocalData } from 'ant-table-columns';
  state={
    columnsModalState: false
  }
  
  tableColumns = [
    {
      title: '运单号',
      dataIndex: 'orderSn',
      key: 'orderSn',
      align: 'left',
      width:150,
    }
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      fixed: 'right',
    }
  ];

  /**
   * 点击事件处理自定义弹窗modal的出现
   */
  customEvent = () => {
    this.setState({
      columnsModalState: true
    })
  }

  handleCancel= () => {
    this.setState({
      columnsModalState: false
    })
  }

  render() {
    const localName='component:list'; //命名localstorage  尽量用组件名称保证不重复
    const curColumns = comLocalData(this.tableColumns,localName);
    const scrollWidth = curColumns.map(item => (item.width || 120)).reduce((pre, next) => {
      return pre + next
    }, 0);  //这里处理操作栏固定在右侧的情况 
   
    return (
      <Button type="primary" ghost onClick={this.customEvent}>自定义列表</Button>  
      <Table
        columns={curColumns}
        scroll={{ x:scrollWidth }} 
      />
      {this.state.columnsModalState &&
        <TableMenuModal
          modalState={this.state} //modal的状态 Object|Boolean
          handleCancel={this.handleCancel}
          curColumns={JSON.parse(JSON.stringify(this.tableColumns))}
          localName={localName}
          limitCount={10}  //控制最少选择几个 注:已默认过滤掉操作栏 非必填
          disabledKey={['operation','businessCode']} //控制不能勾掉的列表头 非必填
          className='owner-name' //自定义类名  String|css modules 非必填
        />
      }
    )
  }

Preview

Dependencies

Package | Version | Dev --- |:---:|:---: antd | 3.8.2 | ✔ react | 16.4.1 | ✔