antd はヘッダー構成の表示を実装します

 antd はヘッダー構成の表示を実装します

import React, { useState } from 'react';
import { Table, Button, Modal, Checkbox } from 'antd';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: '张三',
    age: 18,
    address: '北京市',
  },
  {
    key: '2',
    name: '李四',
    age: 20,
    address: '上海市',
  },
  {
    key: '3',
    name: '王五',
    age: 22,
    address: '广州市',
  },
];

const HeaderConfigTable = () => {
  const [visible, setVisible] = useState(false);
  const [checkedColumns, setCheckedColumns] = useState(columns.map((column) => column.key));

  const handleOk = () => {
    setVisible(false);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleCheckboxChange = (checkedValues) => {
    setCheckedColumns(checkedValues);
  };

  const showModal = () => {
    setVisible(true);
  };

  return (
    <>
      <Button onClick={showModal}>表头配置</Button>
      <Table columns={columns.filter((column) => checkedColumns.includes(column.key))} dataSource={data} />
      <Modal title="表头配置" visible={visible} onOk={handleOk} onCancel={handleCancel}>
        <Checkbox.Group options={columns.map((column) => ({ label: column.title, value: column.key }))} value={checkedColumns} onChange={handleCheckboxChange} />
      </Modal>
    </>
  );
};

export default HeaderConfigTable;