v0.11.0 — Zero Dependencies • ~5KB gzipped

Data tables made
ridiculously simple

A lightweight JavaScript library with reactive data, built-in search, sorting, pagination, and a plugin system. No frameworks required.

$ npm install ezytables
Get Started View on GitHub
Features

Everything you need, nothing you don't

Built for developers who want powerful data tables without the bloat of heavy libraries.

Zero Dependencies

Under 5KB gzipped. No jQuery, no frameworks, no bloat. Just pure JavaScript that works everywhere.

Reactive Data

Powered by JavaScript Proxy. Change your data array and the table updates instantly — no manual refresh needed.

Built-in Search

Debounced full-text search across all fields. Case-insensitive, instant results as users type.

Column Sorting

Sort ascending or descending on any column. Handles strings, numbers, and dates automatically.

Smart Pagination

Configurable items-per-page with next/prev/goToPage navigation. Works with both client and server data.

Plugin System

Transform cell data with plugins — format dates, render badges, add icons. Extensible by design.

Live Demo

See it in action

This table is powered by EzyTables. Try searching, sorting, and paginating.

entries
Name ↕ Role ↕ Email ↕ Status ↕
Quick Start

Up and running in under a minute

Two modes: use a render function for full control, or target an existing HTML table. 

import { EzyTables } from "ezytables";

const table = new EzyTables({
  data: myData,
  clientEnabled: true,
  client: { perPage: 10 },
  renderFunction: (pageData) => {
    const tbody = document.querySelector("#myTable tbody");
    tbody.innerHTML = "";
    pageData.forEach(item => {
      const row = document.createElement("tr");
      row.textContent = item.name;  // Build your rows here
      tbody.appendChild(row);
    });
  },
});

// Search, sort, paginate
table.setSearchDebounced("Alice");
table.sortData("name", "asc");
table.nextPage();
// Point at an existing <table> — EzyTables takes over
const table = new EzyTables({
  target: "#myTable",
  data: myData,
  classes: {
    container: "shadow rounded-lg p-4",
    table: {
      container: "min-w-full divide-y",
      thead: { th: "px-3 py-3 text-sm font-semibold" },
      tbody: { td: "px-3 py-4 text-sm" },
    },
  },
  plugins: [dateFormatPlugin],
});
API Reference

Simple, powerful API

Everything is accessible from a single class instance.

Method Returns Description
new EzyTables(options) instance Create a new table instance
setSearchDebounced(query) void Search with 300ms debounce
sortData(field, order?) void Sort by column — "asc" or "desc"
nextPage() void Navigate to next page
prevPage() void Navigate to previous page
goToPage(page) void Jump to a specific page number
getCurrentPage() number Get current page number
getTotalPages() number Get total number of pages
getShowingInfo() string "Showing 1 to 10 of 50 items"
setPerPage(n) void Change items per page
registerPlugin(plugin) void Add a data transform plugin
setData(data) void Replace the entire data source
getRawData() any[] Get a copy of the raw data
destroy() void Clean up and remove the table

Ready to simplify your tables?

Get started in seconds with npm or a CDN.

View on npm → Star on GitHub