Tables - Nimbus Docs

Basic Table

A simple table with headers and data rows for displaying structured information.

Default Table

Name	Role	Email	Status
John Smith	Admin	john@example.com	Active
Sarah Johnson	Editor	sarah@example.com	Active
Mike Wilson	Viewer	mike@example.com	Pending
Emily Davis	Editor	emily@example.com	Inactive

<table class="hu-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Role</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Smith</td>
            <td>Admin</td>
            <td>john@example.com</td>
            <td><span class="hu-badge hu-badge-success">Active</span></td>
        </tr>
    </tbody>
</table>

Striped Table

Add alternating row colors for improved readability with the hu-table-striped modifier.

Striped Rows

Plan	Price	Websites	Storage
Starter	$2.99/mo	1	10 GB
Business	$5.99/mo	5	50 GB
Enterprise	$12.99/mo	Unlimited	200 GB
Reseller	$24.99/mo	Unlimited	500 GB
VPS Basic	$19.99/mo	Unlimited	100 GB SSD

<table class="hu-table hu-table-striped">
    <thead>
        <tr>
            <th>Plan</th>
            <th>Price</th>
            <th>Websites</th>
            <th>Storage</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Starter</td>
            <td>$2.99/mo</td>
            <td>1</td>
            <td>10 GB</td>
        </tr>
    </tbody>
</table>

Compact Table

Reduce cell padding for denser data display with hu-table-compact. Useful for dashboards with limited space.

Compact Density

Resource	Used	Limit	Usage
Disk Space	45.2 GB	100 GB	45%
Bandwidth	230 GB	Unlimited	N/A
Databases	12	50	24%
Email Accounts	25	100	25%
Subdomains	8	Unlimited	N/A

<table class="hu-table hu-table-compact">
    <thead>
        <tr>
            <th>Resource</th>
            <th>Used</th>
            <th>Limit</th>
            <th>Usage</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Disk Space</td>
            <td>45.2 GB</td>
            <td>100 GB</td>
            <td>45%</td>
        </tr>
    </tbody>
</table>

Bordered Table

Add full borders around all cells with hu-table-border for a more defined table structure.

Full Borders

Feature	Starter	Business	Enterprise
SSL Certificate	Free	Free	Free
Backup	Weekly	Daily	Real-time
Support	Email	Priority	24/7 Phone
CDN	-	Basic	Advanced

<table class="hu-table hu-table-border">
    <thead>
        <tr>
            <th>Feature</th>
            <th>Starter</th>
            <th>Business</th>
            <th>Enterprise</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>SSL Certificate</td>
            <td>Free</td>
            <td>Free</td>
            <td>Free</td>
        </tr>
    </tbody>
</table>

Responsive Table

Wrap tables in hu-table-responsive to enable horizontal scrolling on smaller screens.

Horizontal Scroll

ID	Domain Name	Registrar	Registration Date	Expiry Date	Status	Auto-Renew	Actions
1001	example.com	GoDaddy	2023-01-15	2025-01-15	Active	Yes
1002	mysite.org	Namecheap	2022-06-20	2024-06-20	Expiring	Yes

<div class="hu-table-responsive">
    <table class="hu-table hu-table-border">
        <thead>
            <tr>
                <th>ID</th>
                <th>Domain Name</th>
                <th>Registrar</th>
                <th>Registration Date</th>
                <th>Expiry Date</th>
                <th>Status</th>
                <th>Auto-Renew</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1001</td>
                <td>example.com</td>
                <td>GoDaddy</td>
                <td>2023-01-15</td>
                <td>2025-01-15</td>
                <td><span class="hu-badge hu-badge-success">Active</span></td>
                <td>Yes</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

Real-World Examples

Real-world table patterns commonly used in dashboards and admin panels and management interfaces.

Domains Table

Domain	Expiry	Status
Nimbus.com	Jan 15, 2025	Active
myproject.org	Mar 22, 2025	Active
oldsite.net	Nov 5, 2024	Expired

<table class="hu-table hu-table-striped hu-table-border">
    <thead>
        <tr>
            <th>Domain</th>
            <th>Expiry</th>
            <th>Status</th>
            <th>Auto-renew</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>Nimbus.com</strong></td>
            <td>Jan 15, 2025</td>
            <td><span class="hu-badge hu-badge-success">Active</span></td>
            <td>
                <label class="hu-toggle">
                    <input type="checkbox" checked>
                    <span class="hu-toggle-slider"></span>
                </label>
            </td>
            <td>...</td>
        </tr>
    </tbody>
</table>

Hosting Services Table

<>45 GB / Unlimited

Plan	Domain	Status	Disk	Bandwidth
Business	Nimbus.com	Active	45.2 / 100 GB	230 GB / Unlimited
Starter	mysite.org	Active	12.8 / 10 GB
VPS	apptools.io	Suspended	89.5 / 200 GB	1.2 TB / 2 TB

<div class="hu-table-responsive">
    <table class="hu-table hu-table-border">
        <thead>
            <tr>
                <th>Plan</th>
                <th>Domain</th>
                <th>Status</th>
                <th>Disk</th>
                <th>Bandwidth</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><span class="hu-badge hu-badge-primary">Business</span></td>
                <td>Nimbus.com</td>
                <td><span class="hu-badge hu-badge-success">Active</span></td>
                <td>45.2 / 100 GB</td>
                <td>230 GB / Unlimited</td>
                <td>
                    <button class="hu-btn hu-btn-sm hu-btn-primary">Manage</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Invoice Table

Invoice #	Date	Amount	Status
INV-2024-001	Jan 1, 2024	$59.88	Paid
INV-2024-002	Feb 1, 2024	$59.88	Paid
INV-2024-003	Mar 1, 2024	$59.88	Pending
INV-2024-004	Apr 1, 2024	$79.88	Overdue

<table class="hu-table hu-table-striped">
    <thead>
        <tr>
            <th>Invoice #</th>
            <th>Date</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Download</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><strong>INV-2024-001</strong></td>
            <td>Jan 1, 2024</td>
            <td>$59.88</td>
            <td><span class="hu-badge hu-badge-success">Paid</span></td>
            <td>
                <button class="hu-btn hu-btn-sm hu-btn-ghost">
                    <svg ...></svg> PDF
                </button>
            </td>
        </tr>
    </tbody>
</table>

API Reference

Complete reference for table classes and modifiers.

Class	Element	Description
`.hu-table`	table	Base table class with default styling
`.hu-table-striped`	table	Adds alternating row background colors
`.hu-table-compact`	table	Reduces cell padding for dense layouts
`.hu-table-border`	table	Adds borders to all cells
`.hu-table-responsive`	div wrapper	Enables horizontal scroll on overflow

Composability

Table modifiers can be combined. For example, use .hu-table.hu-table-striped.hu-table-border.hu-table-compact for a compact, striped table with full borders.