# Table

> Documentation and examples for opt-in styling of tables.

Source: https://bootstrap-svelte.vercel.app/components/table — part of the Bootstrap Svelte documentation (index: https://bootstrap-svelte.vercel.app/llms.txt).

## Basic Example

```html
<Table.Root>
    <Table.Head>
        <Table.Row>
            <Table.Header>#</Table.Header>
            <Table.Header>First Name</Table.Header>
            <Table.Header>Last Name</Table.Header>
            <Table.Header>Username</Table.Header>
        </Table.Row>
    </Table.Head>
    <Table.Body>
        <Table.Row>
            <Table.Header>1</Table.Header>
            <Table.Data>Mark</Table.Data>
            <Table.Data>Otto</Table.Data>
            <Table.Data>@mdo</Table.Data>
        </Table.Row>
        <Table.Row>
            <Table.Header>2</Table.Header>
            <Table.Data>Jacob</Table.Data>
            <Table.Data>Thornton</Table.Data>
            <Table.Data>@fat</Table.Data>
        </Table.Row>
        <Table.Row>
            <Table.Header>3</Table.Header>
            <Table.Data>Larry</Table.Data>
            <Table.Data>the Bird</Table.Data>
            <Table.Data>@twitter</Table.Data>
        </Table.Row>
    </Table.Body>
</Table.Root>
```

## Color Variant Example

```html
<!-- On Table.Root -->
<Table.Root colorVariant="primary">...</Table.Root>
<Table.Root colorVariant="secondary">...</Table.Root>
<Table.Root colorVariant="success">...</Table.Root>
<Table.Root colorVariant="danger">...</Table.Root>
<Table.Root colorVariant="warning">...</Table.Root>
<Table.Root colorVariant="info">...</Table.Root>
<Table.Root colorVariant="light">...</Table.Root>
<Table.Root colorVariant="dark">...</Table.Root>

<!-- On Table.Row -->
<Table.Row colorVariant="primary">...</Table.Row>
<Table.Row colorVariant="secondary">...</Table.Row>
<Table.Row colorVariant="success">...</Table.Row>
<Table.Row colorVariant="danger">...</Table.Row>
<Table.Row colorVariant="warning">...</Table.Row>
<Table.Row colorVariant="info">...</Table.Row>
<Table.Row colorVariant="light">...</Table.Row>
<Table.Row colorVariant="dark">...</Table.Row>

<!-- On cells (Table.Data or Table.Header) -->
<Table.Row>
  <Table.Data colorVariant="primary">...</Table.Data>
  <Table.Data colorVariant="secondary">...</Table.Data>
  <Table.Data colorVariant="success">...</Table.Data>
  <Table.Data colorVariant="danger">...</Table.Data>
  <Table.Data colorVariant="warning">...</Table.Data>
  <Table.Data colorVariant="info">...</Table.Data>
  <Table.Data colorVariant="light">...</Table.Data>
  <Table.Data colorVariant="dark">...</Table.Data>
</Table.Row>
```

## Striped Rows Example

#### Default Example

```html
<Table.Root isStriped>
    ...
</Table.Root>
```

#### Dark Example

```html
<Table.Root colorVariant="dark" isStriped>
    ...
</Table.Root>
```

#### Success Example

```html
<Table.Root colorVariant="success" isStriped>
    ...
</Table.Root>
```

## Striped Columns Example

#### Default Example

```html
<Table.Root isStripedColumns>
    ...
</Table.Root>
```

#### Dark Example

```html
<Table.Root colorVariant="dark" isStripedColumns>
    ...
</Table.Root>
```

#### Success Example

```html
<Table.Root colorVariant="success" isStripedColumns>
    ...
</Table.Root>
```

## Hoverable Rows Example

#### Default Example

```html
<Table.Root isHoverable>
    ...
</Table.Root>
```

#### Dark Example

```html
<Table.Root colorVariant="dark" isHoverable>
    ...
</Table.Root>
```

#### Striped Rows Example

```html
<Table.Root isHoverable isStriped>
    ...
</Table.Root>
```

## Active Rows and Cells Example

#### Default Example

