question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to change selected rows from outside of component?

See original GitHub issue

I’m unable to find anything in the documentation about how to do this, I imagine it’s using the tableRef property but I don’t know what properties that contains that would be able to change the selected rows. I am using a table with selection enabled, basically I want somewhere outside of this component to handle the selected rows as well (like remove certain rows).

<MaterialTable
    columns={columns}
    data={files}
    title="Table"
    tableRef={tableRef}
    options={{
      selection: true,
    }}
>

const removeSelectedRow = (idx: number) => {
// what goes here?
tableRef.current.removeSelectedRow(idx);
}

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:5
  • Comments:5

github_iconTop GitHub Comments

4reactions
arkhemlolcommented, Sep 8, 2020

I don’t get why this feature hasn’t been implemented yet. Programmatically selected rows is a common use case, i.e. when table being used in forms.

1reaction
Buuntucommented, Jun 16, 2020

I think I figured out how to solve it using tableRef, although it’s not great:

const tableRef = useRef<any>(); // not sure if there's a better type for this

const removeFromChecked = (idx: number) => {
    if (!tableRef) {
      return;
    }

    tableRef.current.dataManager.changeRowSelected(false, [idx]);
};

return <MaterialTable
  tableRef={tableRef}
  data={data}
  columns={columns}
/>;

This seems like a common enough use case to be in the docs, I think.

Read more comments on GitHub >

github_iconTop Results From Across the Web

get access to selected row data from outside table component
What you can do is pass maintain some state for selectedRows in you parent component then pass a callback to Table component that'll...
Read more >
Row Selection - JavaScript Data Grid
Select a row by clicking on it. Selecting a row will remove any previous selection unless you hold down Ctrl while clicking. Selecting...
Read more >
Getting Selected Rows from outside the Grid - Telerik
Generally speaking you could access the selected row using the select method which returns an array of the selected row. However, to use...
Read more >
Selected Row - material-table/core
options.rowStyle, style object or func, style to apply in all rows cells. onRowClick, func, to handle row click (event, rowData) ...
Read more >
Element: <oj-table> - Oracle
Focus on the row. If selectionMode for rows is enabled, selects the row as well. If multiple selection is enabled the selection handles...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found