SkeletonRow

Import

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

Examples

• 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.

Basic usage

Hide code
function SkeletonRowBasicExample() {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell>Name</Table.Cell>
          <Table.Cell>Email</Table.Cell>
          <Table.Cell>Address</Table.Cell>
          <Table.Cell>Postcode</Table.Cell>
          <Table.Cell>City</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <SkeletonRow rowCount={5} columnCount={5} />
      </Table.Body>
    </Table>
  );
}
function SkeletonRowBasicExample() {
  return (
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Cell>Name</Table.Cell>
          <Table.Cell>Email</Table.Cell>
          <Table.Cell>Address</Table.Cell>
          <Table.Cell>Postcode</Table.Cell>
          <Table.Cell>City</Table.Cell>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <SkeletonRow rowCount={5} columnCount={5} />
      </Table.Body>
    </Table>
  );
}
Open in Playground