Table

Documentation and examples for opt-in styling of tables.

Basic Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <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

Class	Heading	Heading
Default	Cell	Cell
Primary	Cell	Cell
Secondary	Cell	Cell
Success	Cell	Cell
Danger	Cell	Cell
Warning	Cell	Cell
Info	Cell	Cell
Light	Cell	Cell
Dark	Cell	Cell

            
            <!-- 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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <Table.Root isStriped>
    ...
</Table.Root>

Dark Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Success Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Striped Columns Example

Default Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <Table.Root isStripedColumns>
    ...
</Table.Root>

Dark Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Success Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Hoverable Rows Example

Default Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <Table.Root isHoverable>
    ...
</Table.Root>

Dark Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Striped Rows Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Active Rows and Cells Example

Default Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <Table.Root isBordered>
    ...
</Table.Root>

Border Color Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Table without Borders Example

Default Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <Table.Root isBorderless>
    ...
</Table.Root>

Dark Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Small Tables Example

Default Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Dark Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Table Group Dividers Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
4	John	Doe	@johndoe

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

Vertical Alignment Example

Heading 1	Heading 2	Heading 3	Heading 4
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This cell inherits `vertical-align: bottom;` from the table row	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.
This cell inherits `vertical-align: middle;` from the table	This cell inherits `vertical-align: middle;` from the table	This cell is aligned to the top.	This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.

            
            <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

First Name

Last Name

Username

Mark

Otto

@mdo

Header	Header	Header
A	First	Last
B	First	Last
C	First	Last

John

Doe

@social

            
            <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

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Dark Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

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

Table Foot Example

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter
Total	3

            
            <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

List of users
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <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

List of users
#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

            
            <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

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint Small Example

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint Medium Example

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint Large Example

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint Extra Large Example

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

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

Breakpoint Extra Extra Large Example

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

            
            <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.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Showing 1 to 3 of 3 entries

            
            <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.