ReactJS Material Table 可以显示布尔值吗

Question

我有一个 material table 当前显示 data 的名字和 id。我也试图在 table 中显示 mode 但它是一个布尔值而不是字符串和整数。它拒绝在 Mui 中显示-Table 这是我唯一能想到的问题。我已经测试过，如果我用 target_path 代替 mode.

也可以工作

如有任何帮助，我将不胜感激

export default function MuiTable(props)
  data=props.data
  return (
    <div>
      <MaterialTable
        icons={tableIcons}
        title="Title"
        columns={[
          { title: 'ID', field: 'id' },
          { title: 'Name', field: 'name' },
          { title: 'Mode', field: 'mode'},
        ]}
        data={data}
        actions={[
          {
            icon: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
            onClick: handleEdit
          },
          {
            icon: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
            onClick: handleDelete
          },
          {
            icon: forwardRef((props, ref) => <NoteAddIcon {...props} ref={ref} color='primary'/>),
            isFreeAction: true,
            onClick: handleRoute,
          }
        ]}
      />
    </div>
  );

我相信 'id'、'name' 和 'mode' 是从 data 中提取的。

5: Object { id: 10, name: "Test", target_path: "/path/to/targets", … }

并展开

id: 10
mode: true
name: "Test"
tableData: Object { id: 5 }
target_path: "/path/to/targets"

Answer 1

您可以检查条件并显示字符串值“True”为真，否则为假。

像这样..

{mode? 'True' : 'false' }

Answer 2

Material-table 允许您覆盖任何列的渲染。例如：

<MaterialTable
    // other props
    columns={[
      {
        field: 'url',
        title: 'Avatar',
        render: rowData => (rowData.mode ? "True" : "False"),
      }
    ]}
/>

ReactJS Material Table 可以显示布尔值吗

Can ReactJS Material Table display a boolean

reactjs

material-ui

material-table