Table

Table is a compound component that provides table functionality.

Active

Name	Status
John Doe	Active

variant:

Examples

variant

Different variant options for the Table component.

default

Name	Status
John Doe	Active

striped

Name	Status
John Doe	Active

Installation

npm install @your-design-system/table

import { Table } from "@/components/ui/table"

export function TableDemo() {
  return (
    <Table variant="default">
      {/* Content */}
    </Table>
  )
}

API Reference

This component does not accept any props.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

w-fullcaption-bottomtext-sm

variant Variants

default

striped

[&_tr:nth-child(even)]:bg-muted/50

Design System Compliance

This component is validated against atomic design principles and foundation token usage.

✓ Atomic Design Compliant

This component follows atomic design principles and properly uses foundation tokens.

On This Page