Я пытаюсь найти лучшую таблицу для использования с моими приложениями реагирования, и на данный момент таблица реакции предлагает все, что мне нужно (нумерация страниц, управление на стороне сервера, фильтрация, сортировка, строка нижнего колонтитула) ).
Как говорится, я не могу выбрать строку. Там нет примеров , которые показывают это.
Некоторые вещи, которые я пробовал, включают попытки установить className по щелчку строки. Но я не могу найти вызывающий элемент ни в e
, ни t
. Кроме того, мне не нравится этот подход, потому что это не то, как приложение реагировать должно делать вещи.
{
return {
onClick: (e, t) => {
t.srcElement.classList.add('active')
},
style: {
}
}
}}
/>
Некоторым возможным обходным решением будет визуализация флажков в качестве первого столбца, но это не является оптимальным, поскольку ограничивает область, по которой нужно щелкнуть, чтобы «активировать» строку. Также визуальная обратная связь будет менее выразительной.
Я скучаю по слону в комнате? А если нет, знаете ли вы другую библиотеку, которая поддерживает вещи, которые я описал ранее?
Спасибо!
РЕДАКТИРОВАТЬ: Другой вариант, который является открытым исходным кодом, заключается в предложении редактирования. И, возможно, это правильная вещь.
РЕДАКТИРОВАТЬ 2
Еще одна вещь, предложенная Даворином Рушевляном в комментариях, но я не могла заставить это работать, была:
onRowClick(e, t, rowInfo) {
this.setState((oldState) => {
let data = oldState.data.slice();
let copy = Object.assign({}, data[rowInfo.index]);
copy.selected = true;
copy.FirstName = "selected";
data[rowInfo.index] = copy;
return {
data: data,
}
})
}
....
getTrProps={(state, rowInfo, column) => {
return {
onClick: (e, t) => { this.onRowClick(e, t, rowInfo) },
style: {
background: rowInfo && rowInfo.row.selected ? 'green' : 'red'
}
}
}}
Это устанавливает Столбец «FirstName» для «selected», но не устанавливает класс в «green»