```html
<Table.Root>
    <Table.Head>
        ...
    </Table.Head>
    <Table.Body>
        <Table.Row isActive>
            ...
        </Table.Row>
        <Table.Row>
            ...
        </Table.Row>
        <Table.Row>
            <Table.Header>3</Table.Header>
            <Table.Data>Larry</Table.Data>
            <Table.Data>the Bird</Table.Data>
            <Table.Data isActive>@twitter</Table.Data>
        </Table.Row>
    </Table.Body>
</Table.Root>
```

#### Dark Example

```html
<Table.Root colorVariant="dark">
    <Table.Head>
        ...
    </Table.Head>
    <Table.Body>
        <Table.Row isActive>
            ...
        </Table.Row>
        <Table.Row>
            ...
        </Table.Row>
        <Table.Row>
            <Table.Header>3</Table.Header>
            <Table.Data>Larry</Table.Data>
            <Table.Data>the Bird</Table.Data>
            <Table.Data isActive>@twitter</Table.Data>
        </Table.Row>
    </Table.Body>
</Table.Root>
```

## Table Border Example

#### Default Example

```html
<Table.Root isBordered>
    ...
</Table.Root>
```

#### Border Color Example

```html
<Table.Root borderColorVariant="border-primary" isBordered>
    ...
</Table.Root>
```

## Table without Borders Example

#### Default Example

```html
<Table.Root isBorderless>
    ...
</Table.Root>
```

#### Dark Example

```html
<Table.Root colorVariant="dark" isBorderless>
    ...
</Table.Root>
```

## Small Tables Example

#### Default Example

```html
<Table.Root size="sm">
    ...
</Table.Root>
```

#### Dark Example

```html
<Table.Root colorVariant="dark" size="sm">
    ...
</Table.Root>
```

## Table Group Dividers Example

```html
<Table.Root>
    <Table.Head>
        ...
    </Table.Head>
    <Table.Body hasGroupDivider>
        ...
    </Table.Body>
</Table.Root>
```

## Vertical Alignment Example

```html
<Table.Root isResponsive verticalAlign="middle">
    <Table.Head>
        <Table.Row>
            ...
        </Table.Row>
    </Table.Head>
    <Table.Body>
        <Table.Row>
            ...
        </Table.Row>
        <Table.Row verticalAlign="bottom">
            ...
        </Table.Row>
        <Table.Row>
            <Table.Data>...</Table.Data>
            <Table.Data>...</Table.Data>
            <Table.Data verticalAlign="top">This cell is aligned to the top.</Table.Data>
            <Table.Data>...</Table.Data>
        </Table.Row>
    </Table.Body>
</Table.Root>
```

## Nesting Tables Example

```html
<Table.Root isBordered isStriped>
    <Table.Head>
        ...
    </Table.Head>
    <Table.Body>
        ...
        <Table.Row>
            <Table.Data colspan={4}>
                <Table.Root class="mb-0">
                    ...
                </Table.Root>
            </Table.Data>
        </Table.Row>
        ...
    </Table.Body>
</Table.Root>
```

## Table Head Color Scheme Example

#### Light Example

```html
<Table.Root>
    <Table.Head colorScheme="light">
        ...
    </Table.Head>
    <Table.Body>
        ...
    </Table.Body>
</Table.Root>
```

#### Dark Example

```html
<Table.Root>
    <Table.Head colorScheme="dark">
        ...
    </Table.Head>
    <Table.Body>
        ...
    </Table.Body>
</Table.Root>
```

## Table Foot Example

```html
<Table.Root>
    <Table.Head>
        ...
    </Table.Head>
    <Table.Body>
        ...
    </Table.Body>
    <Table.Foot>
        <Table.Row>
            <Table.Header>Total</Table.Header>
            <Table.Data colspan={3}>3</Table.Data>
        </Table.Row>
    </Table.Foot>
</Table.Root>
```

## Captions Example

#### Default Example

```html
<Table.Root>
    <Table.Caption>List of users</Table.Caption>
    <Table.Head>
        ...
    </Table.Head>
    <Table.Body>
        ...
    </Table.Body>
    <Table.Foot>
        ...
    </Table.Foot>
</Table.Root>
```

