Выберите строку по нажатию на таблицу реакций

Я пытаюсь найти лучшую таблицу для использования с моими приложениями реагирования, и на данный момент таблица реакции предлагает все, что мне нужно (нумерация страниц, управление на стороне сервера, фильтрация, сортировка, строка нижнего колонтитула) ).

Как говорится, я не могу выбрать строку. Там нет примеров , которые показывают это.

Некоторые вещи, которые я пробовал, включают попытки установить 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»

46
задан gyosifov 25 October 2018 в 14:10
поделиться