bigbullui logobigbullui
Componentdata

Table

Data table with dashed row dividers and mono headers.

Preview

Live Preview
SeatTierStatus
A-12OrchestraAdmitted
B-04BalconyStandby

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add table

Or install the full npm package:

npm install bigbullui

Usage

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

<Table>
  <TableHead>
    <TableRow>
      <TableHeaderCell>Seat</TableHeaderCell>
      <TableHeaderCell>Status</TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>A-12</TableCell>
      <TableCell>Admitted</TableCell>
    </TableRow>
  </TableBody>
</Table>

Source code

table.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export function Table({
  className,
  ...props
}: React.TableHTMLAttributes<HTMLTableElement>) {
  return (
    <div className="relative w-full overflow-auto rounded-lg border border-border bg-card">
      <table className={cn("w-full caption-bottom text-sm", className)} {...props} />
    </div>
  );
}

export function TableHead({
  className,
  ...props
}: React.HTMLAttributes<HTMLTableSectionElement>) {
  return (
    <thead
      className={cn(
        "border-b-2 border-dashed border-border bg-secondary/60 text-left font-mono text-xs uppercase tracking-wider text-muted-foreground",
        className
      )}
      {...props}
    />
  );
}

export function TableBody({
  className,
  ...props
}: React.HTMLAttributes<HTMLTableSectionElement>) {
  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;
}

export function TableRow({
  className,
  ...props
}: React.HTMLAttributes<HTMLTableRowElement>) {
  return (
    <tr
      className={cn(
        "border-b border-dashed border-border transition-colors hover:bg-secondary/40",
        className
      )}
      {...props}
    />
  );
}

export function TableHeaderCell({
  className,
  ...props
}: React.ThHTMLAttributes<HTMLTableCellElement>) {
  return (
    <th
      className={cn("h-10 px-4 text-left align-middle font-medium font-mono text-xs", className)}
      {...props}
    />
  );
}

export function TableCell({
  className,
  ...props
}: React.TdHTMLAttributes<HTMLTableCellElement>) {
  return (
    <td
      className={cn("p-4 align-middle font-mono text-xs text-foreground", className)}
      {...props}
    />
  );
}