0

I am trying to create custom checkbox edit on modal editing mode, but I can't fine the way to update the row data with the new chekbox state.

I have this custom component:

import { Checkbox, FormControlLabel } from "@mui/material"
import React from "react"

const EditCheckbox = (props: any) => {
  const [isChecked, setIsChecked] = React.useState(props.cell.getValue())

  return (
    <FormControlLabel
      key={props.column.id}
      control={
        <Checkbox
          name={props.column.id}
          checked={isChecked}
          value={isChecked}
          onChange={(e) => {
            setIsChecked(e.target.checked)
          }}
        />
      }
      label={props.column.id}
    />
  )
}

export default EditCheckbox

and this column settings for material react table:

const columns = [
  {
    accessorKey: 'email',
    header: 'Email',
    Edit: (props) => <EditCheckbox {...props} />,
  },
];

on the UI everything is working just fine. but when I am saving the edit the value of the checkbox is not changing at all.

older version has props.onChange() but I can't use it on version 1.8.5. the function is not exists on props.

anyone can help me find a solution?

thanks :)

I am trying to get the edit changes from the modal after use custom edit on material reacl table.

0 Answers0