如何从材料 ui 表中隐藏列标题

Question

我有一套素材ui表头

const columns = [
    { id: 'id', label: 'ID', hide: true},
    { id: 'username', label: 'User Name', },
    { id: 'fullname', label: 'Full Name', },
    { id: 'phone', label: 'Phone Name', },
    { id: 'phone', label: 'Phone Name', },
   
  ];

所以我想显示除 ID 之外的所有字段名称，我在下面的代码中尝试过

ID

我的代码

 {columns.map((column) => (
                <TableCell
                  key={column.id}
                  align={column.align}
                  style={{ top: 57, minWidth: column.minWidth }}
                  hide={column.hide}
                
                >
                  {column.label}
                </TableCell>
              ))}

这对我不起作用。还尝试了选项：{display: none} 对我不起作用。任何帮助将不胜感激。

Answer 1

您应该能够在代码中使用三元运算符进行条件渲染。考虑一下：

const columns = [
    { ..., hide: true}, // hide this column by using hide: true
    { label: "hello world", hide: false }
    // more columns...
];

const emptyTableCell = <TableCell/>

{ columns.map((column) => (column.hide) ? emptyTableCell : <TableCell>{column.label}<TableCell/>) }