当为autogenerate=false时隐藏数据网格中的列

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

const data = [
  { id: 1, name: 'John', age: 25 },
  { id: 2, name: 'Jane', age: 30 },
  { id: 3, name: 'Bob', age: 35 },
];

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id', visible: true },
  { title: 'Name', dataIndex: 'name', key: 'name', visible: true },
  { title: 'Age', dataIndex: 'age', key: 'age', visible: false },
];

const CustomTable = () => {
  const [columnsState, setColumnsState] = useState(columns);

  const toggleColumn = (columnKey) => {
    const updatedColumns = columnsState.map((column) => {
      if (column.key === columnKey) {
        return { ...column, visible: !column.visible };
      }
      return column;
    });
    setColumnsState(updatedColumns);
  };

  return (
    <Table
      dataSource={data}
      columns={columnsState.filter((column) => column.visible)}
      onHeaderCell={(column) => ({
        onClick: () => toggleColumn(column.key),
      })}
    />
  );
};

export default CustomTable;