# Table

> A tabular data display built on the native `<table>` element, with column headers that become sort links and a trailing row that becomes a "load more" link — both driven entirely by URLs a consumer computes, so the sorted or paginated result renders back from the server with no client state to track.

```ts
import { Table } from "@sdxc/ui";
```

Renders the table's `<table>` host: a full-width, border-collapsed grid
with a small base font size, ready to hold Table.Header and
Table.Body. Dev mode warns when it lacks an accessible name.

## Examples

```tsx
<Table aria-label={t("subjects.title")}>
	<Table.Header>
		<Table.Row>
			<Table.Column>{t("subjects.name")}</Table.Column>
		</Table.Row>
	</Table.Header>
	<Table.Body>
		<Table.Row>
			<Table.Cell>{subject.name}</Table.Cell>
		</Table.Row>
	</Table.Body>
</Table>
```

## Props

Also accepts everything in `TagProps<"table">`.


### Table.Container

Renders an optional wrapper around Table: a relatively positioned `<div>` that scrolls its own inline axis when the table grows wider than the available space, and declares the `ui-table` named container.

Also accepts everything in `TagProps<"div">`.


### Table.Header

Renders the table's `<thead>` host: a plain wrapper for the header Table.Row, separated from Table.Body by a block-end border.

Also accepts everything in `TagProps<"thead">`.


### Table.Body

Renders the table's `<tbody>` host: a block-start border rules the space between direct row children, and `content-visibility: auto` lets a long body's off-screen rows skip layout and paint until they scroll into view.

Also accepts everything in `TagProps<"tbody">`.


### Table.Column

Renders a column header inside a native `<th scope="col">`, aligned by `data-align`.

| Prop | Type | Description |
| --- | --- | --- |
| `align?` | `"start" \| "center" \| "end"` | Text alignment for the header and its indicator. Defaults to DEFAULT_ALIGN, or DEFAULT_NUMERIC_ALIGN for a `numeric` column. |
| `numeric?` | `boolean` | Marks the column as holding numbers, exposed as `data-numeric`: the header aligns to the end unless `align` says otherwise, matching `numeric` cells beneath it. |
| `href?` | `string` | Target URL that re-requests the table sorted by this column. Omit for an unsortable column. |
| `sortDirection?` | `"ascending" \| "descending"` | This column's current sort direction, when it's the active sort key. |
| `parts?` | `ColumnPartsProps` | Per-part styling for the sortable header's internal elements. |

Also accepts everything in `Omit<TagProps<"th">, "align">`.


### Table.Row

Renders a native `<tr>` host: transitions its background smoothly, tints it on hover, and tints it more strongly when it carries `aria-selected="true"`, set directly since selection state is native.

Also accepts everything in `TagProps<"tr">`.


### Table.Cell

Renders a native `<td>` host, padded on every side and colored as the table's emphasized foreground text; a `numeric` cell end-aligns tabular figures.

| Prop | Type | Description |
| --- | --- | --- |
| `numeric?` | `boolean` | Marks the cell as a number, exposed as `data-numeric`: its figures render at tabular widths and align to the end, so digits line up down the column. |

Also accepts everything in `TagProps<"td">`.


### Table.LoadMore

Renders a trailing row carrying a single link that spans every column, standing in for an auto-loading "next page" trigger since fetching more rows without a full navigation requires script a consumer attaches.

| Prop | Type | Description |
| --- | --- | --- |
| `href` | `string` | Target URL that renders the next page of results. |
| `colSpan` | `number` | Number of columns the surrounding table renders, so the link spans the full row width. |
| `children` | `RemixNode` | The link's visible label, e.g. "Load more" or "Next page". |
| `parts?` | `LoadMorePartsProps` | Per-part styling for the row's internal cell and link. |

Also accepts everything in `TagProps<"tr">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Align` | `"start" \| "center" \| "end"` | Text alignment for a column's header and, by convention, its cells. |
| `SortDirection` | `"ascending" \| "descending"` | Current sort direction for a sortable column, matching the values the native `aria-sort` attribute accepts. |