Using <div /> elements for TableBody component produces TypeScript errors

[2Pacalypse-]

Describe the bug When using a custom TableBody component, we need to forward a ref to it. However, react-virtuoso types expect this ref to point to a tbody element, so when I try to use a div element instead, I get a TypeScript error.

Reproduction

<TableVirtuoso
  components={{
    TableBody: React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>) => (
      <div ref={ref} {...props} />
    )),
  }}
/>

Expected behavior It would be nice if we could use the non-tbody elements for TableBody component without resorting to using as any.

[petyosi]

I'm still unsure why you do tables with divs, but to each their own. Feel free to submit a PR over the matter.

[tigranpetrossian]

Hi @petyosi, browser's native behavior for tables can sometimes get in the way when it comes to making native-like data tables: sometimes entire rows can have context menus, or be link/other clickable context for sighted users, while maintaining table semantics for screen readers. There's also random quirks (as it's always the case with the web) like sticky headers behaving weirdly in Chrome when borders are collapsed, etc.

I think this is a valid issue, the TypeScript bits can be technically silenced by assertion in the userland, but the library also injects a tr -> td filler that triggers validateDomNesting errors from react-dom. I'll look into sending a PR once I figure out how the latter works.

[petyosi]

@tigranpetrossian the filler is also exposed as a custom component. https://virtuoso.dev/api/interfaces/_interfaces_.tablecomponents#fillerrow

[tigranpetrossian]

Thanks @petyosi ❤️ Found that out after digging deeper.

[ArturKustyaev]

any updates?