TableBody

@coinbase/cds-web@8.34.1

Defines the body section of Table.

Import

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

SourceView source code

---

Related components

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

---

󰏖

View as Markdown

Basic usage

Loading...

󰙡

Live Code

<Table bordered>
  <TableHeader>
    <TableRow>
      <TableCell>Header</TableCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Content</TableCell>
    </TableRow>
  </TableBody>
</Table>

Loading State Example

Loading...

󰙡

Live Code

<Table bordered variant="ruled">
  <TableHeader>
    <TableRow>
      <TableCell title="TableHeader" />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell height={320} alignItems="center" justifyContent="center">
        <Spinner size={4} color="primary" />
        <Text as="p" font="headline" spacingTop={2} color="foregroundMuted">
          Loading content...
        </Text>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Multiple Rows Example

Loading...

󰙡

Live Code

<Table bordered>
  <TableHeader>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Role</TableCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>Developer</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>Designer</TableCell>
    </TableRow>
  </TableBody>
</Table>