gentelella
Version:
Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.
88 lines (82 loc) • 16.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tables | Gentelella 2026 v4</title>
<link rel="icon" href="../images/favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="/src/main-v4.js"></script>
</head>
<body data-shell="admin" data-page="tables" data-breadcrumb="Home > Tables">
<main class="main">
<div class="page-wrapper">
<div class="page-header">
<div class="page-header-row">
<div>
<div class="page-pretitle">Data</div>
<h1 class="page-title">Customers</h1>
</div>
<div class="page-actions">
<button class="btn btn-outline">Export</button>
<button class="btn btn-primary">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 8h8M8 4v8"/></svg>
Add customer
</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div>
<div class="card-title">All customers</div>
<div class="card-subtitle">Sortable, searchable, paginated.</div>
</div>
</div>
<div class="table-responsive">
<table class="table" data-datatable data-page-length="10" data-selectable data-export="customers">
<thead>
<tr>
<th data-orderable="false" style="width:32px"><input type="checkbox" style="margin:0" aria-label="Select all rows"></th>
<th>Name</th>
<th>Company</th>
<th>Plan</th>
<th>Status</th>
<th>MRR</th>
<th>Joined</th>
<th data-orderable="false" style="width:32px"></th>
</tr>
</thead>
<tbody>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--primary)">JD</div><span class="cell-strong">John Doe</span></div></td><td>Acme Corp</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Jan 04, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--azure)">AS</div><span class="cell-strong">Anna Smith</span></div></td><td>Globex Inc</td><td><span class="chip">Business</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$499</td><td>Jan 12, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--purple)">RJ</div><span class="cell-strong">Robert Jones</span></div></td><td>Initech</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Feb 02, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--yellow)">EW</div><span class="cell-strong">Emily Wang</span></div></td><td>Umbrella Co</td><td><span class="chip">Starter</span></td><td><span class="status status-yellow">Pending</span></td><td class="cell-strong">$49</td><td>Feb 09, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--red)">MK</div><span class="cell-strong">Mark Kim</span></div></td><td>Soylent</td><td><span class="chip">Business</span></td><td><span class="status status-red">Inactive</span></td><td class="cell-strong">$0</td><td>Dec 18, 2025</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--green)">SL</div><span class="cell-strong">Sarah Lee</span></div></td><td>Stark Ind.</td><td><span class="chip chip-purple">Enterprise</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$2,499</td><td>Nov 22, 2025</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--blue)">TH</div><span class="cell-strong">Tom Hardy</span></div></td><td>Wayne Tech</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Mar 03, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--purple)">LP</div><span class="cell-strong">Lina Park</span></div></td><td>Cyberdyne</td><td><span class="chip">Starter</span></td><td><span class="status status-yellow">Pending</span></td><td class="cell-strong">$49</td><td>Mar 10, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--primary)">DR</div><span class="cell-strong">Diego Reyes</span></div></td><td>Tyrell Corp</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Mar 14, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--azure)">YT</div><span class="cell-strong">Yuki Tanaka</span></div></td><td>Massive Dyn.</td><td><span class="chip">Business</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$499</td><td>Apr 01, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--yellow)">CH</div><span class="cell-strong">Chris Hill</span></div></td><td>Pied Piper</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Apr 04, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--green)">NV</div><span class="cell-strong">Nina Volkov</span></div></td><td>Hooli</td><td><span class="chip chip-purple">Enterprise</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$2,499</td><td>Apr 09, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--red)">AB</div><span class="cell-strong">Ahmed Bashir</span></div></td><td>Aviato</td><td><span class="chip">Starter</span></td><td><span class="status status-blue">Trial</span></td><td class="cell-strong">$0</td><td>Apr 12, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--purple)">FR</div><span class="cell-strong">Fiona Reilly</span></div></td><td>Vandelay Ind.</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Apr 15, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--blue)">OK</div><span class="cell-strong">Oliver Kane</span></div></td><td>Sterling Cooper</td><td><span class="chip">Business</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$499</td><td>Apr 20, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--primary)">PV</div><span class="cell-strong">Priya Verma</span></div></td><td>Dunder Mifflin</td><td><span class="chip">Pro</span></td><td><span class="status status-yellow">Pending</span></td><td class="cell-strong">$199</td><td>Apr 22, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--yellow)">JM</div><span class="cell-strong">Jamie Morales</span></div></td><td>Wonka Industries</td><td><span class="chip">Starter</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$49</td><td>Apr 24, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--green)">SK</div><span class="cell-strong">Sven Kowalski</span></div></td><td>Gringotts</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Apr 26, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--red)">RC</div><span class="cell-strong">Rachel Chen</span></div></td><td>Massive Dynamic</td><td><span class="chip chip-purple">Enterprise</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$2,499</td><td>Mar 30, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--azure)">EM</div><span class="cell-strong">Ellis Moreau</span></div></td><td>Bluth Co.</td><td><span class="chip">Business</span></td><td><span class="status status-red">Inactive</span></td><td class="cell-strong">$0</td><td>Feb 28, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--purple)">HK</div><span class="cell-strong">Hana Kawasaki</span></div></td><td>Spectre LLC</td><td><span class="chip">Pro</span></td><td><span class="status status-green">Active</span></td><td class="cell-strong">$199</td><td>Feb 17, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
<tr><td><input type="checkbox" style="margin:0" aria-label="Select row"></td><td><div class="cell-customer"><div class="cell-avatar" style="background:var(--blue)">MV</div><span class="cell-strong">Marco Vega</span></div></td><td>Oceanic Airlines</td><td><span class="chip">Starter</span></td><td><span class="status status-blue">Trial</span></td><td class="cell-strong">$0</td><td>Apr 25, 2026</td><td style="text-align:right"><button class="card-opt-btn" aria-label="Row actions"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="3" cy="8" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="13" cy="8" r="1.4"/></svg></button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</body>
</html>