Faber UI
Components

Table

A styled HTML table.

Table is a styled wrapper around the native HTML table elements, with consistent spacing and borders.

Installation

Terminal
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/table.json

Usage

typescript
"use client";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export default function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Jane Doe</TableCell>
          <TableCell>jane@example.com</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Examples

Default

NameEmailRole
Jane Doejane@example.comAdmin
John Smithjohn@example.comMember

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

PartBuilt onProps
Tabledata-slot="table"<table>HTML—
TableHeaderdata-slot="table-header"<thead>HTML—
TableBodydata-slot="table-body"<tbody>HTML—
TableFooterdata-slot="table-footer"<tfoot>HTML—
TableRowdata-slot="table-row"<tr>HTML—
TableHeaddata-slot="table-head"<th>HTML—
TableCelldata-slot="table-cell"<td>HTML—
TableCaptiondata-slot="table-caption"<caption>HTML—

Changelog

  1. v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Full Table history

Last updated on

On this page