--mrt-paper-width: 0 when data of the table is empty

[WojakGra]

When MantineReactTable is mounted inside a hidden container (e.g. inactive Mantine Tabs.Panel and the dataset is empty, the table calculates --mrt-paper-width incorrectly on the first render. This causes the "no data" row to stretch across the whole table or render with wrong width. The layout becomes correct only after a rerender (for example, toggling a filter or switching tabs). As a workaround, I detect when the table enters the viewport and call table.resetColumnSizing() inside requestAnimationFrame to force a recalculation.

const { ref, inViewport } = useInViewport()
  useEffect(() => {
    if (!inViewport) {
      return
    }

    const raf = requestAnimationFrame(() => {
      table.resetColumnSizing()
    })

    return () => cancelAnimationFrame(raf)
  }, [table, inViewport])

[WojakGra]

Fixed it by using renderEmptyRowsFallback:

getDefaultMRTOptions.ts:

import RenderEmptyRowsFallbackComponent from './RenderEmptyRowsFallbackComponent'

export const getDefaultMRTOptions = <TData extends MRT_RowData>(): Partial<MRT_TableOptions<TData>> => ({
  // ...

  renderEmptyRowsFallback: RenderEmptyRowsFallbackComponent,

  // ...
})

RenderEmptyRowsFallbackComponent.tsx

import { Text } from '@mantine/core'

const RenderEmptyRowsFallbackComponent = () => (
  <Text size="xl" c="dimmed" p="md" ta="center" fs="italic">
    Brak wierszy do wyświetlenia
  </Text>
)

export default RenderEmptyRowsFallbackComponent