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

[dmnlgn]

and you should change tableData to data: tableData, and tableColumns to columns: tableColumns

[Dezmonter]

const tableColumns = useMemo<ColumnDef<TData, TValue>[]>(
() =>
	loading
		? columns.map((column) => {
			if ('columns' in column) {
				return {
					...column,
					columns: column.columns?.map((nestedColumn) => ({
						...nestedColumn,
						cell: () => (
							<Skeleton className="h-[20px] w-[80%] rounded-lg" />
						),
					})),
				}
			}

			return {
				...column,
				cell: () => (
					<Skeleton className="h-[20px] w-[80%] rounded-lg" />
				),
			}
		})
		: columns,
[loading]
)

This is my solution for working with grouped columns

[fblettner]

I did this in the table body. Keep Table header as it is and add condition for loading only into the body :

isLoading
                            ? (
                                <TableBody>
                                    {renderSkeletonRows()}
                                </TableBody>)
                            : table.getRowModel().rows.length === 0
                                ? null
                                : (
                                    <LYTableBody
                                        rowVirtualizer={rowVirtualizer}
                                        table={table}
                                        tableState={tableState}
                                        tableRef={tableRef}
                                        onSelect={onSelect}
                                        onMouseDown={onMouseDown}
                                        onTouchStart={onTouchStart}
                                        onTouchEnd={onTouchEnd}
                                        onDoubleClick={onDoubleClick}
                                    />
                                )

and renderSkeletonRows is this one :

    const renderSkeletonRows = () => (
        <Fragment>
            {/* Render 10 skeleton rows as a placeholder while loading */}
            {Array.from(new Array(10)).map((_, index) => (
                <TableRow key={index}>
                    {/* Render skeleton cells for each visible column */}
                    {table.getVisibleLeafColumns().map((column) => (
                        <TableCell key={column.id}>
                            <Skeleton variant="rounded" width="100%" height={8} />
                        </TableCell>
                    ))}
                </TableRow>
            ))}
        </Fragment>
    );

Table and Skeleton are custom components in my framework because I have completely remove any MUI dependencies

You can find full code for this here : /~https://github.com/fblettner/liberty/blob/main/frontend/src/components/forms/FormsTable/views/TableGrid.tsx