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

or
But I am getting like this
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!!

