# Table

> The semantic table primitive. Pair with `<DataTable>` when sortable columns + zebra striping are needed; reach for raw `<Table>` for simple tabular data.

- Category: data-display
- Status: stable (since 0.1.0)
- A11y pattern: https://www.w3.org/TR/wai-aria-practices-1.2/examples/table/table.html
- Tokens: --foreground-primary, --foreground-secondary, --foreground-quaternary, --background-secondary
- Playground: https://design.freecodecamp.org/playground#table
- npm dependencies: `react@>=18 <20`
- Registry dependencies: [theme](https://design.freecodecamp.org/registry/theme.md)
- Files:
  - `Table.tsx` → `src/ui/table/Table.tsx` (raw: https://design.freecodecamp.org/registry/table/Table.tsx)
  - `table.css` → `src/ui/table/table.css` (raw: https://design.freecodecamp.org/registry/table/table.css)

## Install (copy source)

1. Ensure the theme is installed once per project - tokens.css + base.css imported globally, fonts available. See https://design.freecodecamp.org/registry/theme.md and https://design.freecodecamp.org/registry/starter.md.
2. Copy the files below into `src/ui/table/` (adjust to your project layout) and import the CSS once from your global stylesheet, e.g. `@import './ui/table/table.css';`.
3. Colors, spacing and type come from tokens - tailor the component by editing the copied source; recolour by editing tokens.css, not the component CSS.

## Usage

`<Table>` is the thin semantic wrapper over `<table>` / `<thead>` /
`<tbody>` - it applies the Command-line Chic surface styling and
exposes compound sub-components (`Table.Head`, `Table.Body`,
`Table.Row`, `Table.Cell`) so you don't restyle every row by hand.

## Accessibility

Renders a native `<table>`; screen readers announce row/column counts
automatically. Always include a `caption` when the table stands alone
on a page, or wrap in a `<section aria-labelledby>` when the heading
lives nearby. Use `scope="col"` or `scope="row"` on header cells so
cell-to-header associations survive linearised reading.

## Example

```tsx
import { Table } from './ui/table/Table';
import { Badge } from './ui/badge/Badge';

<Table>
  <thead>
    <tr><th>Certification</th><th>Projects</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Responsive Web Design</td><td>5 / 5</td><td><Badge variant="success">Passed</Badge></td></tr>
  </tbody>
</Table>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `striped` | `boolean` | no | - |  |
| `condensed` | `boolean` | no | - |  |

## Source: Table.tsx

```tsx
import React, { forwardRef } from 'react';

export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
  striped?: boolean;
  condensed?: boolean;
}

export const Table = forwardRef<HTMLTableElement, TableProps>(
  ({ striped, condensed, className = '', children, ...rest }, ref) => {
    const classes = [
      'table',
      striped && 'table--striped',
      condensed && 'table--condensed',
      className
    ]
      .filter(Boolean)
      .join(' ');
    return (
      <table ref={ref} className={classes} {...rest}>
        {children}
      </table>
    );
  }
);
Table.displayName = 'Table';
```

## Source: table.css

```css
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.table th,
.table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--background-tertiary);
  text-align: left;
}
.table th {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--foreground-muted);
  font-weight: 700;
}
.table--striped tbody tr:nth-child(odd) {
  background: var(--background-secondary);
}
.table--condensed th,
.table--condensed td {
  padding: 6px 10px;
}
```

## HTML / vanilla variant

```html
<table class="table">
  <thead><tr><th>Certification</th><th>Projects</th><th>Status</th></tr></thead>
  <tbody>
    <tr><td>Responsive Web Design</td><td>5 / 5</td><td><span class="badge badge--success">Passed</span></td></tr>
  </tbody>
</table>
```

Interactive behaviours for plain HTML come from the vanilla runtime (data-uikit-* attributes): https://design.freecodecamp.org/registry/vanilla.md - or download https://design.freecodecamp.org/cdn/uikit.global.js once and self-host it (do not hotlink).

## For coding agents

This library is distributed as copyable source, not an npm package. Start at https://design.freecodecamp.org/registry/starter.md, discover components via https://design.freecodecamp.org/llms.txt, and copy files into the consuming project. Keep token names intact; recolour by editing the copied tokens.css.