React-table: how to use getCellProps, getHeaderProps etc.?

user_1078107 0
Viewed 3134

The documentation of React Table is really sparse and I can't make sense of the examples.

For example here: https://react-table.tanstack.com/docs/examples/data-driven-classes-and-styles, we see this code:

{row.cells.map(cell => {
                return (
                  <td
                    // Return an array of prop objects and react-table will merge them appropriately
                    {...cell.getCellProps([
                      {
                        className: cell.column.className,
                        style: cell.column.style,
                      },
                      getColumnProps(cell.column),
                      getCellProps(cell),
                    ])}
                  >
                    {cell.render('Cell')}
                  </td>

It's not clear to me what's happening.

GetCellProps is called, and provided an array as argument. This array contains 1. an object with two properties, and 2. a call to getColumnProps (what does this do?), and then 3. another call to getCellProps but now with the cell as an argument.

The result of this call is then operated on with the spread-operator (...).

If anyone can help me understand all of this, much appreciated.

react-table reactjs
1 Answers

I will try to explain this to you -

cell.getCellProps -> is the method exposed on each cell by react-table, this is pretty useful in getting all props which the given cell will require based on the plugins used.

Few eg. of same are -

https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc/src/hooks/useTable.js#L415 https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc/src/plugin-hooks/useFlexLayout.js#L47 https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc/src/plugin-hooks/useAbsoluteLayout.js#L23

Now this method can expect an object or list of object to be provided as argument, which mainly acts as merge/override on prior values, loosely similar to object.assign with some exceptions based on key name, for more details on merge logic refer - https://github.com/TanStack/react-table/blob/76a4a861ee56b782404ef91987c3b5691ecf2ebc/src/publicUtils.js#L19

Below code is helpful in adding className in cell and merge/override styles with previously returned values.

{
    className: cell.column.className,
    style: cell.column.style,
}

Below two methods are props provided by component

getColumnProps(cell.column),
getCellProps(cell)

getColumnProps={column => ({
  onClick: () => alert('Column!'),
})}
getCellProps={cellInfo => ({
  style: {
    backgroundColor: `hsl(${120 * ((120 - cellInfo.value) / 120) * -1 +
      120}, 100%, 67%)`,
  },
}

So whatever is returned by these props that will actually get merged in cell props, and will be applied to td.

P.S. - Refer https://github.com/tannerlinsley/react-table/blob/master/src/publicUtils.js#L48 for what all types of argumants can be expected in cell.getCellProps.

user_102442340
Related