CODEWITHSUNDEEP
reactjsmaterial-table
bfury
bfury

Reputation: 99

Disable table row on another's selection

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.

Upvotes: 0

Views: 5022

Answers (2)

Domino987
Domino987

Reputation: 8774

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?

Upvotes: 1

Ericgit
Ericgit

Reputation: 7043

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!

Upvotes: 0

Related Questions