Material Table onBulkUpdate returning state of a CheckBox Column

Question

I want to bulk update rows of a checkbox column in Table, instead it is returning the state value i.e. true/false of the checkbox.

Attaching screenshots for reference Bulk Edit Preview Table After Edit All Bulk Edit Preview Table

const { useState } = React;

  const [columns1, setColumns] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    { title: 'Valid', field: 'valid', render: rowData => {
      return <Checkbox checked={rowData.valid === 'true'? true: false}
      />;
    } },
  ]);
  const [data1, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63, valid:'true' },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34, valid:'false' },
  ]);
  return (
    <MaterialTable
      title="Bulk Edit Preview"
      columns={columns1}
      data={data1} icons={TableIcons}
      editable={{
        onBulkUpdate: changes =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve();
            }, 1000);
          }),    
          onRowDelete: oldData =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve();
            }, 1000);
          }),   
      }}
    />

How can we keep the checkbox as display instead of its state(true/false), while we select Edit All functionality. Also can we get the updated state, if user selects/deselects a checkbox in onBulkUpdate().

Answer 1

Update this field to be boolean:

{ title: 'Valid',
 field: 'valid',
 type:'boolean',
 render: rowData => {
      return <Checkbox checked={rowData.valid === 'true'? true: false} />;
}};