javascriptreactjsmui-datatable

display table data in switch in mui-datatables while my data is in boolean


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


Solution

  • 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}
                />
            );
        }
    }