Table (Shared)

Data table with header, body, footer, and caption sub-components. Responsive scrolling and hover row states.

Invoice	Status	Method	Amount
INV-001	Paid	Card	$250.00
INV-002	Pending	Transfer	$150.00
INV-003	Unpaid	Card	$350.00
INV-004	Paid	PayPal	$450.00

Overview

Table provides a set of composable sub-components for building data tables. The root wraps in a scrollable container for responsive behavior. Row hover states and alternating styles are built in.

Usage

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Jane</TableCell>
      <TableCell>jane@example.com</TableCell>
    </TableRow>
  </TableBody>
</Table>

Installation

Install via CLI

TypeScript

npx edbn-ui@latest add table

Examples

Basic Table

Invoice	Status	Amount
INV-001	Paid	$250.00
INV-002	Pending	$150.00
INV-003	Unpaid	$350.00

With Caption

Recent invoices
Invoice	Amount
INV-001	$250.00
INV-002	$150.00

Sub-components

Tabletable

Root — wraps in scrollable container

TableHeaderthead

Header grouping with border-bottom on rows

TableBodytbody

Body grouping, last row has no border

TableFootertfoot

Footer with muted background

TableRowtr

Row with hover highlight and border

TableHeadth

Header cell — muted text, medium font

TableCelltd

Data cell with aligned padding

TableCaptioncaption

Bottom caption in muted text