modern-table-js
Version:
Modern, lightweight, vanilla JavaScript table library with zero dependencies. 67% faster than DataTables with mobile-first responsive design.
75 lines (68 loc) • 2.37 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test: DummyJSON API Integration</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">
<link href="/responsive.css" rel="stylesheet">
<link href="/themes.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h2>🧪 Test: DummyJSON API Integration</h2>
<p class="text-muted">Testing ModernTable.js with DummyJSON API parameter transformation</p>
<div class="card">
<div class="card-header">
<h5>Users Table (Server-Side Paging)</h5>
</div>
<div class="card-body">
<table id="users-table" class="table table-striped"></table>
</div>
</div>
</div>
<script type="module">
import { ModernTable } from "/core/ModernTable.js";
const table = new ModernTable("#users-table", {
api: {
url: "https://dummyjson.com/users",
method: "GET",
beforeRequest: async (config) => {
const params = config.data || {};
const query = new URLSearchParams();
// Map DataTables format → DummyJSON format
query.append("limit", params.length || 10);
query.append("skip", params.start || 0);
query.append("q", params.search?.value || "");
config.url = `https://dummyjson.com/users?${query.toString()}`;
console.log("🌐 Request URL:", config.url);
return config;
},
dataSrc: function(json) {
console.log("📥 Response:", json);
return {
draw: json.draw || 1,
recordsTotal: json.total,
recordsFiltered: json.total,
data: json.users
};
}
},
columns: [
{ data: "id", title: "ID", width: "60px" },
{ data: "firstName", title: "First Name" },
{ data: "lastName", title: "Last Name" },
{ data: "email", title: "Email" },
{ data: "phone", title: "Phone" }
],
serverSide: true,
pageLength: 10,
paging: true,
searching: true,
ordering: true,
responsive: true
});
</script>
</body>
</html>