根据用户对react-table : React+Typescript的选择动态显示/隐藏列

import React, { Component } from "react";
import { useTable, Column } from "react-table";

class ReactTableExample extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      columns: [
        {
          Header: "Name",
          accessor: "name"
        },
        {
          Header: "Age",
          accessor: "age"
        },
        {
          Header: "Address",
          accessor: "address"
        },
        {
          Header: "Email",
          accessor: "email"
        }
      ],
      visibleColumns: ["Name", "Age", "Address", "Email"]
    };
  }
  
  render() {
    const { columns, visibleColumns } = this.state;

    const tableInstance = useTable({
      columns: columns.filter(column => visibleColumns.includes(column.Header)),
      data: yourDataArray
    });
    
    return (
      <table>
        <thead>
          <tr>
            {tableInstance.headerGroups.map(headerGroup => (
              <th {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </th>
                ))}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {tableInstance.rows.map(row => {
            tableInstance.prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

export default ReactTableExample;