#### Top Example

```html
<Table.Root isCaptionTop size="sm">
    <Table.Caption>List of users</Table.Caption>
    <Table.Head>
        ...
    </Table.Head>
    <Table.Body>
        ...
    </Table.Body>
    <Table.Foot>
        ...
    </Table.Foot>
</Table.Root>
```

## Responsive Example

#### Always Responsive Example

```html
<Table.Root isBordered isResponsive>
    ...
</Table.Root>
```

#### Breakpoint Small Example

```html
<Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'sm' }}>
    ...
</Table.Root>
```

#### Breakpoint Medium Example

```html
<Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'md' }}>
    ...
</Table.Root>
```

#### Breakpoint Large Example

```html
<Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'lg' }}>
    ...
</Table.Root>
```

#### Breakpoint Extra Large Example

```html
<Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'xl' }}>
    ...
</Table.Root>
```

#### Breakpoint Extra Extra Large Example

```html
<Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'xxl' }}>
    ...
</Table.Root>
```

## Table Container Footer Example

You can use the `tableContainerFooter` snippet prop to render content directly after the table or responsive wrapper. This is useful for adding pagination controls, action buttons, or other footer elements that should appear with the table.

```html
<Table.Root isBordered isResponsive responsiveProps={{ breakpoint: 'md' }}>
    {#snippet tableContainerFooter()}
        <div class="d-flex justify-content-between align-items-center mt-3">
            <div class="text-muted">
                Showing 1 to 3 of 3 entries
            </div>
            <Pagination.Root size="sm">
                <Pagination.Item isDisabled={true}>
                    <Pagination.Link href="#!" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </Pagination.Link>
                </Pagination.Item>
                <Pagination.Item isActive={true}>
                    <Pagination.Link href="#!">1</Pagination.Link>
                </Pagination.Item>
                <Pagination.Item>
                    <Pagination.Link href="#!">2</Pagination.Link>
                </Pagination.Item>
                <Pagination.Item>
                    <Pagination.Link href="#!">3</Pagination.Link>
                </Pagination.Item>
                <Pagination.Item>
                    <Pagination.Link href="#!" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </Pagination.Link>
                </Pagination.Item>
            </Pagination.Root>
        </div>
    {/snippet}
    <Table.Head>
        <Table.Row>
            <Table.Header>#</Table.Header>
            <Table.Header>First Name</Table.Header>
            <Table.Header>Last Name</Table.Header>
            <Table.Header>Username</Table.Header>
        </Table.Row>
    </Table.Head>
    <Table.Body>
        <Table.Row>
            <Table.Header>1</Table.Header>
            <Table.Data>Mark</Table.Data>
            <Table.Data>Otto</Table.Data>
            <Table.Data>@mdo</Table.Data>
        </Table.Row>
        <Table.Row>
            <Table.Header>2</Table.Header>
            <Table.Data>Jacob</Table.Data>
            <Table.Data>Thornton</Table.Data>
            <Table.Data>@fat</Table.Data>
        </Table.Row>
        <Table.Row>
            <Table.Header>3</Table.Header>
            <Table.Data>Larry</Table.Data>
            <Table.Data>the Bird</Table.Data>
            <Table.Data>@twitter</Table.Data>
        </Table.Row>
    </Table.Body>
</Table.Root>
```

## Table CSS Classes & Usage

This section documents all CSS classes that can appear on the rendered Table component markup. Understanding these classes helps when customizing styles or debugging layout issues.

### Table Element Classes

Classes applied to the `<table>` element

