TableCellFallback

@coinbase/cds-web@8.38.5

Shows a loading state for Table cells.

import { TableCellFallback } from '@coinbase/cds-web/tables/TableCellFallback'

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Related components

• Table,
• TableBody,
• TableCaption,
• TableCell,
• TableFooter,
• TableHeader,
• TableRow

Basic usage

Loading...

󰙡

Live Code

<Table bordered variant="graph">
  <TableHeader>
    <TableRow>
      <TableCellFallback title />
      <TableCellFallback title subtitle />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCellFallback title subtitle start="image" />
      <TableCellFallback title subtitle end="image" />
    </TableRow>
    <TableRow>
      <TableCellFallback title subtitle start="asset" />
      <TableCellFallback title subtitle end="asset" />
    </TableRow>
  </TableBody>
</Table>

Media Types

Loading...

󰙡

Live Code

<Table bordered variant="graph">
  <TableBody>
    <TableRow>
      <TableCellFallback title subtitle start="avatar" />
      <TableCellFallback title subtitle start="icon" />
    </TableRow>
    <TableRow>
      <TableCellFallback title subtitle start="pictogram" />
      <TableCellFallback title subtitle start="image" />
    </TableRow>
  </TableBody>
</Table>

Custom Rectangle Widths

󰔂

Rectangular fallback widths

This component contains rectangular fallbacks, the widths for which are randomized within a predetermined threshold by default (e.g. to add some variety when mulitple fallbacks are presented together). If this behavior is undesirable (e.g. in server-side rendered web apps), randomization can be disabled with the disableRandomRectWidth prop.

Alternatively, you may create a variant with different rectangle widths by setting a number value on the rectWidthVariant prop. Variants map to a predetermined set of width values, which are cycled through repeatedly when the set is exhausted. Therefore, it's still possible to achieve some variety in your fallbacks, but in a deterministic manner (i.e. safe for server-side rendering). Here's an example:

Loading...

󰙡

Live Code

<Table bordered variant="graph">
  <TableBody>
    <TableRow>
      <TableCellFallback title subtitle start="image" rectWidthVariant={0} disableRandomRectWidth />
      <TableCellFallback title subtitle end="image" rectWidthVariant={1} disableRandomRectWidth />
    </TableRow>
    <TableRow>
      <TableCellFallback title subtitle start="asset" rectWidthVariant={2} disableRandomRectWidth />
      <TableCellFallback title subtitle end="asset" rectWidthVariant={3} disableRandomRectWidth />
    </TableRow>
  </TableBody>
</Table>