Table

---
// src/components/ui/display/table/Table.astro — headless primitive (see ../../README.md).
// Static <table> in a wrapper meant to scroll horizontally. Compose TableHeader / TableBody /
// TableFooter / TableRow / TableHead / TableCell / TableCaption. (Sorting / data-grid behavior is out
// of scope.) The wrapper is the one place a theme should put `overflow-x: auto` — a table is the
// classic element that must be allowed to out-width its column while the page body never does.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"table">;

const { class: className, ...rest } = Astro.props;
---

<div data-slot="table-container">
  <table class={className} data-slot="table" {...rest}>
    <slot />
  </table>
</div>

---
// src/components/ui/display/table/TableBody.astro — Table compound part (see ../../README.md). Wraps <tbody>.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"tbody">;

const { class: className, ...rest } = Astro.props;
---

<tbody class={className} data-slot="table-body" {...rest}><slot /></tbody>

---
// src/components/ui/display/table/TableCaption.astro — Table compound part (see ../../README.md). Wraps <caption>.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"caption">;

const { class: className, ...rest } = Astro.props;
---

<caption class={className} data-slot="table-caption" {...rest}><slot /></caption>

---
// src/components/ui/display/table/TableCell.astro — Table compound part (see ../../README.md). Wraps <td>.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"td">;

const { class: className, ...rest } = Astro.props;
---

<td class={className} data-slot="table-cell" {...rest}><slot /></td>

---
// src/components/ui/display/table/TableFooter.astro — Table compound part (see ../../README.md). Wraps <tfoot>.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"tfoot">;

const { class: className, ...rest } = Astro.props;
---

<tfoot class={className} data-slot="table-footer" {...rest}><slot /></tfoot>

---
// src/components/ui/display/table/TableHead.astro — Table compound part (see ../../README.md). Wraps <th>; pass
// `scope="col"` / `scope="row"` through for assistive tech.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"th">;

const { class: className, ...rest } = Astro.props;
---

<th class={className} data-slot="table-head" {...rest}><slot /></th>

---
// src/components/ui/display/table/TableHeader.astro — Table compound part (see ../../README.md). Wraps <thead>.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"thead">;

const { class: className, ...rest } = Astro.props;
---

<thead class={className} data-slot="table-header" {...rest}><slot /></thead>

---
// src/components/ui/display/table/TableRow.astro — Table compound part (see ../../README.md). Wraps <tr>.
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"tr">;

const { class: className, ...rest } = Astro.props;
---

<tr class={className} data-slot="table-row" {...rest}><slot /></tr>

import Table from "./Table.astro";
import TableBody from "./TableBody.astro";
import TableCaption from "./TableCaption.astro";
import TableCell from "./TableCell.astro";
import TableFooter from "./TableFooter.astro";
import TableHead from "./TableHead.astro";
import TableHeader from "./TableHeader.astro";
import TableRow from "./TableRow.astro";

export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
export default Table;