Notifications
Mark all as read
Order Completed
Your order #1234 has been completed successfully
5 minutes ago
New Message
You have a new message from John Doe
10 minutes ago
Storage Warning
Your storage is almost full (90% used)
1 hour ago
New User Registered
Sarah Wilson just joined your team
2 hours ago
Payment Failed
Payment for invoice #5678 failed
Yesterday
View all notifications

Data Table

Pencarian, sort, dan pagination sederhana (tanpa plugin)
Name Email Role Status Joined Actions
Rizky Pratama rizky@example.com Admin Active 2024-07-12
Sarah Wibowo sarah@example.com Editor Invited 2024-10-01
Andi Saputra andi@example.com Viewer Suspended 2023-12-09
Budi Santoso budi@example.com Editor Active 2025-01-18
Citra Dewi citra@example.com Viewer Active 2024-05-22
Dodi Firmansyah dodi@example.com Admin Invited 2025-02-04
Eka Putri eka@example.com Editor Active 2024-03-14
Fajar Maulana fajar@example.com Viewer Suspended 2024-08-30
Showing 1 to 7 of 7
HTML
<div class="table-responsive">
  <table class="table table-themed align-middle mb-0" id="dataTable">
    <thead>
      <tr>
        <th data-sort="name" class="sortable">Name</th>
        <th data-sort="email" class="sortable">Email</th>
        <th data-sort="role" class="sortable">Role</th>
        <th data-sort="status" class="sortable">Status</th>
        <th data-sort="joined" class="sortable">Joined</th>
        <th class="text-end">Actions</th>
      </tr>
    </thead>
    <tbody id="dtBody">
      <tr data-name="Rizky Pratama" data-email="rizky@example.com" data-role="Admin" data-status="active" data-joined="2024-07-12">
        <td>Rizky Pratama</td>
        <td>rizky@example.com</td>
        <td><span class="badge badge-outline">Admin</span></td>
        <td><span class="badge badge-soft-success">Active</span></td>
        <td>2024-07-12</td>
        <td class="text-end">...</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>