0

I'm using react material-table and and I was wondering if there's a way upon selecting table row to make other rows of the same table disabled. I'm using: 

material-table selection: true

I saw that there's a "onSelectionChange" but I couldn't make it work for my case.

Toms Code
  • 1,439
  • 3
  • 15
  • 34
bfury
  • 99
  • 2
  • 12

2 Answers2

1

Yes it is possible: First save the selected row in the state and return undefined, if a row is selected to remove the hover animation: onRowClick={!this.state.selectedRow ? ((evt, selectedRow) => this.setState({ selectedRow })): undefined}.

Additionally, you can override the rowStyle in options to grey out the text color to make the rows seem disabled:

options={{
         rowStyle: rowData => ({
            color: (this.state.selectedRow && this.state.selectedRow.tableData.id !== rowData.tableData.id) ? '#AAA' : '#000'
       })
}}

This will look like this before the click: enter image description here And like this after the click: enter image description here Of course, you can change the colors and behavior to your liking.

Here is a codesandbox to prevent of children, if a parent is selected. Does that help?

Domino987
  • 8,475
  • 2
  • 15
  • 38
  • Great example, but it doesn't seem to work because the options are rendered at first and it looks form tableData in the selectedRow which doesn't yet exist. From your example how can I disable all rows with Tipi= child(meaning selection(checkboxes) can't be checked) if a Tipi=adult is selected? – bfury Nov 25 '19 at 07:21
0

use disabled in jsx element like this:

`<td disabled={true} />`

or you can also make your own logic in curly braces, when it should be disabled!

Thanks!

Ericgit
  • 6,089
  • 2
  • 42
  • 53
  • 1
    Sorry, but this doesn't help me at all. MaterialTable doesn't use the element you've mentioned. The property is "disabled" as you've said, I just don't know how to integrate it. – bfury Nov 22 '19 at 15:33