Lazy loading expanded rows

Currently noting that the getSubRows prop does not get recalled automatically after row expansion click occurs while using the useExpanded plugin. This makes lazy loading less than ideal on my side, i.e. I’d like to show a loading indicator in the child row after parent expansion click occurs, and then re-render the child row after I get the response w/ data. Any suggestions here?

This can certainly be achieved manually by doing a combination of the following:

1. wiring up expansion click callbacks on the expansion cell
2. rendering the child loading spinner in the child with a “custom sub component” like this example: https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/sub-components
3. Fetching the data and updating the data prop for the child row, but ensuring the other row expansion states do not change after reload: https://github.com/tannerlinsley/react-table/blob/2a0dc6778df1725358486b576f553e1ba2dc3489/docs/faq.md#how-do-i-stop-my-table-state-from-automatically-resetting-when-my-data-changes

Am I approaching this correctly? Just checking this vs what’s currently available here. Would be great to have some kind of better way in the future if this is the case…

Thanks for any advice!

[BrianMitchL]

Update: I PRed an example in #2531

[BrianMitchL]

I’ve implemented this through checking if a row is expanded with the following:

<div {...getTableBodyProps()} className="tbody">
  {rows.map((row, i) => {
    prepareRow(row);
    const rowProps = row.getRowProps();
    return (
      <Fragment key={rowProps.key}>
        <div {...rowProps} className="tr" role="row">
          {row.cells.map((cell) => {
            return (
              <div
                {...cell.getCellProps(cellProps)}
                className="td"
                role="gridcell"
              >
                {cell.render('Cell')}
              </div>
            );
          })}
        </div>
        {row.isExpanded &&
          !!renderRowSubComponent &&
          renderRowSubComponent(row, rowProps, visibleColumns)}
      </Fragment>
    );
  })}
</div>

renderRowSubComponent is a function that returns a ReactNode. I use it to pass row.original.customExtraData to a subRow component.

I then created a sub row common component that will use the existing Cell or if given in the column config, a SubCell. Note, the implementation below assumes the accessor is a function, it could be adapted to allow for strings if desired as well.

// to satisfy types if you're using TypeScript
// you could actually pass in this data if you need it too :)
const subRowsFake = {
  subRows: [],
  depth: 0,
  data: [],
};

// ... later, in render

<>
  {data.map((x, i) => {
    return (
      <div
        {...rowProps}
        className="tr"
        role="row"
        key={`${rowProps.key}-expanded-${i}`}
      >
        {row.cells.map((cell) => {
          return (
            <div
              {...cell.getCellProps(cellProps)}
              className="td"
              role="gridcell"
            >
              {cell.render(cell.column.SubCell ? 'SubCell' : 'Cell', {
                value:
                  cell.column.accessor &&
                  cell.column.accessor(x, i, subRowsFake),
                row: { ...row, original: x },
              })}
            </div>
          );
        })}
      </div>
    );
  })}
</>

I hope this helps, it took many many failed attempts before I got to this approach, which has worked out really well!