如何在 Material-UI dataGrid/XGrid 中向过滤器添加下拉列表或复选框

Question

我正在尝试向其中一个列过滤器添加复选框或下拉列表。我尝试过在列中使用 type="boolean" ，它正在创建下拉列表，但没有按照我的预期创建列表。我期待下拉菜单有两个选项，如“可到达”和“不可到达”，但它正在创建“真”或“假”。

他们是否有任何道具名称来创建过滤器类型的名称？我期待着这样

或者

但我变得这样

我的代码看起来像这样

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

谢谢你！！

Answer 1

您需要在列对象中添加这两个键值：

type: "singleSelect",
valueOptions: ["select1","select2",.....]

改变它从

{
field: 'brand',
headerName: 'Brand',
width: 150,
editable: false,
}

到

{
field: 'brand',
headerName: 'Brand',
width: 150,
editable: false,
type: "singleSelect",
valueOptions: ["select1","select2",.....]
}