Table

A thin set of wrappers around the real <table>family: <caption>, <thead>,<tbody>, and <th scope="col">. Sighted, mouse, keyboard, and screen reader users all get a real table, not a grid of styled <div>s pretending to be one.

Component status
Component	Status
Button	Available
Tooltip	Planned
Dialog	Available

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

Service	Status
API	Operational
Webhooks	Degraded

Unstyled

Same component — Kernel look stripped. See Platforms.

row 1 service

row 1 status

Usage

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Service</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>API</TableCell>
      <TableCell>Operational</TableCell>
    </TableRow>
  </TableBody>
</Table>

<kernel-table>
  <kernel-table-header>
    <kernel-table-row>
      <kernel-table-head>Service</kernel-table-head>
      <kernel-table-head>Status</kernel-table-head>
    </kernel-table-row>
  </kernel-table-header>
  <kernel-table-body>
    <kernel-table-row>
      <kernel-table-cell>API</kernel-table-cell>
      <kernel-table-cell>Operational</kernel-table-cell>
    </kernel-table-row>
  </kernel-table-body>
</kernel-table>

Components

Props for Table.
Component	Renders
`Table`	`<table>`
`TableCaption`	`<caption>`
`TableHeader`	`<thead>`
`TableBody`	`<tbody>`
`TableRow`	`<tr>`
`TableHead`	`<th scope="col">` by default
`TableCell`	`<td>`