Table

A component for displaying tabular data with rows and columns.

Anatomy 

<script>
  import { Table } from "@saas-ui/svelte/components/table";
</script>

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeader>Name</Table.ColumnHeader>
      <Table.ColumnHeader>Email</Table.ColumnHeader>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>john@example.com</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Examples

Action Bar Accessibility

Combine table with ActionBar for bulk actions.

Basic Accessibility

Basic table with default styling.

Column Border Accessibility

Use the showColumnBorder prop to show column borders.

Column Group Accessibility

Use Table.ColumnGroup to control column widths.

Interactive Accessibility

Use the interactive prop to enable row hover effects.

Overflow Accessibility

Use Table.ScrollArea for horizontal overflow.

Pagination Accessibility

Combine table with Pagination component.

Sizes Accessibility

Use the size prop to change the size of the table.

Striped Accessibility

Use the striped prop to add zebra-stripe pattern.

Variants Accessibility

Use the variant prop to change the visual style.

Props

Table.Root

The main table container.

Prop Type Default Description
size "sm" | "md" | "lg" "md" The size of the table.
variant "line" | "outline" "line" The visual variant of the table.
interactive boolean false Enable row hover highlighting.
stickyHeader boolean false Make the header sticky.
striped boolean false Add zebra-stripe pattern to rows.
showColumnBorder boolean false Show borders between columns.
showOuterBorder boolean true Whether to show the outer border. Set to false when embedded in ScrollArea.
class string undefined Additional CSS classes to apply.
children Snippet undefined Table content.

Table.Header

The table header section (thead).

Prop Type Default Description
class string undefined Additional CSS classes to apply.
children Snippet undefined Header content.

Table.Body

The table body section (tbody).

Prop Type Default Description
class string undefined Additional CSS classes to apply.
children Snippet undefined Body content.

Table.Footer

The table footer section (tfoot).

Prop Type Default Description
class string undefined Additional CSS classes to apply.
children Snippet undefined Footer content.

Table.Row

A table row (tr).

Prop Type Default Description
class string undefined Additional CSS classes to apply.
children Snippet undefined Row content.

Table.ColumnHeader

A table column header cell (th).

Prop Type Default Description
textAlign "start" | "center" | "end" "start" Text alignment for the column.
minW string undefined Minimum width of the column.
w string undefined Width of the column.
class string undefined Additional CSS classes to apply.
children Snippet undefined Header cell content.

Table.Cell

A table data cell (td).

Prop Type Default Description
textAlign "start" | "center" | "end" "start" Text alignment for the cell.
class string undefined Additional CSS classes to apply.
children Snippet undefined Cell content.

Table.Caption

A table caption element.

Prop Type Default Description
placement "top" | "bottom" "bottom" Placement of the caption.
class string undefined Additional CSS classes to apply.
children Snippet undefined Caption content.

Table.ScrollArea

A scrollable container for the table.

Prop Type Default Description
maxW string undefined Maximum width of the scroll area.
height string undefined Height of the scroll area.
borderWidth string undefined Border width for the scroll area.
rounded string undefined Border radius for the scroll area.
class string undefined Additional CSS classes to apply.
children Snippet undefined Scroll area content.

Table.ColumnGroup

A column group element (colgroup) for defining column widths.

Prop Type Default Description
class string undefined Additional CSS classes to apply.
children Snippet undefined Column definitions.

Table.Column

A column element (col) for defining individual column properties.

Prop Type Default Description
htmlWidth string undefined Width of the column (use htmlWidth for HTML table columns).
class string undefined Additional CSS classes to apply.