如何在material-ui表中隐藏/显示列？

const [columns, setColumns] = useState({
  column1: true,
  column2: true,
  // 更多列...
});

<Table>
  <TableHead>
    <TableRow>
      {columns.column1 && <TableCell>列1</TableCell>}
      {columns.column2 && <TableCell>列2</TableCell>}
      {/* 更多列... */}
    </TableRow>
  </TableHead>
  <TableBody>
    {/* 表格数据 */}
  </TableBody>
</Table>

<FormGroup>
  <FormControlLabel
    control={<Checkbox checked={columns.column1} onChange={() => toggleColumn('column1')} />}
    label="列1"
  />
  <FormControlLabel
    control={<Checkbox checked={columns.column2} onChange={() => toggleColumn('column2')} />}
    label="列2"
  />
  {/* 更多列... */}
</FormGroup>

const toggleColumn = (columnName) => {
  setColumns((prevColumns) => ({
    ...prevColumns,
    [columnName]: !prevColumns[columnName],
  }));
};