Component

Table

Composable table pieces for compact API references, ledgers, and settings matrices.

Preview

Entry	Type	Amount
Lunch with Mara	Food	$18.40
Design invoice	Income	$2,450

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Table } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/table.json

Copied source import

code

import "@/styles/axie.css";import { Table } from "@/components/axie/table";

Prefer @axie/table? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "axie-ui";export function Example() {  return (    <Table>      <TableHeader>        <TableRow>          <TableHead>Entry</TableHead>          <TableHead>Amount</TableHead>        </TableRow>      </TableHeader>      <TableBody>        <TableRow>          <TableCell>Lunch with Mara</TableCell>          <TableCell>$18.40</TableCell>        </TableRow>      </TableBody>    </Table>  );}

Accessibility

Use table headers for every data column.
Keep horizontal scrolling inside the table wrapper instead of the page.
Align numeric values consistently and include units in headers or cells.

API Reference

Prop	Type	Default	Description
Table	TableHTMLAttributes<HTMLTableElement>	-	Table wrapper and native table props.
TableHeader, TableBody	HTMLAttributes<HTMLTableSectionElement>	-	Semantic table sections.
TableHead, TableCell	ThHTMLAttributes \| TdHTMLAttributes	-	Header cells and body cells.
TableRow	HTMLAttributes<HTMLTableRowElement>	-	Rows with hover treatment.