CODEWITHSUNDEEP
javascriptreactjsmui-datatable
Anuj Shakya
Anuj Shakya

Reputation: 73

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

Upvotes: 2

Views: 2564

Answers (1)

Khabir
Khabir

Reputation: 5852

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

Upvotes: 4

Related Questions