Search code examples
reactjsmaterial-table

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.

Solution

  • 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?