cotton

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