Introducing vanillajs-datatable: A Lightweight, Modern Alternative to jQuery DataTables

Usama Ramzan — Fri, 11 Jul 2025 14:36:17 +0000

Tired of jQuery bloat just to render a DataTable?

So was I. That’s why I built vanillajs-datatable — a zero-dependency, framework-agnostic DataTable component written in clean, modern JavaScript.

## ⚡️ Key Features

✅ Lightweight (under 15 KB gzipped)
✅ No jQuery, no frameworks
✅ Works with Tailwind, DaisyUI, Bootstrap
✅ AJAX and server-side data loading
✅ Sortable, filterable, paginated
✅ Grouped columns, custom cell renderers
✅ CSV, JSON, PDF export options
✅ Simple to set up, powerful to extend
✅ etc

Install the package

npm install vanillajs-datatable

https://www.npmjs.com/package/vanillajs-datatable

or use with CDN

import DataTable from "vanillajs-datatable";

document.addEventListener("DOMContentLoaded", () => { const table = new DataTable({ tableId: "userdatatable", url: "/api/users", dataSrc: "users", perPageOptions: [5, 10, 25, 50], columns: [ { name: "id", label: "ID" }, { name: "name", label: "Name", highlightable: true }, { name: "email", label: "Email" }, { name: "created_at", label: "Created", render: (val) => new Date(val).toLocaleDateString(), }, ], }); });

DEV Community: Usama Ramzan

Introducing vanillajs-datatable: A Lightweight, Modern Alternative to jQuery DataTables

https://www.npmjs.com/package/vanillajs-datatable