CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
mig_08
mig_08

Reputation: 181

material-ui table clear selection

I am working with material-table in reactjs and wanted to know if it is possible to clear my selection after I do a update or have another button to clear my selection. I did read through the documentation but never find anything that could help

enter image description here

Code:

          <MaterialTable
              title="User data from remote source"
              columns ={[
                {title: "id", field: "id", hidden: true},
                {title: "Avatar", render: rowData => <Avatar maxInitials={1} size={40} round={true} name={rowData === undefined ? " " : rowData.first_name} />  },
                {title: "First name", field: "first_name", },
                {title: "Last name", field: "last_name"},
                {title: "email", field: "email"}
              ]}

              data={data}
              icons={tableIcons}
              options={{
                actionsColumnIndex: -1,
                headerStyle: {
                  backgroundColor: 'lightgray',
                  color: 'black'
                },
                selection: true
              }}
            />

Upvotes: 0

Views: 2364

Answers (1)

Wiktor Bednarz
Wiktor Bednarz

Reputation: 749

From what I see the selection data is hidden within the <MaterialTable/>. There's a topic here suggesting to place a ref that would help with clearing or update the component.

A quick hack that comes to my mind is trying to force an update by taking advantage of key prop.

const ParentComponent = () => {
    const [ resetKey, setResetKey ] = useState(0);

    const forceReset = () => {
        setResetKey(resetKey++);
    };

    return (
        <>
            <MaterialTable key={`MaterialTable-${resetKey}`} {...materialTableProps} />
            <button onClick={forceReset}>RESET</button>
        </>
    );
}

But I can't really guarantee that it'll work - if so, the solution with using a ref would be your last resort, which probably should look something like this:

const ParentComponent = () => {
    const tableRef = useRef(null);

    const forceReset = () => {
        tableRef.current.onAllSelected(false);
    };

    return (
        <>
            <MaterialTable tableRef={tableRef} {...materialTableProps}/>
            <button onClick={forceReset}>RESET</button>
        </>
    );
}

Upvotes: 2

Related Questions