Basic Local Table

Vanilla JavaScript data table with sorting, search, pagination, render callbacks, lifecycle hooks, and a simple opt-out path if you want all rows visible.

Library setup

Start with the core stylesheet, import DogTable, and pass local data plus your columns.

<link rel="stylesheet" href="../src/data-table.css" />

<script type="module">
  import { DogTable } from "../src/data-table.js";

  const table = new DogTable("#app", {
    data,
    pageSize: 3,
    columns: [
      { key: "name", label: "Name" },
      { key: "breed", label: "Breed" },
      { key: "age", label: "Age" },
    ],
  });

  table.init();
</script>

Want to remove pagination entirely? Add pagination: false. If you also pass paginationGuard, Dog Table will ignore it and print a console.warn.

const fullListTable = new DogTable("#all-dogs", {
  data,
  pagination: false,
  columns: [
    { key: "name", label: "Name" },
    { key: "breed", label: "Breed" },
    { key: "age", label: "Age" },
  ],
});

fullListTable.init();