Table

Display tabular data with a styled wrapper around standard table markup.

Basic Usage

Place standard <thead> and <tbody> markup inside <c-ui.table>. Cells can hold any content, such as a <c-ui.badge>.

Name	Role	Status
Jane Doe	Engineer	Active
Sam Lee	Designer	Active
Alex Kim	Manager	Away
Mia Tan	Analyst	Offline

<c-ui.table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jane Doe</td>
            <td>Engineer</td>
            <td><c-ui.badge color="green">Active</c-ui.badge></td>
        </tr>
        <tr>
            <td>Sam Lee</td>
            <td>Designer</td>
            <td><c-ui.badge color="green">Active</c-ui.badge></td>
        </tr>
        <tr>
            <td>Alex Kim</td>
            <td>Manager</td>
            <td><c-ui.badge color="amber">Away</c-ui.badge></td>
        </tr>
        <tr>
            <td>Mia Tan</td>
            <td>Analyst</td>
            <td><c-ui.badge color="zinc">Offline</c-ui.badge></td>
        </tr>
    </tbody>
</c-ui.table>

{% cotton ui.table %}
    <thead>
        <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jane Doe</td>
            <td>Engineer</td>
            <td>{% cotton ui.badge color="green" %}Active{% endcotton %}</td>
        </tr>
        <tr>
            <td>Sam Lee</td>
            <td>Designer</td>
            <td>{% cotton ui.badge color="green" %}Active{% endcotton %}</td>
        </tr>
        <tr>
            <td>Alex Kim</td>
            <td>Manager</td>
            <td>{% cotton ui.badge color="amber" %}Away{% endcotton %}</td>
        </tr>
        <tr>
            <td>Mia Tan</td>
            <td>Analyst</td>
            <td>{% cotton ui.badge color="zinc" %}Offline{% endcotton %}</td>
        </tr>
    </tbody>
{% endcotton %}

Alignment

Align a column by adding class="text-right" to both its <th> and <td> cells.

Item	Amount
Subscription	$29.00
Add-on	$9.00
Tax	$3.80

<c-ui.table>
    <thead>
        <tr>
            <th>Item</th>
            <th class="text-right">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Subscription</td>
            <td class="text-right">$29.00</td>
        </tr>
        <tr>
            <td>Add-on</td>
            <td class="text-right">$9.00</td>
        </tr>
        <tr>
            <td>Tax</td>
            <td class="text-right">$3.80</td>
        </tr>
    </tbody>
</c-ui.table>

{% cotton ui.table %}
    <thead>
        <tr>
            <th>Item</th>
            <th class="text-right">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Subscription</td>
            <td class="text-right">$29.00</td>
        </tr>
        <tr>
            <td>Add-on</td>
            <td class="text-right">$9.00</td>
        </tr>
        <tr>
            <td>Tax</td>
            <td class="text-right">$3.80</td>
        </tr>
    </tbody>
{% endcotton %}

API Reference

Table

Name	Description	Type	Options	Default
`class`	Additional classes merged onto the table element.	str	—
`slot (default)`	Standard thead, tbody, tr, th and td markup to render inside the table.	—	—