Table of contents

1. Table With Async Call
2. Use ref to update table info in parent
3. table ref
   1. tableref-onrowselected-to-update-the-ui-via-the-onrowclick-property
   2. prop options to header from a customize component
4. Issues
   1. Add API for selecting/deselecting rows programmatically
   2. “Select All” also selects disabled checkboxes

---

Table With Async Call

Use ref to update table info in parent

const updatePrivateGroupsTable = () => {
    if (privateGroupTableRef?.current) {
        privateGroupTableRef.current.onQueryChange();
    }
};

table ref

tableref-onrowselected-to-update-the-ui-via-the-onrowclick-property

Add tableRef to state:

state = {
    tableRef: React.createRef(),
};

Then add the tableRef prop to your Material Table

<MaterialTable tableRef={this.state.tableRef}/>

Then on the onRowClick prop/function use tableRef to access dataManager and onSelectionChange

<MaterialTable
    tableRef={this.state.tableRef}
    onRowClick={(event, rowData) => {
        // Update the clicked rows checked state
        rowData.tableData.checked = !rowData.tableData.checked;

        // pass dataManager the current rows checked state and path/ID, the path/ID needs to be an array, ex: [1]
        this.state.tableRef.current.dataManager.changeRowSelected(rowData.tableData.checked, [rowData.tableData.id],);

        // call the onSelectionChange and pass it the row selected to ensure it updates your selection properly for any custom onSelectionChange functions.
        this.state.tableRef.current.onSelectionChange(rowData);
    }}
/>

prop options to header from a customize component

Issues

Add API for selecting/deselecting rows programmatically

“Select All” also selects disabled checkboxes