Disable table row on another's selection

Question

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.

Domino987 · Accepted Answer · 2019-11-25 09:39:17Z

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: And like this after the click: 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?

edited Nov 25, 2019 at 9:39

answered Nov 23, 2019 at 14:45

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bfury Over a year ago

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?

Ericgit · Accepted Answer · 2019-11-22 14:18:58Z

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!

answered Nov 22, 2019 at 14:18

Ericgit

7,1413 gold badges50 silver badges59 bronze badges

1 Comment

bfury Over a year ago

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.

Collectives™ on Stack Overflow

Disable table row on another's selection

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related