reactjs - 当我的数据为布尔值时，在 mui-datatables 中的 switch 中显示表数据

Question

我需要在开关中显示布尔值。例如，我的数据在 {id:1,first_name:ABC,last_name:XYZ,allow:true} 中。我需要在开关中显示允许。我正在使用 mui 数据表

Answer 1

请检查这个例子

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