Как я могу автоматически стилизовать каждую ячейку в React Table на основе созданного значения ячейки? - PullRequest
Новая
       26

Как я могу автоматически стилизовать каждую ячейку в React Table на основе созданного значения ячейки?

0 голосов
/ 30 мая 2020

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

Для начала я хотел просто обновить стиль ячейки на основе значения, однако добавив настраиваемое имя класса на основе ячейки значение также будет работать.

Это массив, который создает столбцы: 

const columns = [
  {
    Header: 'Things to Do',
    accessor: 'item',
    getProps: (rowInfo) => {
      return {
        style: {
            backgroundColor: rowInfo && rowInfo.row.item === 'Do a thing' ? 'red' : null,
        },
      }
    }
  },
  {
    Header: '2020-04-01',
    accessor: 'date.2020-04-01',
    getProps: (rowInfo) => {
      return {
        style: {
          backgroundColor: rowInfo && rowInfo.row['date.2020-04-01'] === 'Y' ? 'red' : null,
        },
      }
    }
  },

Это один образец данных (вы можете видеть, что заголовки будут вложены при доступе к ним в сгенерировать ячейки, например date.2020-04-01. 

const data = [
  {
    item: 'Do a thing',
    date: {
      '2020-04-01': 'Y',
      '2020-04-02': 'Y',
      '2020-04-03': 'N',
      '2020-04-04': 'Y',
    }
  },
]

Для ясности, моя таблица сгенерирована с использованием довольно стандартных вещей: 

const Table = ({ columns,  data }) => {
        const {
            getTableProps,
            getTableBodyProps,
            headerGroups,
            rows,
            prepareRow,
        } = useTable({
            columns,
            data,
        });


    return (
        <table {...getTableProps()} className="table">
            <thead>
                {headerGroups.map(headerGroup => (
                    <tr {...headerGroup.getHeaderGroupProps()}>
                        {headerGroup.headers.map(column => (
                            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                        ))}
                    </tr>
                ))}
            </thead>
            <tbody {...getTableBodyProps()}>
                {rows.map((row, i) => {
                    prepareRow(row)
                    return (
                    <tr {...row.getRowProps()}>
                        {row.cells.map(cell => {
                        return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                        })}
                    </tr>
                    )
                })}
            </tbody>
        </table>
        );
  }

1 Ответ

0 голосов
/ 08 июня 2020

Да, вы можете стилизовать строки и ячейки:

Поскольку это библиотека пользовательского интерфейса без заголовка, мы можем стилизовать таблицу, как захотим:

В коде разметки таблицы React у вас в основном есть Строка таблицы (tr) и данные таблицы (td) html элементов. Вы можете стилизовать строки или ячейки там ИЛИ вы можете расширить функциональность row.getRowProps или cell.getCellProps -> Это также называется шаблоном геттера (Подробнее : https://kentcdodds.com/blog/how-to-give-rendering-control-to-users-with-prop-getters)

Например, здесь я стилизовал строки или ячейки: (журнал консоли: cell.getCellProps () и посмотрел, что вы получите. Теперь вы можете расширить его функциональность, например this) 

                 cell.getCellProps({
                     style: {color : 'red'}
                  })

Передать объект стиля в cell.getCellProps ()

Или 

                <div
                  className="tr"
                  {...row.getRowProps()}
                  style={{ ...row.getRowProps().style, ...getRowStyle(row) }}
                  >

В приведенном выше коде getRowStyle (row) - это настраиваемая функция, которая возвращает стиль для этой конкретной строки / ячейки.

Я тоже ответил на тот же вопрос в обсуждениях на github! Удачного кодирования :)

...