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

Usage

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@kernelui/react";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Service</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Uptime</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>API</TableCell>
      <TableCell>Operational</TableCell>
      <TableCell>99.98%</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Dashboard</TableCell>
      <TableCell>Operational</TableCell>
      <TableCell>99.95%</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Webhooks</TableCell>
      <TableCell>Degraded</TableCell>
      <TableCell>98.71%</TableCell>
    </TableRow>
  </TableBody>
</Table>

Components

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