table.getCell alternative in v8

[mtrenker]

Hi everyone, in the alpha there was a tableInstance.getCell(row, cell) method that didn't make it into the beta it seems, i was wondering if this was removed for a reason or if there is an alternative that I can't see right now?

Thanks for the great work 👍

[KevinVandy]

Is there a use case where you need to get a cell directly from the tableInstance? It was removed because it was thought that it was not needed anymore since you usually already have all the cells in scope when rendering them.

[mtrenker]

thanks for the reply, our use-case looks something like this: (it's about grouping and expanding)

company	department	todos
Foo	HR	10
Bar	Marketing	20
Bar	HR	5

if we group by any column, we want that cell to span the whole row and add how many todos in this particular group are in aggregate, e.g. after grouping by company: (x means cell should be spanned over, not rendered)

company	department	todos
10 ⬇️ Foo	x	x
25 ⬇️ Bar	x	x

so that when we expand company Bar, it looks like this:

company	department	todos
10 ⬇️ Foo	x	x
25 ⬆️ Bar	x	x
Bar	Marketing	20
Bar	HR	5

so the problem is, that we want to escape the classical table structure and show data somewhere else inside the table. getCell was perfect for that.

I will need some time to think about different approaches, maybe a global aggregate function component would be more appropriate here, again, I just wanted to make sure I'm not overseeing anything before we go back to the drawing board :)

working code pre beta below for reference:

// inside row.cells.map
<td colSpan={...}>
  {cell.getIsGrouped() && (
  // when grouped, put the number of todos in front of the grouped cell and render expand/collapse icon
    <>
      {table.getCell(row.id, 'todos').renderAggregatedCell()}
      <IconButton
        onClick={() => row.toggleExpanded()}
        sx={{ ml: cellIndex * 3 }}
      >
        {row.getIsExpanded() ? <ArrowDownIcon /> : <ArrowRightIcon />}
      </IconButton>
    </>
  )}
  {!cell.getIsPlaceholder() && <>{cell.renderCell()}</>}
</td>