Как изменить цвет фона ячейки для дочерних ячеек

Question

Я использую таблица материалов для этого пользовательского интерфейса.

Я пытаюсь настроить стиль указанной ячейки c, только если onTreeExpandChange имеет значение true.

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

Пример кода:

                  {
                        title: 'WEST',
                         field: 'west',
                        cellStyle: { textAlign: 'center' },
                        headerStyle: { backgroundColor: '#006EB8' }
                    },
                ]}
                data={[
                    { id: 1, group_name: '1', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 2, parentId: 1, group_name: '2', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 3, parentId: 1, group_name: '3', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 4, group_name: '4', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 5, group_name: '5', northeast: 'Baran', central: 'ddd', west: '3' },
                    { id: 6, group_name: '6', northeast: 'Baran', central: 'ddd', west: '3' },
                ]}
                onTreeExpandChange={(row, rows) => {
                    if (rows) {
                        // How to changne the backgroundColor of cell 2 & 3 ?????
                    }
                }
                }
                parentChildData={(row, rows) => rows.find(a => a.id === row.parentId)}
                options={{
                    search: false,
                    sorting: true,
                    exportButton: true,
                    paging: false,

Любая идея, как это можно сделать?

Спасибо

Answer 1

Стилизация строк представляется возможной только в свойстве options компонента React, поэтому вам нужно будет сохранять состояние при каждой детализации, которую вы выполняете, добавляя идентификаторы строк в состояние.

Что-то например:

options={{
  rowStyle: rowData => ({
    backgroundColor: (this.state.expandedRow && this.state.expandedRow.indexOf(rowData.id) != -1) ? '#FF0' : '#FFF'
  })
}}

И вы сохраняете массив this.state.expandedRow в своем состоянии, в котором вы помещаете идентификаторы строк в событие onTreeExpandChange.