| Class Name | Type | Description |
| --- | --- | --- |
| `table` | Bootstrap v5 | Base class required on all tables. Provides default table styling. |
| `table-striped` | Bootstrap v5 | Adds zebra-striping to table rows within `<tbody>`. Controlled by `isStriped` prop. |
| `table-striped-columns` | Bootstrap v5 | Adds zebra-striping to table columns. Controlled by `isStripedColumns` prop. |
| `table-hover` | Bootstrap v5 | Enables hover state on table rows within `<tbody>`. Controlled by `isHoverable` prop. |
| `table-bordered` | Bootstrap v5 | Adds borders on all sides of the table and cells. Controlled by `isBordered` prop. |
| `table-borderless` | Bootstrap v5 | Removes all borders from the table. Controlled by `isBorderless` prop. |
| `table-sm` | Bootstrap v5 | Makes the table more compact by cutting cell padding in half. Controlled by `size="sm"` prop. |
| `table-{variant}` | Bootstrap v5 | Applies contextual color to the entire table. Options: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`. Controlled by `colorVariant` prop. |
| `align-{position}` | Bootstrap v5 | Sets vertical alignment for all cells in the table. Options: `top`, `middle`, `bottom`. Controlled by `verticalAlign` prop on Table.Root. |
| `caption-top` | Bootstrap v5 | Places the table caption at the top instead of the bottom. Controlled by `isCaptionTop` prop. |
| `border-{color}` | Bootstrap v5 | Changes border color when used with `table-bordered`. Examples: `border-primary`, `border-secondary`. Controlled by `borderColorVariant` prop. |

### Container & Wrapper Classes

Classes applied to wrapper elements around the table

| Class Name | Type | Description |
| --- | --- | --- |
| `table-container` | Custom | Custom wrapper class that always wraps the table. Safe to target in your CSS for custom styling or layout adjustments. Can be extended via `containerProps={{ class: 'your-class' }}`. |
| `table-responsive` | Bootstrap v5 | Makes table responsive across all breakpoints. Wraps the table in a scrollable container. Controlled by `isResponsive` prop without specifying a breakpoint. |
| `table-responsive-{breakpoint}` | Bootstrap v5 | Makes table responsive up to a specific breakpoint. Options: `sm`, `md`, `lg`, `xl`, `xxl`. Controlled by `responsiveProps={{ breakpoint: 'md' }}`. |

### Row & Cell Classes

Classes applied to `<tr>`, `<th>`, and `<td>` elements

| Class Name | Type | Description |
| --- | --- | --- |
| `table-active` | Bootstrap v5 | Highlights a row or cell with an active/selected state. Can be applied to Table.Row or Table.Data via `isActive` prop. |
| `table-{variant}` | Bootstrap v5 | Applies contextual color to individual rows or cells. Same variant options as table-level variants. Controlled by `colorVariant` prop on Table.Row or Table.Data. |
| `align-{position}` | Bootstrap v5 | Sets vertical alignment for a specific row or cell. Options: `top`, `middle`, `bottom`. Controlled by `verticalAlign` prop on Table.Row or Table.Data. |

### Table Section Classes

Classes applied to `<thead>`, `<tbody>`, and `<tfoot>` elements

| Class Name | Type | Description |
| --- | --- | --- |
| `table-light` | Bootstrap v5 | Applies light background to table head. Controlled by `colorScheme="light"` prop on Table.Head. |
| `table-dark` | Bootstrap v5 | Applies dark background to table head. Controlled by `colorScheme="dark"` prop on Table.Head. |
| `table-group-divider` | Bootstrap v5 | Adds a thicker border above the table section to visually separate groups. Controlled by `hasGroupDivider` prop on Table.Body or Table.Foot. |

### Customization Guidelines

When extending or overriding table styles in your own CSS:

- **Safe to override:** The `table-container` class is custom and designed to be targeted for layout customizations (e.g., adding margins, max-width, shadows). You can also pass additional classes via `containerProps`.
- **Bootstrap classes:** All classes prefixed with `table-`, `align-`, `caption-top`, and `border-` are from Bootstrap v5. Overriding these may affect Bootstrap's default behavior. Prefer using Bootstrap's utility classes or variants when possible.
- **Responsive wrappers:** The `table-responsive` and `table-responsive-{breakpoint}` classes add overflow scrolling. Override with caution to avoid breaking responsive behavior on mobile devices.
- **Custom classes:** You can always add your own classes via the `class` prop on any Table component (e.g., `Table.Root class="my-custom-table"`). These will be merged with the Bootstrap classes.
- **Theming:** For global table styling, consider creating a custom Bootstrap theme or using CSS variables to adjust colors, spacing, and borders across all tables.