Table

Basic table components for displaying structured data.

Import

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui';

Basic Usage

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>jane@example.com</TableCell>
      <TableCell>Pending</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Table

Prop Type Default Description
shouldStretch boolean true Whether table should stretch to fill container
className string - Additional CSS classes

Components

Component Description
Table Root table element
TableHeader <thead> with styled background
TableBody <tbody> container
TableRow <tr> with hover effect
TableHead <th> styled header cell
TableCell <td> styled data cell

Complete Example

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Badge, Button } from '@/components/ui';

const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'pending' },
  { id: 3, name: 'Bob Wilson', email: 'bob@example.com', status: 'inactive' },
];

export function UsersTable() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {users.map((user) => (
          <TableRow key={user.id}>
            <TableCell className="font-medium">{user.name}</TableCell>
            <TableCell>{user.email}</TableCell>
            <TableCell>
              <Badge variant={user.status === 'active' ? 'success' : 'default'}>
                {user.status}
              </Badge>
            </TableCell>
            <TableCell>
              <Button size="sm" outline>Edit</Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

With Card

import { Card } from '@/components/ui';

<Card className="overflow-hidden">
  <Table>
    {/* Table content */}
  </Table>
</Card>

Custom Cell Styling

<TableCell className="text-right font-mono">
  $1,234.56
</TableCell>

<TableCell className="max-w-xs truncate">
  Long text that will be truncated...
</TableCell>

For Advanced Features

For pagination, sorting, filtering, and server-side data:

import { DataTable } from '@/components/ui/data-table/DataTable';

See DataTable for advanced data table features.