Display skeleton rows during initial load

[taschetto]

Hi! I want to display an arbitrary number of rows whilst fetching the first page. Here's what I got:

Visually it is what I want. But the code doesn't seem any good.

{loading &&
  Array.from({ length: skeletonRows }).map(() => {
    return headerGroups.map(headerGroup => (
      <tr {...headerGroup.getHeaderGroupProps()}>
        {headerGroup.headers.map(column => (
          <td {...column.getHeaderProps()}>
            <Skeleton />
          </td>
        ))}
      </tr>
    ))
  })}

Does anyone have a better approach to this?

[GuptaSiddhant]

Hi,

Recently I had added Skeleton loading to my table. First I attempted what you're doing but I quickly went ahead with other approach.

The idea is to change the data & columns array passed to useTable if the content is loading. The following code create 30 rows (you can change according to your requirement) with empty data, and replace each cell with Skeleton component.
The good thing is your column headers/footers are intact.

const Table = (columns, data) => {
  ...
  const tableData = React.useMemo(
    () => (loading ? Array(30).fill({}) : data),
    [loading, data]
  ); 
  const tableColumns = React.useMemo(
    () =>
      loading
        ? columns.map((column) => ({
            ...column,
            Cell: <Skeleton />,
          }))
        : columns,
    [loading, columns]
  );

  useTable({ columns: tableColumns, data: tableData });
 ...
}

[Skia69]

This answer didn't work for me. Instead of returning the <Skeleton />,in the table cell, it returned undefined.

Same goes here

The cells returned are undefined and i have no clue how to fix it

[jslyonnais]

use cell with a function return instead of Cell

const columnsMemo = useMemo(
    () =>
      isLoading
        ? columns.map((column) => ({
            ...column,
            cell: () => <Skeleton />,
          }))
        : columns,
    [isLoading, columns]
  );

[jsaunders92]

I don't suppose anyone has an example of this by any chance?

[mbyrne00]

Works a treat for me ... for those looking for the Skeleton component it's in mui. But you can swap out for your favourite component. The concept is the same ... fill x number of dummy rows and make sure every col definition has a cell function defined that returns your placeholder element.

Thanks @GuptaSiddhant

[JulienLemaitre]

If you're using Chakra UI, add a height to the Skeleton component.

cell: () => <Skeleton height="20px" />,

[sagar-jani]

Unfortunately this give me issues with {table.getHeaderGroups().map((headerGroup) => ( code.

Here is how I'm using with ShadCN

export function DataTableDemo({ data, loading }) {
  console.log('data', data);
  const [sorting, setSorting] = React.useState([]);
  const [columnFilters, setColumnFilters] = React.useState([]);
  const [columnVisibility, setColumnVisibility] = React.useState({});
  const [rowSelection, setRowSelection] = React.useState({});

  const tableData = React.useMemo(
    () => (loading ? Array(30).fill({}) : data),
    [loading, data]
  );
  const tableColumns = React.useMemo(
    () =>
      loading
        ? columns.map((column) => ({
            ...column,
            Cell: () => (
              <Skeleton className="h-[14px] w-[60%] rounded-sm absolute left-3 top-[39px]" />
            )
          }))
        : columns,
    [loading]
  );

  const table = useReactTable({
    tableData,
    tableColumns,
    onSortingChange: setSorting,
    onColumnFiltersChange: setColumnFilters,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
      getPaginationRowModel: getPaginationRowModel()
    }
  });

[dmitry-mitrakhovich]

 const tableColumns = React.useMemo(
    () =>
      loading
        ? columns.map((column) => ({
            ...column,
            cell: () => (
              <Skeleton className="h-[14px] w-[60%] rounded-sm absolute left-3 top-[39px]" />
            )
          }))
        : columns,
    [loading]
  );

Use cell instead Cell