Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass props to row in react-table

I've been following https://blog.logrocket.com/complete-guide-building-smart-data-table-react/. To apply custom styling depending on cell value, I'm updating the column object like so:

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

Is it possible instead to apply custom styling to the row containing the cell? I guess a prop would have to be passed down to row, but am just not clear at all on how to do this.

Any pointers would be much appreciated.

like image 613
Maikol Avatar asked Aug 25 '20 23:08

Maikol


People also ask

How do you pass Props to React elements?

export default App; Basically that's how props are passed from component to component in React. As you may have noticed, props are only passed from top to bottom in React application's component hierarchy. There is no way to pass props up to a parent component from a child component.

Can you pass objects as props in React?

Use the spread syntax (...) to pass an object as props to a React component, e.g. <Person {... obj} /> . The spread syntax will unpack all of the properties of the object and pass them as props to the specified component.


2 Answers

For anyone stumbling upon this issue, this has been answered by the author of the react-table library here — https://spectrum.chat/react-table/general/v7-row-getrowprops-how-to-pass-custom-props-to-the-row~ff772376-0696-49d6-b259-36ef4e558821

In your Table component, you pass on any prop (say, rowProps) of your choice for rows —

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

Then to actually use this —

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>
  );
}
like image 99
GPX Avatar answered Oct 18 '22 10:10

GPX


Currently you are applying styling to your columns definitions.

In order to apply styling to an entire Row. (eg. make the entire row red if value == "Error"), I would do it in your table UI.

In your UI you are going to be calling prepareRow(row) and then using the row to render the cells.

maybe with : row.cells.map

At this point you could do something different based on the content of a cell row.cells[0]

maybe something like this:

                  {(row.cells[0].value !== "Error" && row.cells.map(cell =>
                    {
                        return (
                            <TableCell {...cell.getCellProps({ className: cell.column.className })}>
                                {cell.render('Cell')}
                            </TableCell>
                        );
                    })) ||  <RedRow />}
like image 36
Tom Avatar answered Oct 18 '22 09:10

Tom