How to show a loading state inside a TanStack created DataTable while awaiting data in an async Server Component?

[nischalmainali21]

Summary

I'm building a table component using TanStack Table (React Table) in a Next.js 14+ app with the App Router. I'm using async Server Components, and I want to show a loading skeleton or state only for the table rows (not the entire table) while data is being fetched.

The only place where does work is where the is imported. But that replaces the entire table.

What I’m looking for:

A pattern or approach to render skeleton rows (with headers visible) while the data is being fetched.

Additional information

//FileTableWrapper.tsx
async function FileTableWrapper({ currentPage }: FileTableWrapperProps) {
  const fileData = await getFiles({ page: currentPage, limit: 1 })
  return (
    <div className="flex w-full flex-col items-center justify-center gap-4">
      <Suspense fallback={<>Loading...</>} key={currentPage}>
        <DataTable data={fileData.data} columns={fileColumns} />
      </Suspense>
      <Pagination currentPage={currentPage} paginationMeta={fileData.meta} />
    </div>
  )
}

//DataTable.tsx
export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <div className="w-full rounded-md border">
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map(headerGroup => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map(header => {
                return (
                  <TableHead key={header.id}>
                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
                  </TableHead>
                )
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map(row => (
              <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
                {row.getVisibleCells().map(cell => (
                  <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  )
}

### Example

_No response_