Table

A component for displaying tabular data.

Preview

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User
Bob Wilson	bob@example.com	User

Installation

bash

npx auralix-ui add table

Usage

Basic Table

tsx

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Email</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>john@example.com</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Jane Smith</TableCell>
      <TableCell>jane@example.com</TableCell>
      <TableCell>User</TableCell>
    </TableRow>
  </TableBody>
</Table>

Striped & Hoverable

tsx

<Table striped hoverable>
  {/* Table content */}
</Table>

Props

Name	Type	Default	Description
`striped`	`boolean`	`false`	Whether to show striped rows.
`hoverable`	`boolean`	`false`	Whether rows highlight on hover.
`children`	`ReactNode`	`-`	Table content (TableHeader, TableBody).

Variants

Simple

Head	Head
Cell	Cell

Striped

Head	Head
Row 1	Data
Row 2	Data

Bordered

Head	Head
Cell	Cell

Tooltip Form

On this page

Preview
Installation
Usage
Props
Variants