Function TableSkeleton

packages/react/src/DataTable/Table.tsx:603–638

({cellPadding, columns, rows = 10, ...rest}: TableSkeletonProps<Data>)

}

function TableSkeleton<Data extends UniqueRow>({cellPadding, columns, rows = 10, ...rest}: TableSkeletonProps<Data>) {
  const {gridTemplateColumns} = useTableLayout(columns)
  return (
    <Table {...rest} cellPadding={cellPadding} gridTemplateColumns={gridTemplateColumns}>
      <TableHead>
        <TableRow>
          {Array.isArray(columns)
            ? columns.map((column, i) => {
                return (
                  <TableHeader key={i}>
                    {typeof column.header === 'string' ? column.header : column.header()}
                  </TableHeader>
                )
              })
            : null}
        </TableRow>
      </TableHead>
      <TableBody>
        <TableRow>
          {Array.from({length: columns.length}).map((_, i) => {
            return (
              <TableCell key={i} className="TableCellSkeleton">
                <VisuallyHidden>Loading</VisuallyHidden>
                <div className="TableCellSkeletonItems">
                  {Array.from({length: rows}).map((_, i) => {
                    return <div key={i} className="TableCellSkeletonItem" />
                  })}
                </div>
              </TableCell>
            )
          })}
        </TableRow>
      </TableBody>
    </Table>
  )
}

// ----------------------------------------------------------------------------
// Utilities