Tools / UI Kit / Bootstrap / Data Tables

Data Tables

Tables with sorting, filters, actions and pagination.

Basic Data Table
Name Email Role Status
Marcus Johnson [email protected] Admin Active
Sarah Chen [email protected] Editor Active
David Park [email protected] Viewer Inactive 
<table class="uk-dt">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Marcus Johnson</td>
            <td>[email protected]</td>
            <td>Admin</td>
            <td><span class="uk-dt-badge success">Active</span></td>
        </tr>
    </tbody>
</table>

<style>
    .uk-dt-wrap {
        overflow-x: auto;
        border: 1px solid #e2e8f0;
        border-radius: 0.85rem;
        background: #fff;
    }
    .uk-dt {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.85rem;
    }
    .uk-dt thead th {
        background: #f8fafc;
        text-align: left;
        padding: 0.75rem 1rem;
        font-weight: 700;
        color: #0b1b2f;
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-bottom: 1px solid #e2e8f0;
    }
    .uk-dt tbody td {
        padding: 0.85rem 1rem;
        color: #475569;
        border-bottom: 1px solid #f1f5f9;
    }
    .uk-dt tbody tr:last-child td { border-bottom: 0; }
    .uk-dt tbody tr:hover { background: #f8fafc; }
    .uk-dt-badge {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 999px;
    }
    .uk-dt-badge.success { background: #ecfdf5; color: #059669; }
    .uk-dt-badge.muted   { background: #f1f5f9; color: #64748b; }
</style>
Table with Toolbar
NameEmailRole
Marcus Johnson [email protected] Admin
Sarah Chen [email protected] Editor
David Park [email protected] Viewer 
<div class="uk-dt-wrap">
    <div class="uk-dt-toolbar">
        <div class="uk-dt-search">
            <i class="fas fa-magnifying-glass"></i>
            <input type="text" placeholder="Search...">
        </div>
        <div class="uk-dt-actions">
            <button class="uk-dt-btn">Filter</button>
            <button class="uk-dt-btn uk-dt-btn-primary">Add User</button>
        </div>
    </div>
    <table class="uk-dt">...</table>
</div>

<style>
    .uk-dt-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #e2e8f0;
        background: #fff;
        flex-wrap: wrap;
    }
    .uk-dt-search {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
        min-width: 220px;
    }
    .uk-dt-search i { color: #94a3b8; font-size: 0.8rem; }
    .uk-dt-search input {
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 0.85rem;
        flex: 1;
    }
    .uk-dt-actions { display: flex; gap: 0.5rem; }
    .uk-dt-btn {
        padding: 0.45rem 0.9rem;
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }
    .uk-dt-btn:hover { border-color: #1e3a8a; color: #1e3a8a; }
    .uk-dt-btn-primary { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }
    .uk-dt-btn-primary:hover { background: #0f2a5c; color: #fff; }
    .uk-dt-icon-btn {
        width: 30px; height: 30px;
        border-radius: 0.4rem;
        background: transparent;
        border: 0;
        color: #64748b;
        cursor: pointer;
        font-size: 0.8rem;
        transition: all 0.15s;
    }
    .uk-dt-icon-btn:hover { background: #eef2f8; color: #1e3a8a; }
    .uk-dt-icon-btn.danger:hover { background: #fee2e2; color: #dc2626; }
</style>
Striped Table
#InvoiceAmountDateStatus
1 INV-001 $249.00 Mar 12, 2025 Paid
2 INV-002 $1,290.00 Mar 13, 2025 Pending
3 INV-003 $89.00 Mar 14, 2025 Paid
4 INV-004 $540.00 Mar 15, 2025 Failed 
<table class="uk-dt uk-dt-striped">
    <thead><tr><th>#</th><th>Invoice</th><th>Amount</th><th>Status</th></tr></thead>
    <tbody>
        <tr><td>1</td><td>INV-001</td><td>$249.00</td><td>Paid</td></tr>
    </tbody>
</table>

<style>
    .uk-dt-striped tbody tr:nth-child(even) { background: #f8fafc; }
    .uk-dt-badge.warning { background: #fef3c7; color: #d97706; }
    .uk-dt-badge.danger  { background: #fee2e2; color: #dc2626; }
</style>
Sortable Table Header
Name Email Joined Status
Ali Khan [email protected] Mar 2024 Active
David Park [email protected] Jan 2023 Active
Marcus Johnson [email protected] Nov 2022 Inactive 
<th class="uk-dt-sort active">Name <i class="fas fa-arrow-down"></i></th>
<th class="uk-dt-sort">Email <i class="fas fa-sort"></i></th>

<style>
    .uk-dt-sort {
        cursor: pointer;
        user-select: none;
    }
    .uk-dt-sort i {
        font-size: 0.7rem;
        color: #94a3b8;
        margin-left: 4px;
    }
    .uk-dt-sort.active { color: #1e3a8a; }
    .uk-dt-sort.active i { color: #1e3a8a; }
    .uk-dt-sort:hover { color: #1e3a8a; }
</style>
Table with Row Selection
2 selected
Task Assignee Status
Design homepage mockup Sarah Chen Done
API integration David Park In Progress
Write documentation Ali Khan Pending 
<div class="uk-dt-selection-bar">
    <i class="fas fa-check-circle"></i> 2 selected
    <button class="uk-dt-btn uk-dt-btn-danger">Delete</button>
</div>
<table class="uk-dt">
    <thead>
        <tr>
            <th><input type="checkbox" class="uk-dt-check"></th>
            <th>Task</th>
        </tr>
    </thead>
</table>

<style>
    .uk-dt-check {
        width: 16px; height: 16px;
        accent-color: #1e3a8a;
        cursor: pointer;
    }
    .uk-dt-selection-bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.65rem 1rem;
        background: #eef2f8;
        color: #1e3a8a;
        font-size: 0.82rem;
        font-weight: 600;
        border-bottom: 1px solid #e2e8f0;
    }
    .uk-dt-selection-bar i { font-size: 0.9rem; }
    .uk-dt-selection-bar .uk-dt-btn { margin-left: auto; }
    .uk-dt-btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
    .uk-dt-btn-danger:hover { background: #b91c1c; color: #fff; }
</style>
Table with Pagination
CustomerPlanMRR
Northwind LabsBusiness$499
Lumen StudioPro$149
Cohere DesignPro$149
Showing 1–3 of 42 
<div class="uk-dt-pagination">
    <span class="uk-dt-pageinfo">Showing 1–3 of 42</span>
    <div class="uk-dt-pages">
        <button class="uk-dt-page" disabled><i class="fas fa-chevron-left"></i></button>
        <button class="uk-dt-page active">1</button>
        <button class="uk-dt-page">2</button>
        <button class="uk-dt-page">3</button>
        <button class="uk-dt-page"><i class="fas fa-chevron-right"></i></button>
    </div>
</div>

<style>
    .uk-dt-pagination {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1rem;
        border-top: 1px solid #e2e8f0;
        background: #fff;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .uk-dt-pageinfo {
        font-size: 0.78rem;
        color: #64748b;
    }
    .uk-dt-pages { display: flex; gap: 0.25rem; }
    .uk-dt-page {
        min-width: 32px;
        height: 32px;
        padding: 0 0.6rem;
        border: 1px solid #e2e8f0;
        background: #fff;
        color: #475569;
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 0.4rem;
        cursor: pointer;
        transition: all 0.15s;
    }
    .uk-dt-page:hover:not(:disabled) {
        border-color: #1e3a8a;
        color: #1e3a8a;
    }
    .uk-dt-page.active {
        background: #1e3a8a;
        color: #fff;
        border-color: #1e3a8a;
    }
    .uk-dt-page:disabled { opacity: 0.4; cursor: not-allowed; }
</style>