This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

SkeletonRow

How to use SkeletonRow

Use the SkeletonRow component to create a better loading state for your tables whenever they use asynchronous data.

Import

import { SkeletonRow } from '@contentful/f36-components';
// or
import { SkeletonRow } from '@contentful/f36-skeleton';

Code examples

Best practices

  • Pass a value to the columnCount prop equal to the number of columns in your table (default value is 5)
  • Pass a value to the rowCount prop equal to the number of rows you need. We think that for a better experience this value should match the number of rows that this table usually has when it's first loaded.
  • Only use this component as a child of the TableBody component. The SkeletonRow component renders <tr> tags, and this HTML tag should always be a child of a <tbody> tag

Props

NameRequiredDefaultTypeDescription
columnCount5numberDefines the number of columns to be rendered
rowCount1numberDefines the number of rows to be rendered