How to add a dropdown or checkbox to the filter in Material-UI dataGrid/XGrid

Viewed 2153

I am trying to add a checkbox or dropdown to one of the column filter. I have tried using type="boolean" to the columns, it is creating the dropdown but not it not creating the list as I expect. I am expecting the dropdown with two option like "Reachable" and "Unreachable" but it is creating "true" or "false".

Is their any prop name to create the names for the Filter types? I am expecting like this enter image description here

or

enter image description here

But I am getting like this

enter image description here

My code looks like this

let rows = list.map((obj, index) => {
  return (rows = {
    id: index,
    "Device ID": obj.device_ID,
    Status: obj.device_status,
    "Last Reading": obj.device_time
  });
});

const columns = [
  {
    field: "Device ID",
    flex: 1,
    renderHeader: () => <FormattedMessage id={"device.param.deviceMrid"} />
  },
  {
    field: "Status",
    flex: 1,
    type: "boolean",
    renderHeader: () => <FormattedMessage id={"history.param.deviceStatus"} />
  },
  {
    field: "Last Reading",
    flex: 1,
    type: "dateTime",
    renderHeader: () => (
      <FormattedMessage id={"history.param.deviceStatusDate"} />
    )
  }
];

<div style={{ height: "90%", width: "100%" }}>
  <XGrid
    pageSize={50}
    rowsPerPageOptions={[25, 50, 100]}
    rows={rows}
    columns={columns}
    pagination={true}
  />
</div>;

Thank you!!

0 Answers
Related