How might I uncheck all rows of MaterialTable(mbrn/material-table) with a button?

Question

I am building a reactjs web app where I use mbrn/material-table( https://github.com/mbrn/material-table) .The table has a functionality to check all rows in a field at once.But to unselect(or uncheck) all rows ,you need to click on the select all checkbox and then click on it again to uncheck all rows.I have read the documentation of the framework but have not been able to find a functionality implement unchecking all rows at once with a button.

  import MaterialTable from "material-table";

     const table = () => {
    return (
       <MaterialTable
         columns={[
          { title: "ID" },
          { title: "name" },
          { title: "SurName" },
          {
            title: "Birthyear"
          },
          { title: "BirthCity" },
         {
          title: "Sex"
         },
         {
          title: "Type"
         }
        ]}
    data={[
         {
          id: 1,
           name: "a",
          surname: "Baran",
          birthYear: 1987,
          birthCity: 63,
          sex: "Male",
         type: "adult"
         },
       {
        id: 2,
        name: "b",
        surname: "Baran",
        birthYear: 1987,
        birthCity: 34,
        sex: "Female",
        type: "adult",
        parentId: 1
      },
      {
        id: 3,
        name: "c",
        surname: "Baran",
        birthYear: 1987,
        birthCity: 34,
        sex: "Female",
        type: "child",
        parentId: 1
      },
      {
        id: 4,
        name: "d",
        surname: "Baran",
        birthYear: 1987,
        birthCity: 34,
        sex: "Female",
        type: "child",
        parentId: 3
      },
      {
        id: 5,
        name: "e",
        surname: "Baran",
        birthYear: 1987,
        birthCity: 34,
        sex: "Female",
        type: "child"
      },
      {
        id: 6,
        name: "f",
        surname: "Baran",
        birthYear: 1987,
        birthCity: 34,
        sex: "Female",
        type: "child",
        parentId: 5
      }
    ]}
    actions={[
      {
        tooltip: "Remove All Selected Users",
        icon: icons,
        onClick: (evt, data) =>
          alert("You want to delete " + data.length + " rows")
      }
    ]}
    // onSelectionChange={rows =>
    //   // alert("You selected " + rows.length + " rows")
    // }
    options={{
      selection: true
    }}
    parentChildData={(row, rows) => rows.find(a => a.id === 
  row.parentId)}
    title="Search Results"
  />);

I want that on click of a button,all selected rows should get unselected

score 2 · Answer 1 · answered Jul 29 '19 at 15:31

Since material table actually mutates your data, you can just use something like this:

this.state.data.forEach(d => {if(d.tableData)d.tableData.checked = false});

and set that as the new state. That is not the prettiest, because of the state mutation, but it is the only way, since material table itself mutates it.

score 0 · Answer 2 · answered Jan 17 '23 at 13:03

You can use onAllSelected function from the tableRef like that

import MaterialTable from "material-table";
import { useRef } from 'react';

const Table = () => {
    const tableRef = useRef()
    return (
       <>
       <button onClick={
            () => {tableRef.current?.onAllSelected(false)}}>
          clear selection
       </button>
       <MaterialTable {...all props you need} tableRef={tableRef} />
      </>    
);

The issue was raised here.

How might I uncheck all rows of MaterialTable(mbrn/material-table) with a button?

2 Answers2