CODEWITHSUNDEEP
reactjsmaterial-table
Rrr
Rrr

Reputation: 112

How to override select all action? material-table

Material-Table allows for disabling certain rows from being selected, but when the user then presses select all it will highlight the disabled rows. Is there some way to have this functionality ignore rows that are disabled?

Code disabling the rows:

options={{
    selection: true,
    selectionProps: rowData => ({
        disabled: disableRow(rowData)
    })
}}

Image example of selecting disabled rows with select all:

proving you can select disabled rows with select all checkbox

Upvotes: 1

Views: 3858

Answers (2)

Bertrand P
Bertrand P

Reputation: 889

This worked in my case (without using any setState):

data={yourData.map(row => {
  row.tableData = {...row.tableData, disabled: disableRow(row)};
  return rowData;
})}
options={{
  selectionProps: row => ({disabled: row.tableData.disabled})
}}

Upvotes: 0

Domino987
Domino987

Reputation: 8774

This is obvioulsy a bug.

For now, you can fix it by setting tableData.checked to false for the disabled rows in onSelectionChange. If the data is saved within this.state and you want to disabled all rows use this:

 onSelectionChange={(rows) => this.setState({data: rows.map(row => ({
    ...row,
    tableData:{
    ...row.tableData,
    checked: false
    }
    }))})}

If you have a function like disableRow, you can use this, to set the checked prop for the individual rows. This will let you control the selection.

You should open an issue to address the selection of disabled rows at material-table to fix this in the future.

Upvotes: 1

Related Questions