modern-table-js
Version:
Modern, lightweight, vanilla JavaScript table library with zero dependencies. 67% faster than DataTables with mobile-first responsive design.
77 lines (73 loc) • 2.2 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test: Minimal Implementation</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/modern-table.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h2>⚡ Test: Minimal Implementation</h2>
<p class="text-muted">Minimal code untuk DummyJSON integration</p>
<div class="card">
<div class="card-body">
<table id="minimal-table" class="table table-striped"></table>
</div>
</div>
<div class="mt-3">
<h5>Code:</h5>
<pre class="bg-light p-3"><code>api: {
url: "https://dummyjson.com/users",
beforeRequest: async (config) => {
const params = config.data || {};
const query = new URLSearchParams({
limit: params.length || 10,
skip: params.start || 0
});
config.url = `https://dummyjson.com/users?${query}`;
return config;
},
dataSrc: (json) => ({
recordsTotal: json.total,
recordsFiltered: json.total,
data: json.users
})
}</code></pre>
</div>
</div>
<script type="module">
import { ModernTable } from "/core/ModernTable.js";
const table = new ModernTable("#minimal-table", {
api: {
url: "https://dummyjson.com/users",
beforeRequest: async (config) => {
const params = config.data || {};
const query = new URLSearchParams({
limit: params.length || 10,
skip: params.start || 0
});
config.url = `https://dummyjson.com/users?${query}`;
return config;
},
dataSrc: (json) => ({
recordsTotal: json.total,
recordsFiltered: json.total,
data: json.users
})
},
columns: [
{ data: "id", title: "ID" },
{ data: "firstName", title: "First Name" },
{ data: "lastName", title: "Last Name" },
{ data: "email", title: "Email" }
],
serverSide: true,
pageLength: 10,
paging: true,
searching: true
});
</script>
</body>
</html>