render a switch button on in material table when i am editing

Question

hi guys i am using material table : (the switch is from material-ui, a simple toggle button)

columns: {[{ title: 'Name', field: 'name' },
          { title: 'Status', field: 'status', type: 'boolean', render: rowData => <Switch checked=  {rowData.active}/>*/}
        ]}
        data: {[
            { name: 'Mickey', status: false },
            { name: 'Pippo', status: true}]}

when i click the edit button instead switch component is coming out a checkbox component (i think it is default for boolean type columns in material table), is it possible to change it?

Answer 1

Using editComponent along with render should suffice your requirement here.

{
  title: "Status",
  field: "status",
  editComponent: (rowData) => {
    return <Switch checked={false} inputProps={{ "aria-label": "controlled" }} color="primary" />;
  },
  render: (rowData) => {
    return (
      <Switch
        checked={rowData.status}
        onChange={handleChange}
        inputProps={{ "aria-label": "controlled" }}
        color="primary"
      />
    );
  }
}