ReactJS: How to make selection by default checked in Material Table by default?

Question

I am using react material table in my project and i want to make selection by default checked. How to achieve that??

function BasicSelection() {
  return (
    <MaterialTable
      title="Basic Selection Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}        
      options={{
        selection: true
      }}
    />
  )
}

Answer 1

A bit late but if someone else is interested:

You can do this by using state management and material table component override. Please note that you need to handle all the selection logic by yourself.

/* First define the selectedData state and set it to all data 
(the data that you are giving input to material table). 
This is where we are setting all data to by default checked. Like so: */

const [selectedData, setSelectedData] = useState(data);

Now we have to define a column for showing the selection checkbox. We can not use the default selection functionality of material table. Let's define the extra column:

 <MaterialTable
      title="Conditional Selection Boxes Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        { title: "SelectCheckbox",
          field: "surname",
          render: rowData => (
                <Checkbox
                  checked={
                    JSON.stringify(selectedData).indexOf(
                      JSON.stringify(rowData)
                    ) != -1
                  }
                  onChange={e => handleRowSelect(e, rowData)}
                />
              ),
         },
      ]}
      data={data}   
/>

The last column is our Select row column(Checkbox for each row). We are using the surname field again but you can use any field from your data. The title is important and will be used later to identify the select column. This field gives us access to the rowData which will be used for select/deselect row with the help of onChange event handler.

Finally, we need to override the header component:

    components={{
    Header: props => (
        <TableHead>
          <TableRow>
            {props.columns.map((column, idx) => {
              // return only the real columns
              return column.title != "SelectCheckbox" ? (
                <TableCell key={idx}>{column.title}</TableCell>
              ) : null;
            })}
            // return the Checkbox for select all
            <TableCell>
              <Checkbox
                checked={selectedData.length == data.length}
                onChange={handleSelectAllData}
              />
            </TableCell>
          </TableRow>
        </TableHead>
    ),
   }}

Now, let's write the onChange logics:

 const handleSelectAllData = e => {
    if (e.target.checked) {
      setSelectedData(data);
    } else {
      setSelectedData([]);
    }
  };

  const handleRowSelect = (e, rowData) => {
    if (e.target.checked) {
      let tempArray = [...selectedData];
      tempArray.push(rowData);
      setSelectedData(tempArray);
    } else {
      setSelectedData(
        selectedData.filter(
          row => JSON.stringify(row).indexOf(JSON.stringify(rowData)) == -1
        )
      );
    }
  };

Nothing complicated. I hope anyone landing to this page can follow this and solve his problem.

Answer 2

you can use it.

options={{
        selection: true,
        selectionProps: rowData => ({
          disabled: rowData.name === 'Mehmet',
          color: 'primary',
          checked: rowData.id === '1'
        })
      }}