tabulator-tables · rathboma · Jun 11, 2026 · Jun 11, 2026 · Jun 11, 2026 · Jun 11, 2026
diff --git a/.gitignore b/.gitignore
@@ -2,7 +2,6 @@
 *.sublime-workspace
 
 node_modules/
-examples/
 npm-debug.log
 
 # Playwright

diff --git a/examples/01-basic-table.html b/examples/01-basic-table.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Tabulator Example — 01 Basic Table</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="../dist/css/tabulator_bootstrap5.css" />
+  <script src="../dist/js/tabulator.js"></script>
+</head>
+<body>
+  <main class="container py-4">
+    <h1>01 · Basic Table</h1>
+    <p>
+      The simplest possible Tabulator: an array of data, a few column definitions,
+      a fit-to-width layout, and click-to-sort columns.
+      <a href="index.html">← back to index</a>
+    </p>
+
+    <div id="example-table"></div>
+  </main>
+
+  <script>
+    // Inline sample data — an array of plain objects.
+    var tabledata = [
+      { id: 1, name: "Oli Bob",      age: 12, country: "United Kingdom", rating: 1 },
+      { id: 2, name: "Mary May",     age: 1,  country: "Germany",        rating: 2 },
+      { id: 3, name: "Christine Lobowski", age: 42, country: "France",   rating: 0 },
+      { id: 4, name: "Brendon Philips",    age: 125, country: "USA",     rating: 1 },
+      { id: 5, name: "Margret Marmajuke",  age: 16, country: "Sweden",   rating: 5 },
+      { id: 6, name: "Van Ng",       age: 37, country: "Vietnam",        rating: 4 },
+      { id: 7, name: "Duc Ng",       age: 37, country: "Vietnam",        rating: 3 },
+    ];
+
+    // Create the table. Each column maps a header title to a data field.
+    // `sorter` tells Tabulator how to compare values when a header is clicked.
+    var table = new Tabulator("#example-table", {
+      data: tabledata,
+      layout: "fitColumns",       // columns expand to fill the available width
+      columns: [
+        { title: "ID",      field: "id",      width: 70, sorter: "number" },
+        { title: "Name",    field: "name",    sorter: "string" },
+        { title: "Age",     field: "age",     sorter: "number", hozAlign: "right" },
+        { title: "Country", field: "country", sorter: "string" },
+        { title: "Rating",  field: "rating",  sorter: "number", hozAlign: "right" },
+      ],
+    });
+  </script>
+</body>
+</html>
diff --git a/examples/02-formatters.html b/examples/02-formatters.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Tabulator Example — 02 Formatters</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="../dist/css/tabulator_bootstrap5.css" />
+  <script src="../dist/js/tabulator.js"></script>
+</head>
+<body>
+  <main class="container py-4">
+    <h1>02 · Cell Formatters</h1>
+    <p>
+      Built-in formatters change how a cell's value is displayed without changing the
+      underlying data. Here we use <code>progress</code>, <code>star</code>,
+      <code>tickCross</code>, <code>money</code>, <code>link</code> and <code>color</code>.
+      <a href="index.html">← back to index</a>
+    </p>
+
+    <div id="example-table"></div>
+  </main>
+
+  <script>
+    var tabledata = [
+      { id: 1, name: "Oli Bob",   progress: 12, rating: 1, paid: true,  salary: 32000, color: "#d9534f", site: "https://tabulator.info" },
+      { id: 2, name: "Mary May",  progress: 90, rating: 4, paid: false, salary: 41250, color: "#5cb85c", site: "https://tabulator.info" },
+      { id: 3, name: "Chris L.",  progress: 42, rating: 0, paid: true,  salary: 28900, color: "#f0ad4e", site: "https://tabulator.info" },
+      { id: 4, name: "Brendon P.",progress: 100,rating: 1, paid: false, salary: 56000, color: "#5bc0de", site: "https://tabulator.info" },
+      { id: 5, name: "Margret M.",progress: 16, rating: 5, paid: true,  salary: 38500, color: "#9b59b6", site: "https://tabulator.info" },
+    ];
+
+    var table = new Tabulator("#example-table", {
+      data: tabledata,
+      layout: "fitColumns",
+      columns: [
+        { title: "Name", field: "name", width: 130 },
+
+        // Progress bar driven by a 0-100 number, coloured low→high.
+        { title: "Progress", field: "progress", sorter: "number", minWidth: 130,
+          formatter: "progress", formatterParams: { min: 0, max: 100, color: ["#d9534f", "#f0ad4e", "#5cb85c"], legend: true } },
+
+        // Star rating out of 5.
+        { title: "Rating", field: "rating", width: 130, hozAlign: "center",
+          formatter: "star", formatterParams: { stars: 5 } },
+
+        // Boolean rendered as a tick / cross.
+        { title: "Paid", field: "paid", width: 90, hozAlign: "center",
+          formatter: "tickCross" },
+
+        // Currency formatting.
+        { title: "Salary", field: "salary", sorter: "number", hozAlign: "right",
+          formatter: "money", formatterParams: { symbol: "$", precision: 0, thousand: "," } },
+
+        // Swatch coloured from the cell value.
+        { title: "Colour", field: "color", width: 90, formatter: "color" },
+
+        // Clickable link.
+        { title: "Website", field: "site",
+          formatter: "link", formatterParams: { label: "Visit site", target: "_blank" } },
+      ],
+    });
+  </script>
+</body>
+</html>
diff --git a/examples/03-sorting-filtering.html b/examples/03-sorting-filtering.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Tabulator Example — 03 Sorting & Filtering</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="../dist/css/tabulator_bootstrap5.css" />
+  <script src="../dist/js/tabulator.js"></script>
+</head>
+<body>
+  <main class="container py-4">
+    <h1>03 · Sorting &amp; Filtering</h1>
+    <p>
+      Click a header to sort; hold <kbd>Shift</kbd> and click another to multi-sort.
+      Each column has a header filter (text input or dropdown). The buttons below drive
+      filtering programmatically via the API.
+      <a href="index.html">← back to index</a>
+    </p>
+
+    <div class="d-flex flex-wrap gap-2 mb-3">
+      <button id="filter-active" class="btn btn-primary">Only active</button>
+      <button id="filter-young" class="btn btn-primary">Age &lt; 30</button>
+      <button id="filter-eng" class="btn btn-secondary">Dept = Engineering</button>
+      <button id="filter-clear" class="btn btn-dark">Clear filters</button>
+    </div>
+
+    <div id="example-table"></div>
+  </main>
+
+  <script>
+    var tabledata = [
+      { id: 1, name: "Oli Bob",    age: 28, dept: "Engineering", active: true },
+      { id: 2, name: "Mary May",   age: 41, dept: "Sales",       active: false },
+      { id: 3, name: "Chris L.",   age: 22, dept: "Engineering", active: true },
+      { id: 4, name: "Brendon P.", age: 35, dept: "Marketing",   active: true },
+      { id: 5, name: "Margret M.", age: 26, dept: "Sales",       active: false },
+      { id: 6, name: "Van Ng",     age: 51, dept: "Engineering", active: true },
+      { id: 7, name: "Duc Ng",     age: 29, dept: "Marketing",   active: false },
+      { id: 8, name: "Anita Bath", age: 33, dept: "Sales",       active: true },
+    ];
+
+    var table = new Tabulator("#example-table", {
+      data: tabledata,
+      layout: "fitColumns",
+      columns: [
+        { title: "Name", field: "name", sorter: "string",
+          headerFilter: "input" },                           // free-text header filter
+        { title: "Age", field: "age", sorter: "number", hozAlign: "right",
+          headerFilter: "number", headerFilterPlaceholder: "≥", headerFilterFunc: ">=" },
+        { title: "Department", field: "dept", sorter: "string",
+          headerFilter: "list",                              // dropdown header filter
+          headerFilterParams: { values: ["Engineering", "Sales", "Marketing"], clearable: true } },
+        { title: "Active", field: "active", hozAlign: "center", formatter: "tickCross",
+          headerFilter: "tickCross", headerFilterParams: { tristate: true } },
+      ],
+    });
+
+    // Programmatic filtering via the API.
+    document.getElementById("filter-active").addEventListener("click", function () {
+      table.setFilter("active", "=", true);
+    });
+    document.getElementById("filter-young").addEventListener("click", function () {
+      table.setFilter("age", "<", 30);
+    });
+    document.getElementById("filter-eng").addEventListener("click", function () {
+      table.setFilter("dept", "=", "Engineering");
+    });
+    document.getElementById("filter-clear").addEventListener("click", function () {
+      table.clearFilter(true);   // also clears header filters
+    });
+  </script>
+</body>
+</html>
diff --git a/examples/04-editing.html b/examples/04-editing.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Tabulator Example — 04 Editing</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="../dist/css/tabulator_bootstrap5.css" />
+  <script src="../dist/js/tabulator.js"></script>
+</head>
+<body>
+  <main class="container py-4">
+    <h1>04 · Inline Editing &amp; Validation</h1>
+    <p>
+      Double-click (or click) a cell to edit it. This shows the <code>input</code>,
+      <code>number</code>, <code>list</code>, <code>star</code>, <code>tickCross</code>
+      and the built-in <code>date</code> editors, plus validators. Edits are logged below.
+      <a href="index.html">← back to index</a>
+    </p>
+
+    <div id="example-table"></div>
+
+    <h2>Edit log</h2>
+    <pre id="log" aria-live="polite">No edits yet — change a cell above.</pre>
+  </main>
+
+  <script>
+    var tabledata = [
+      { id: 1, name: "Oli Bob",   location: "United Kingdom", progress: 12, gender: "male",   rating: 1, dob: "2005-08-14", driver: true },
+      { id: 2, name: "Mary May",  location: "Germany",        progress: 90, gender: "female", rating: 4, dob: "1989-02-01", driver: false },
+      { id: 3, name: "Chris L.",  location: "France",         progress: 42, gender: "male",   rating: 0, dob: "1980-11-23", driver: true },
+      { id: 4, name: "Margret M.",location: "Sweden",         progress: 16, gender: "female", rating: 5, dob: "1998-06-30", driver: true },
+    ];
+
+    var logEl = document.getElementById("log");
+
+    var table = new Tabulator("#example-table", {
+      data: tabledata,
+      layout: "fitColumns",
+      columns: [
+        // Plain text input with a "required" validator.
+        { title: "Name", field: "name", editor: "input", validator: "required" },
+
+        // List editor that auto-populates its options from existing column values.
+        { title: "Location", field: "location", editor: "list",
+          editorParams: { autocomplete: true, allowEmpty: true, listOnEmpty: true, valuesLookup: true } },
+
+        // Number editor constrained to 0-100, shown as a progress bar.
+        { title: "Progress", field: "progress", sorter: "number", formatter: "progress",
+          editor: "number", editorParams: { min: 0, max: 100 },
+          validator: ["min:0", "max:100"] },
+
+        // List editor with an explicit value map.
+        { title: "Gender", field: "gender", editor: "list",
+          editorParams: { values: { male: "Male", female: "Female", unknown: "Unknown" } } },
+
+        // Star editor — click a star to set the rating.
+        { title: "Rating", field: "rating", formatter: "star", hozAlign: "center",
+          width: 130, editor: "star" },
+
+        // Built-in date editor using a native <input type="date"> (no external libs).
+        { title: "Date Of Birth", field: "dob", sorter: "date", hozAlign: "center",
+          editor: "date" },
+
+        // Boolean toggled with a tick/cross editor.
+        { title: "Driver", field: "driver", hozAlign: "center", formatter: "tickCross",
+          editor: "tickCross" },
+      ],
+    });
+
+    // In Tabulator 6 you bind event callbacks with table.on(...).
+    // cellEdited fires after a cell is successfully edited.
+    table.on("cellEdited", function (cell) {
+      var msg = cell.getField() + " (row " + cell.getRow().getIndex() + "): "
+        + JSON.stringify(cell.getOldValue()) + " → " + JSON.stringify(cell.getValue());
+      logEl.textContent = msg + "\n" + logEl.textContent;
+    });
+  </script>
+</body>
+</html>
diff --git a/examples/05-pagination.html b/examples/05-pagination.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Tabulator Example — 05 Pagination</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
+  <link rel="stylesheet" href="../dist/css/tabulator_bootstrap5.css" />
+  <script src="../dist/js/tabulator.js"></script>
+</head>
+<body>
+  <main class="container py-4">
+    <h1>05 · Pagination</h1>
+    <p>
+      Client-side pagination over a larger generated dataset. Use the page controls at the
+      bottom, change the page size with the selector, and watch the row counter.
+      <a href="index.html">← back to index</a>
+    </p>
+
+    <div id="example-table"></div>
+  </main>
+
+  <script>
+    // Generate 200 rows of sample data so paging is meaningful.
+    var firstNames = ["Oli", "Mary", "Chris", "Brendon", "Margret", "Van", "Duc", "Anita", "Sam", "Priya"];
+    var depts = ["Engineering", "Sales", "Marketing", "Support", "Finance"];
+    var tabledata = [];
+    for (var i = 1; i <= 200; i++) {
+      tabledata.push({
+        id: i,
+        name: firstNames[i % firstNames.length] + " #" + i,
+        dept: depts[i % depts.length],
+        age: 18 + (i * 7) % 45,
+        score: (i * 37) % 100,
+      });
+    }
+
+    var table = new Tabulator("#example-table", {
+      data: tabledata,
+      layout: "fitColumns",
+      pagination: "local",                       // page the in-memory data
+      paginationSize: 10,                        // rows per page
+      paginationSizeSelector: [10, 25, 50, 100], // let the user change page size
+      paginationCounter: "rows",                 // "Showing X-Y of Z rows"
+      columns: [
+        { title: "ID", field: "id", width: 70, sorter: "number" },
+        { title: "Name", field: "name", sorter: "string" },
+        { title: "Department", field: "dept", sorter: "string" },
+        { title: "Age", field: "age", sorter: "number", hozAlign: "right" },
+        { title: "Score", field: "score", sorter: "number", hozAlign: "right",
+          formatter: "progress", formatterParams: { min: 0, max: 100 } },
+      ],
+    });
+  </script>
+</body>
+</html>