I have a requirement to display a boolean value in a switch. for eg my data is in {id:1,first_name:ABC,last_name:XYZ,allow: true}. I need to display allow in a switch. I am using mui-datatables
Add a comment
|
1 Answer
Please check this example
import React from "react";
import MUIDataTable from "mui-datatables";
import Switch from "@material-ui/core/Switch";
export default class MuiDatatableSwitch extends React.Component {
render() {
const columns = [
{label: "Name", name: "Name"},
{label: "Title", name: "Title"},
{name: "Location"},
{name: "Age"},
{name: "Salary"},
{
name: "Allow",
options: {
filter: true,
sort: false,
customBodyRender: (value, tableMeta, updateValue) => {
return <div>
<Switch checked={value}/>
</div>;
}
},
},
];
const data = [
["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000", true],
["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000", false]
];
const options = {
selectableRows: "multiple",
selectableRowsHeader: data.length > 0,
};
return (
<MUIDataTable
title={"ACME Employee list"}
data={data}
columns={columns}
options={options}
/>
);
}
}