Как передать реквизит в строку в таблице реакции

Question

Я слежу за https://blog.logrocket.com/complete-guide-building-smart-data-table-react/. Чтобы применить пользовательский стиль в зависимости от значения ячейки, я обновляю объект столбца следующим образом:

return {
  Header: key,
  accessor: key,
  width: "150",
  sortType: "basic",
  Cell: ({cell: {value} }) => {
    if (value == "Error") {
      return <RedCell/>
    }
    ...
  }
}

Можно ли вместо этого применить индивидуальный стиль к строке, содержащей ячейку? Я предполагаю, что реквизит должен быть передан в ряд, но я просто не понимаю, как это сделать.

Любые указатели будут очень признательны.

Answer 1

Для тех, кто наткнулся на этот вопрос, на него ответил автор react-tableбиблиотека здесь — https://spectrum.chat/react-table/general/v7-row-getrowprops-how-to-pass-custom-props-to-the-row~ff772376-0696-49d6-b259-36ef4e558821

В компоненте Table вы передаете любую опору (скажем, rowProps) по вашему выбору для строк —

      <Table
        columns={columns}
        data={data}
        rowProps={row => ({
          onClick: () => alert(JSON.stringify(row.values)),
          style: {
            cursor: "pointer"
          }
        })}
      />

Затем, чтобы на самом деле использовать это -

      function Table({ columns, data, rowProps = () => ({}) }) {
  // Use the state and functions returned from useTable to build your UI
  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data
  });

  // Render the UI for your table
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {rows.map(
          (row, i) =>
            prepareRow(row) || (
              <tr {...row.getRowProps(rowProps(row))}>
                {row.cells.map(cell => {
                  return (
                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
                  );
                })}
              </tr>
            )
        )}
      </tbody>
    </table>
  );
}

Answer 2

В настоящее время вы применяете стили для определений столбцов.

Чтобы применить стиль ко всей строке. (например, сделать всю строку красной, если значение == "Ошибка"), я бы сделал это в пользовательском интерфейсе вашей таблицы.

В вашем интерфейсе вы будете звонить prepareRow(row) а затем используя строку для визуализации ячеек.

возможно с: row.cells.map

На этом этапе вы можете сделать что-то другое в зависимости от содержимого ячейки. row.cells[0]

может что-то вроде этого:

                  {(row.cells[0].value !== "Error" && row.cells.map(cell =>
                    {
                        return (
                            <TableCell {...cell.getCellProps({ className: cell.column.className })}>
                                {cell.render('Cell')}
                            </TableCell>
                        );
                    })) ||  <RedRow />}