таблица материалов Как выбрать строку, меняющую цвет фона при выделении

Question

Использование библиотеки таблиц материалов. Я хотел бы повторить поведение, показанное в этом примере.

https://codesandbox.io/s/table-hover-colors-zw9nt

https://www.npmjs.com/package/material-table https://material -table.com / # /

Я думал об использовании onRowClick = {}

Логика будет

onRowClick =>

1. установить значение в состоянии компонента, которое отображает фон выделенных строк в другой цвет
2. установить все остальные строки в качестве фона в исходный цвет

Я могу использовать условный рендеринг на основе удерживаемого значенияв состоянии изменить фон. Хотя это меняет фон для всех строк.

options={
   rowStyle:{backgroundColor: this.state.selected ? '#fff' : this.state.c}
}

Мой текущий рабочий пример здесь https://codesandbox.io/s/peaceful-haibt-2nefw

Спасибо заваша помощь

Answer 1

Вам также нужно пропустить selectedRowId, иначе все будет синим. Алос, опции rowStyle принимают обратный вызов, который вы можете вызвать следующим образом:

rowStyle: rowData => ({
backgroundColor: this.state.selected && rowData.tableData.id === this.state.selectedRowId 
?   this.state.c
    : "#fff" 
})

Ваш onRowClick также нуждается в некоторой работе (условие выбора / отмены выбора было неправильным). Y https://codesandbox.io/embed/select-one-row-160vm

Answer 2

Документация пакета предоставляет пример того, как вы можете сделать это с помощью options реквизита.

Я раздвоил вашу песочницу здесь .