🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Table

Table is a structured component for displaying data in rows and columns.

Tables organize and present data in a grid format, making it easy to scan, compare, and analyze information across multiple dimensions. They use semantic HTML table elements to ensure proper accessibility and screen reader support. Tables are particularly effective for displaying datasets where relationships between different data points are important, such as financial data, inventory lists, comparison charts, or any structured information that benefits from tabular presentation.

Use tables when data relationships and comparisons are important to understanding the information. For simpler lists or when mobile responsiveness is critical, consider using list components or card layouts instead. Tables should include clear headers, maintain consistent column widths, and provide appropriate visual hierarchy to guide users through the data.

Example

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

"use client"

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@strongtie/design-system/table"

export function TableDefault() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">INV001</TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell className="text-right">$250.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">INV002</TableCell>
          <TableCell>Pending</TableCell>
          <TableCell>PayPal</TableCell>
          <TableCell className="text-right">$150.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">INV003</TableCell>
          <TableCell>Unpaid</TableCell>
          <TableCell>Bank Transfer</TableCell>
          <TableCell className="text-right">$350.00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Installation


npm install @strongtie/design-system

import { Table } from "@strongtie/design-system/table"

Components

This module exports the following components:

Table
TableHeader
TableBody
TableFooter
TableHead
TableRow
TableCell
TableCaption

Props

All components accept standard HTML attributes and React props.

Examples

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00

"use client"

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@strongtie/design-system/table"

export function TableDefault() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell className="font-medium">INV001</TableCell>
          <TableCell>Paid</TableCell>
          <TableCell>Credit Card</TableCell>
          <TableCell className="text-right">$250.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">INV002</TableCell>
          <TableCell>Pending</TableCell>
          <TableCell>PayPal</TableCell>
          <TableCell className="text-right">$150.00</TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="font-medium">INV003</TableCell>
          <TableCell>Unpaid</TableCell>
          <TableCell>Bank Transfer</TableCell>
          <TableCell className="text-right">$350.00</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Large With Footer

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
Total			$2,500.00

"use client"

import {
  Table,
  TableBody,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@strongtie/design-system/table"

const invoices = [
  {
    invoice: "INV001",
    paymentStatus: "Paid",
    totalAmount: "$250.00",
    paymentMethod: "Credit Card",
  },
  {
    invoice: "INV002",
    paymentStatus: "Pending",
    totalAmount: "$150.00",
    paymentMethod: "PayPal",
  },
  {
    invoice: "INV003",
    paymentStatus: "Unpaid",
    totalAmount: "$350.00",
    paymentMethod: "Bank Transfer",
  },
  {
    invoice: "INV004",
    paymentStatus: "Paid",
    totalAmount: "$450.00",
    paymentMethod: "Credit Card",
  },
  {
    invoice: "INV005",
    paymentStatus: "Paid",
    totalAmount: "$550.00",
    paymentMethod: "PayPal",
  },
  {
    invoice: "INV006",
    paymentStatus: "Pending",
    totalAmount: "$200.00",
    paymentMethod: "Bank Transfer",
  },
  {
    invoice: "INV007",
    paymentStatus: "Unpaid",
    totalAmount: "$300.00",
    paymentMethod: "Credit Card",
  },
]

export function TableLargeWithFooter() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="w-[100px]">Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead className="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((invoice) => (
          <TableRow key={invoice.invoice}>
            <TableCell className="font-medium">{invoice.invoice}</TableCell>
            <TableCell>{invoice.paymentStatus}</TableCell>
            <TableCell>{invoice.paymentMethod}</TableCell>
            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell className="text-right">$2,500.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Medium With Caption

A list of recent users
Name	Email	Role	Status
John Doe	john@example.com	Admin	active
Jane Smith	jane@example.com	User	active
Bob Johnson	bob@example.com	User	inactive
Alice Williams	alice@example.com	Editor	active

"use client"

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@strongtie/design-system/table"

const people = [
  {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    role: "Admin",
    status: "active",
  },
  {
    id: 2,
    name: "Jane Smith",
    email: "jane@example.com",
    role: "User",
    status: "active",
  },
  {
    id: 3,
    name: "Bob Johnson",
    email: "bob@example.com",
    role: "User",
    status: "inactive",
  },
  {
    id: 4,
    name: "Alice Williams",
    email: "alice@example.com",
    role: "Editor",
    status: "active",
  },
]

export function TableMediumWithCaption() {
  return (
    <Table>
      <TableCaption>A list of recent users</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {people.map((person) => (
          <TableRow key={person.id}>
            <TableCell>{person.name}</TableCell>
            <TableCell>{person.email}</TableCell>
            <TableCell>{person.role}</TableCell>
            <TableCell>
              <span
                className={
                  person.status === "active"
                    ? "text-green-600"
                    : "text-gray-500"
                }
              >
                {person.status}
              </span>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

With Alignment

Product	Category	Price	Quantity	Status
Laptop	Electronics	$999.99	5	In Stock
Mouse	Accessories	$29.99	150	In Stock
Keyboard	Accessories	$79.99	0	Out of Stock
Monitor	Electronics	$299.99	12	In Stock
Webcam	Electronics	$89.99	8	In Stock

"use client"

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@strongtie/design-system/table"

const products = [
  {
    id: 1,
    name: "Laptop",
    category: "Electronics",
    price: 999.99,
    quantity: 5,
    inStock: true,
  },
  {
    id: 2,
    name: "Mouse",
    category: "Accessories",
    price: 29.99,
    quantity: 150,
    inStock: true,
  },
  {
    id: 3,
    name: "Keyboard",
    category: "Accessories",
    price: 79.99,
    quantity: 0,
    inStock: false,
  },
  {
    id: 4,
    name: "Monitor",
    category: "Electronics",
    price: 299.99,
    quantity: 12,
    inStock: true,
  },
  {
    id: 5,
    name: "Webcam",
    category: "Electronics",
    price: 89.99,
    quantity: 8,
    inStock: true,
  },
]

export function TableWithAlignment() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="text-left">Product</TableHead>
          <TableHead className="text-left">Category</TableHead>
          <TableHead className="text-right">Price</TableHead>
          <TableHead className="text-center">Quantity</TableHead>
          <TableHead className="text-center">Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {products.map((product) => (
          <TableRow key={product.id}>
            <TableCell className="text-left font-medium">
              {product.name}
            </TableCell>
            <TableCell className="text-left">{product.category}</TableCell>
            <TableCell className="text-right">
              ${product.price.toFixed(2)}
            </TableCell>
            <TableCell className="text-center">{product.quantity}</TableCell>
            <TableCell className="text-center">
              <span
                className={
                  product.inStock
                    ? "font-medium text-green-600"
                    : "font-medium text-red-600"
                }
              >
                {product.inStock ? "In Stock" : "Out of Stock"}
              </span>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

table
table-body
table-caption
table-cell
table-footer
table-head
table-header
table-row

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Tab Nav Tabs

On This Page

Example Installation Components Props Examples Large With Footer Medium With Caption With Alignment Styling Classes Accessibility

Contribute