基于antd的Table写了一个可扩展列表格

在一些情景下，当Table需要展现的Columns过多时，单纯的滚动条已经无法满足用户的交互体验，此时可能更需要如图所示的可扩展列表格

代码如下，只是一个简单的demo，可根据具体场景打磨细节

import "./styles.css";
import "antd/dist/antd.css";
import * as React from "react";
import { Table, Checkbox, Button, Modal } from "antd";
const { useState, useEffect } = React;
const CheckboxGroup = Checkbox.Group;

export default function App() {
  const [visible, setVisible] = useState<boolean>(false);
  const [dataList, setDataList] = useState<any[]>([]);
  const [checkList, setCheckList] = useState<string[]>([]);
  const [curCheckList, setCurCheckList] = useState<string[]>([]);
  const [checkOptions, setCheckOptions] = useState<string[]>([]);
  const [extendColumnsList, setExtendColumnsList] = useState<any[]>([]);
  useEffect(() => {
    let checkOptions = ["key4", "key5", "key6", "key7", "key8"];
    let dataList = Array.from(new Array(15)).map((item, index) => {
      return {
        name: `可扩展列${index + 1}`,
        key1: `第${index + 1}行的value1`,
        key2: `第${index + 1}行的value2`,
        key3: `第${index + 1}行的value3`,
        key4: `第${index + 1}行的value4`,
        key5: `第${index + 1}行的value5`,
        key6: `第${index + 1}行的value6`,
        key7: `第${index + 1}行的value7`
      };
    });
    setDataList(dataList);
    setCheckOptions(checkOptions);
  }, []);
  const extendColumsChange = () => {
    let extendColumnsList = checkList.map((item) => {
      return { title: item, dataIndex: item, key: item };
    });
    setCurCheckList(checkList);
    setExtendColumnsList(extendColumnsList);
    setVisible(false);
  };
  return (
    <div className="App">
      <div style={{ width: "100%", marginBottom: "20px", overflow: "hidden" }}>
        <Button
          style={{ float: "right" }}
          type={"ghost"}
          onClick={() => {
            setVisible(true);
          }}
        >
          可扩展列
        </Button>
      </div>
      <Table
        dataSource={dataList}
        columns={[
          { title: "name", dataIndex: "name", key: "name" },
          { title: "key1", dataIndex: "key1", key: "key1" },
          { title: "key2", dataIndex: "key2", key: "key2" },
          { title: "key3", dataIndex: "key3", key: "key3" },
          ...extendColumnsList
        ]}
      />
      <Modal
        title={"可扩展列"}
        visible={visible}
        onCancel={() => {
          setVisible(false);
          setCheckList(curCheckList);
        }}
        onOk={extendColumsChange}
      >
        <CheckboxGroup
          options={checkOptions}
          value={checkList}
          onChange={(value) => setCheckList(value)}
        />
      </Modal>
    </div>
  );
}

点击此处，跳转至codesandboox，可在线调试