Table Component

The Table component provides a fully styled, responsive HTML table with support for headers, body rows, and cells. It includes optional row striping and consistent styling for dark mode and accessibility.

Example Usage

<x-table>
    <x-table.header>
        <x-table.header.item>
            Header 1
        </x-table.header.item>
        <x-table.header.item>
            Header 2
        </x-table.header.item>
    </x-table.header>
    <x-table.body>
        <x-table.body.row>
            <x-table.body.item>
                Row 1, Cell 1
            </x-table.body.item>
            <x-table.body.item>
                Row 1, Cell 2
            </x-table.body.item>
        </x-table.body.row>
        <x-table.body.row>
            <x-table.body.item>
                Row 2, Cell 1
            </x-table.body.item>
            <x-table.body.item>
                Row 2, Cell 2
            </x-table.body.item>
        </x-table.body.row>
    </x-table.body>
</x-table>

Props

Table (Parent)

• No explicit props; accepts standard HTML attributes applied to the outer container and <table> element.

Table.Header

• No explicit props; accepts attributes applied to the <thead> element.

Table.Header.Item

• No explicit props; renders a <th> with padding and scope="col".

Table.Body

• No explicit props; accepts attributes applied to the <tbody> element.

Table.Body.Row

• striped (bool, default: true)
  Enables alternating row background colors for better readability.

Table.Body.Item

• No explicit props; renders a padded <td> element.

Overview

This Table component simplifies building accessible, styled tables with Tailwind CSS. It wraps the table in a responsive container with overflow support and border styling. The header, body, rows, and cells are modular components for easy customization. Optional striped rows enhance row distinction, and dark mode styles ensure consistent appearance across themes.