CODEWITHSUNDEEP
reactjsmaterial-table
Surbhi Kohli
Surbhi Kohli

Reputation: 11

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

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

Upvotes: 0

Views: 3271

Answers (2)

Mohamed Sayed
Mohamed Sayed

Reputation: 515

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.

Upvotes: 0

Domino987
Domino987

Reputation: 8774

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.

Upvotes: 2

Related Questions