How to add toggle button inside syncfision table DataGrid

Question

How to add toggle btn inside column (table) ; Can I use material ui toggle btn inside it ? is it possible, or not I tried documentation on syncFusion website but I couldn't find the one I am looking for

This is sample code for adding syncfusion table, whare shall I mention type for column and its datasource

    const commands = [
            {
                title: "View",
                buttonOption: {
                    iconCss: "ms-Icon ms-Icon--EntryView",
                    cssClass: "e-flat",
                },
            },
    
            {
                title: "Edit",
                buttonOption: {
                    iconCss: "ms-Icon ms-Icon--SingleColumnEdit",
                    cssClass: "e-flat",
                },
            },
            {
                title: "Activate",
                buttonOption: {
                    iconCss: "ms-Icon ms-Icon--ActivateOrders",
                    cssClass: "e-flat",
                },
            },
        ];
    
        const handleDecisionClick = (event) => {
            if (event.commandColumn.title === "View") {
                if (event.rowData.active == 1 || event.rowData.active == 0) {
                    navigate("./view/" + event.rowData.id);
                }
            }
    
            if (event.commandColumn.title === "Edit") {
                navigate("./form/" + event.rowData.id);
            }
    
            if (event.commandColumn.title === "Activate") {
                if (event.rowData.active == 1) {
                    setNotificationSeverity("warning");
                    setNotificationMessage("Plan is already active");
                    setShowNotification(true);
                } else {
                    setDialogBox({ ...dialogBox, id: event.rowData.id, show: true })
                    // 
                }
            }
        };


 render() {
        
        return (<div className='control-pane'>
                        <GridComponent id="gridcomp" dataSource={state.requests} commandClick={handleDecisionClick} allowPaging={true} pageSettings={{ pageCount: 5 }} >
                        <ColumnsDirective>
                            <ColumnDirective field="name" headerText="Name"></ColumnDirective>
                            <ColumnDirective headerText="Manage Records" width="160" commands={commands} ></ColumnDirective>
                        </ColumnsDirective>
                        <Inject services={[Page, CommandColumn, Edit]} />
                    </GridComponent>

            </div>);
    }

Answer 1

You can achieve your requirement by using columnTemplate feature of Grid. It is used to render custom components on each cell in that column.

columnTemplate: https://ej2.syncfusion.com/react/documentation/grid/columns/column-template/

Switch Component: https://ej2.syncfusion.com/react/documentation/switch/getting-started/

export class Default extends SampleBase {
colTemplate(props) {
var cellValue = props.Verified; // get the cell value
return <SwitchComponent checked={cellValue} />; // here you can render your own toggle component as per your need
}
render() {
return (<GridComponent dataSource={hierarchyOrderdata} height="350">
<ColumnsDirective>
<ColumnDirective
field="Verified"
headerText="Verified"
template={this.colTemplate.bind(this)}
width="150"
></ColumnDirective>
</ColumnsDirective>
</GridComponent>);
}
}

Sample: https://stackblitz.com/edit/react-na7fy7?file=index.js