Search code examples
reactjsmaterial-uimaterial-table

Can ReactJS Material Table display a boolean


I have a material table that currently displays the name and id of data. I am trying to also display mode in the table but is a boolean instead of a string and integer. It refuses to display in the Mui-Table That is the only thing I can think of being the issue. I've tested and target_path also works if I substitute it in for mode.

I'd appreciate any help with this

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>
  );

I believe 'id', 'name', and 'mode' are being pulled from data.

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

​and expanded

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

Showing One column not populating


Solution

  • Material-table lets you to override a render of any column. For example:

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