bigbullui logobigbullui
Componentdata0.52 KB gzipZero dependencies

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

Open in StackBlitz
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>

Usage guidance

Use Table when a ticket stub surface needs Data table with dashed row dividers and mono headers. Keep props minimal and prefer composition with sibling stubs.

Avoid Table for long form flows or dense data grids where a dedicated layout block fits better.

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-start 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-start 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}
    />
  );
}

Pairs well with

Data TableSortable, searchable data table with row selection and pagination.Data GridHeavy data grid: sortable columns, pagination, sticky header.Table SummaryTable footer summary rows with bolded totals in dashed frame.Row ExpandExpandable row detail panels with height animation.