TableCaption

@coinbase/cds-web@8.38.5

Sets an accessible title or caption for Table.

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

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Related components

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

Basic usage

Loading...

󰙡

Live Code

<Table bordered>
  <TableCaption>Simple Table Caption</TableCaption>
  <TableHeader>
    <TableRow>
      <TableCell title="Name" />
      <TableCell title="Role" />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell title="John Doe" />
      <TableCell title="Developer" />
    </TableRow>
  </TableBody>
</Table>

Custom Content

Loading...

󰙡

Live Code

<Table bordered>
  <TableCaption>
    <VStack gap={1}>
      <Text as="h2" font="title2" color="primary">
        Project Team
      </Text>
      <Text as="p" color="foregroundMuted">
        Updated as of March 2024
      </Text>
    </VStack>
  </TableCaption>
  <TableHeader>
    <TableRow>
      <TableCell title="Name" />
      <TableCell title="Role" />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell title="John Doe" />
      <TableCell title="Developer" />
    </TableRow>
  </TableBody>
</Table>

Styling Options

Loading...

󰙡

Live Code

<Table bordered>
  <TableCaption
    align="center"
    color="fgPrimary"
    backgroundColor="bgAlternate"
    innerSpacing={{ spacingHorizontal: 2, spacingVertical: 1 }}
    outerSpacing={{ spacingHorizontal: 0, spacingVertical: 1 }}
  >
    Quarterly Revenue Report
  </TableCaption>
  <TableHeader>
    <TableRow>
      <TableCell title="Quarter" />
      <TableCell title="Revenue" />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell title="Q1 2024" />
      <TableCell title="$1.2M" />
    </TableRow>
  </TableBody>
</Table>