Table

The Table component provides a styled and accessible way to display data in rows and columns. It’s designed to work with structured data and offers a variety of customization options.

Usage

<script>
  import { 
    Table,
    TableHeader,
    TableBody,
    TableFooter,
    TableHead,
    TableRow,
    TableCell,
    TableCaption
  } from "$lib/components/ui/table";
</script>

<Table>
  <TableCaption>A list of items.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Description</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Item 1</TableCell>
      <TableCell>Description for Item 1</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Item 2</TableCell>
      <TableCell>Description for Item 2</TableCell>
      <TableCell>Inactive</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

API Reference

Table Components

Component	Description
Table	The root container for the table.
TableHeader	The header section of the table.
TableBody	The body section of the table containing the data rows.
TableFooter	The footer section of the table, often used for totals.
TableRow	A row within the table.
TableHead	A header cell within the table header.
TableCell	A standard cell within the table body.
TableCaption	A caption for the table.

Table Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table.
ref	HTMLTableElement	undefined	A reference to the underlying HTML element.

TableHeader Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table header.
ref	HTMLTableSectionElement	undefined	A reference to the underlying HTML element.

TableBody Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table body.
ref	HTMLTableSectionElement	undefined	A reference to the underlying HTML element.

TableFooter Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table footer.
ref	HTMLTableSectionElement	undefined	A reference to the underlying HTML element.

TableRow Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table row.
ref	HTMLTableRowElement	undefined	A reference to the underlying HTML element.

TableHead Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table head cell.
ref	HTMLTableCellElement	undefined	A reference to the underlying HTML element.

TableCell Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table cell.
ref	HTMLTableCellElement	undefined	A reference to the underlying HTML element.

TableCaption Properties

Property	Type	Default	Description
class	string	undefined	Custom CSS classes for the table caption.
ref	HTMLElement	undefined	A reference to the underlying HTML element.

Implementation

The Table component is built using native HTML table elements with styled Svelte components to ensure proper accessibility and semantics:

<!-- Table component -->
<div class="relative w-full overflow-auto">
  <table class={cn("w-full caption-bottom text-sm", className)}>
    {@render children?.()}
  </table>
</div>

<!-- TableHeader component -->
<thead class={cn("[&_tr]:border-b", className)}>
  {@render children?.()}
</thead>

<!-- TableBody component -->
<tbody class={cn("[&_tr:last-child]:border-0", className)}>
  {@render children?.()}
</tbody>

<!-- TableRow component -->
<tr class={cn(
  "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
  className
)}>
  {@render children?.()}
</tr>

<!-- TableCell component -->
<td class={cn(
  "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
  className
)}>
  {@render children?.()}
</td>

The components are designed to be flexible and customizable, allowing for a wide range of table styles and uses. The default styling provides a clean and accessible table that can be easily extended with Tailwind classes.