Table

Component

Full-featured data table component with sorting, striping, and responsive design.

Installation & Usage

Basic Usage

import { 
  Table, 
  TableHeader, 
  TableBody, 
  TableRow, 
  TableHead, 
  TableCell 
} from 'dotti'

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>Developer</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Basic Table

Simple table with headers and data rows.

Name	Role	Status
John Doe	Developer	Active
Jane Smith	Designer	Pending
Bob Johnson	Manager	Inactive

Code

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>Developer</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>Designer</TableCell>
      <TableCell>Pending</TableCell>
    </TableRow>
  </TableBody>
</Table>

Striped Table

Table with alternating row colors for better readability.

ID	Product	Price	Stock	Category
001	Laptop Pro	$1,299	15	Electronics
002	Wireless Mouse	$29	50	Accessories
003	USB-C Cable	$15	100	Cables
004	Monitor Stand	$89	25	Accessories

Code

<Table variant="striped">
  <TableHeader>
    <TableRow>
      <TableHead>ID</TableHead>
      <TableHead>Product</TableHead>
      <TableHead>Price</TableHead>
      <TableHead>Stock</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>001</TableCell>
      <TableCell>Laptop Pro</TableCell>
      <TableCell>$1,299</TableCell>
      <TableCell>15</TableCell>
    </TableRow>
    {/* More rows... */}
  </TableBody>
</Table>

Sortable Table

Table with sortable columns and hover states.

Name	Email	Join Date
Alice Cooper	alice@example.com	2024-01-15
Bob Wilson	bob@example.com	2024-02-20
Carol Davis	carol@example.com	2024-03-10

Code

<Table variant="hover">
  <TableHeader>
    <TableRow>
      <TableHead sortable>Name</TableHead>
      <TableHead sortable>Email</TableHead>
      <TableHead sortable>Join Date</TableHead>
      <TableHead>Actions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>
        <div className="flex items-center space-x-3">
          <Avatar size="sm" src="" alt="User" />
          <span>Alice Cooper</span>
        </div>
      </TableCell>
      <TableCell>alice@example.com</TableCell>
      <TableCell>2024-01-15</TableCell>
      <TableCell>
        <Button size="sm" variant="ghost">View</Button>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Compact Table

Dense table layout for displaying more data in less space.

Recent Transactions

24 items

Date	Description	Amount	Type
Dec 15	Online Purchase	-$49.99	Debit
Dec 14	Salary Deposit	+$3,200.00	Credit
Dec 13	Coffee Shop	-$4.50	Debit
Dec 12	Refund	+$25.00	Credit

Code

<Table size="sm" variant="bordered">
  <TableHeader>
    <TableRow>
      <TableHead>Date</TableHead>
      <TableHead>Description</TableHead>
      <TableHead>Amount</TableHead>
      <TableHead>Type</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Dec 15</TableCell>
      <TableCell>Online Purchase</TableCell>
      <TableCell>-$49.99</TableCell>
      <TableCell>
        <Badge variant="default" size="sm">Debit</Badge>
      </TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

TypeScript Support

All components are fully typed with TypeScript. Check your IDE for prop suggestions and documentation.