Table

since 1.0

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

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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

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>
  )
}

Tab Nav Tabs

On This Page

Example Install Components Props Examples Large With Footer Medium With Caption With Alignment

Contribute