Skip to content

Commit adb111f

Browse files
claudeclaude
committed
Add examples/ library of escalating-complexity demos
Adds a curated set of 10 standalone, self-contained HTML examples plus an index landing page and README under examples/. They load the locally-built library from ../dist/ (not the npm package) so they double as a pre-release smoke-test suite, and progress from a basic table up to a full-featured grid (editing, grouping, calculations, selection, downloads and persistence). Tabulator usage stays dependency-free; only the example pages themselves pull in the classless Pico.css stylesheet from a CDN for basic page styling. Also removes the examples/ entry from .gitignore so the new folder is tracked.
1 parent ad0f4a2 commit adb111f

13 files changed

Lines changed: 830 additions & 1 deletion

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
*.sublime-workspace
33

44
node_modules/
5-
examples/
65
npm-debug.log
76

87
# Playwright

‎examples/01-basic-table.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Tabulator Example — 01 Basic Table</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
8+
<link rel="stylesheet" href="../dist/css/tabulator.css" />
9+
<script src="../dist/js/tabulator.js"></script>
10+
</head>
11+
<body>
12+
<main>
13+
<h1>01 · Basic Table</h1>
14+
<p>
15+
The simplest possible Tabulator: an array of data, a few column definitions,
16+
a fit-to-width layout, and click-to-sort columns.
17+
<a href="index.html">← back to index</a>
18+
</p>
19+
20+
<div id="example-table"></div>
21+
</main>
22+
23+
<script>
24+
// Inline sample data — an array of plain objects.
25+
var tabledata = [
26+
{ id: 1, name: "Oli Bob", age: 12, country: "United Kingdom", rating: 1 },
27+
{ id: 2, name: "Mary May", age: 1, country: "Germany", rating: 2 },
28+
{ id: 3, name: "Christine Lobowski", age: 42, country: "France", rating: 0 },
29+
{ id: 4, name: "Brendon Philips", age: 125, country: "USA", rating: 1 },
30+
{ id: 5, name: "Margret Marmajuke", age: 16, country: "Sweden", rating: 5 },
31+
{ id: 6, name: "Van Ng", age: 37, country: "Vietnam", rating: 4 },
32+
{ id: 7, name: "Duc Ng", age: 37, country: "Vietnam", rating: 3 },
33+
];
34+
35+
// Create the table. Each column maps a header title to a data field.
36+
// `sorter` tells Tabulator how to compare values when a header is clicked.
37+
var table = new Tabulator("#example-table", {
38+
data: tabledata,
39+
layout: "fitColumns", // columns expand to fill the available width
40+
columns: [
41+
{ title: "ID", field: "id", width: 70, sorter: "number" },
42+
{ title: "Name", field: "name", sorter: "string" },
43+
{ title: "Age", field: "age", sorter: "number", hozAlign: "right" },
44+
{ title: "Country", field: "country", sorter: "string" },
45+
{ title: "Rating", field: "rating", sorter: "number", hozAlign: "right" },
46+
],
47+
});
48+
</script>
49+
</body>
50+
</html>

‎examples/02-formatters.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Tabulator Example — 02 Formatters</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
8+
<link rel="stylesheet" href="../dist/css/tabulator.css" />
9+
<script src="../dist/js/tabulator.js"></script>
10+
</head>
11+
<body>
12+
<main>
13+
<h1>02 · Cell Formatters</h1>
14+
<p>
15+
Built-in formatters change how a cell's value is displayed without changing the
16+
underlying data. Here we use <code>progress</code>, <code>star</code>,
17+
<code>tickCross</code>, <code>money</code>, <code>link</code> and <code>color</code>.
18+
<a href="index.html">← back to index</a>
19+
</p>
20+
21+
<div id="example-table"></div>
22+
</main>
23+
24+
<script>
25+
var tabledata = [
26+
{ id: 1, name: "Oli Bob", progress: 12, rating: 1, paid: true, salary: 32000, color: "#d9534f", site: "https://tabulator.info" },
27+
{ id: 2, name: "Mary May", progress: 90, rating: 4, paid: false, salary: 41250, color: "#5cb85c", site: "https://tabulator.info" },
28+
{ id: 3, name: "Chris L.", progress: 42, rating: 0, paid: true, salary: 28900, color: "#f0ad4e", site: "https://tabulator.info" },
29+
{ id: 4, name: "Brendon P.",progress: 100,rating: 1, paid: false, salary: 56000, color: "#5bc0de", site: "https://tabulator.info" },
30+
{ id: 5, name: "Margret M.",progress: 16, rating: 5, paid: true, salary: 38500, color: "#9b59b6", site: "https://tabulator.info" },
31+
];
32+
33+
var table = new Tabulator("#example-table", {
34+
data: tabledata,
35+
layout: "fitColumns",
36+
columns: [
37+
{ title: "Name", field: "name", width: 130 },
38+
39+
// Progress bar driven by a 0-100 number, coloured low→high.
40+
{ title: "Progress", field: "progress", sorter: "number", minWidth: 130,
41+
formatter: "progress", formatterParams: { min: 0, max: 100, color: ["#d9534f", "#f0ad4e", "#5cb85c"], legend: true } },
42+
43+
// Star rating out of 5.
44+
{ title: "Rating", field: "rating", width: 130, hozAlign: "center",
45+
formatter: "star", formatterParams: { stars: 5 } },
46+
47+
// Boolean rendered as a tick / cross.
48+
{ title: "Paid", field: "paid", width: 90, hozAlign: "center",
49+
formatter: "tickCross" },
50+
51+
// Currency formatting.
52+
{ title: "Salary", field: "salary", sorter: "number", hozAlign: "right",
53+
formatter: "money", formatterParams: { symbol: "$", precision: 0, thousand: "," } },
54+
55+
// Swatch coloured from the cell value.
56+
{ title: "Colour", field: "color", width: 90, formatter: "color" },
57+
58+
// Clickable link.
59+
{ title: "Website", field: "site",
60+
formatter: "link", formatterParams: { label: "Visit site", target: "_blank" } },
61+
],
62+
});
63+
</script>
64+
</body>
65+
</html>

‎examples/03-sorting-filtering.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Tabulator Example — 03 Sorting & Filtering</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
8+
<link rel="stylesheet" href="../dist/css/tabulator.css" />
9+
<script src="../dist/js/tabulator.js"></script>
10+
</head>
11+
<body>
12+
<main>
13+
<h1>03 · Sorting &amp; Filtering</h1>
14+
<p>
15+
Click a header to sort; hold <kbd>Shift</kbd> and click another to multi-sort.
16+
Each column has a header filter (text input or dropdown). The buttons below drive
17+
filtering programmatically via the API.
18+
<a href="index.html">← back to index</a>
19+
</p>
20+
21+
<div role="group">
22+
<button id="filter-active">Only active</button>
23+
<button id="filter-young">Age &lt; 30</button>
24+
<button id="filter-eng" class="secondary">Dept = Engineering</button>
25+
<button id="filter-clear" class="contrast">Clear filters</button>
26+
</div>
27+
28+
<div id="example-table"></div>
29+
</main>
30+
31+
<script>
32+
var tabledata = [
33+
{ id: 1, name: "Oli Bob", age: 28, dept: "Engineering", active: true },
34+
{ id: 2, name: "Mary May", age: 41, dept: "Sales", active: false },
35+
{ id: 3, name: "Chris L.", age: 22, dept: "Engineering", active: true },
36+
{ id: 4, name: "Brendon P.", age: 35, dept: "Marketing", active: true },
37+
{ id: 5, name: "Margret M.", age: 26, dept: "Sales", active: false },
38+
{ id: 6, name: "Van Ng", age: 51, dept: "Engineering", active: true },
39+
{ id: 7, name: "Duc Ng", age: 29, dept: "Marketing", active: false },
40+
{ id: 8, name: "Anita Bath", age: 33, dept: "Sales", active: true },
41+
];
42+
43+
var table = new Tabulator("#example-table", {
44+
data: tabledata,
45+
layout: "fitColumns",
46+
columns: [
47+
{ title: "Name", field: "name", sorter: "string",
48+
headerFilter: "input" }, // free-text header filter
49+
{ title: "Age", field: "age", sorter: "number", hozAlign: "right",
50+
headerFilter: "number", headerFilterPlaceholder: "≥", headerFilterFunc: ">=" },
51+
{ title: "Department", field: "dept", sorter: "string",
52+
headerFilter: "list", // dropdown header filter
53+
headerFilterParams: { values: ["Engineering", "Sales", "Marketing"], clearable: true } },
54+
{ title: "Active", field: "active", hozAlign: "center", formatter: "tickCross",
55+
headerFilter: "tickCross", headerFilterParams: { tristate: true } },
56+
],
57+
});
58+
59+
// Programmatic filtering via the API.
60+
document.getElementById("filter-active").addEventListener("click", function () {
61+
table.setFilter("active", "=", true);
62+
});
63+
document.getElementById("filter-young").addEventListener("click", function () {
64+
table.setFilter("age", "<", 30);
65+
});
66+
document.getElementById("filter-eng").addEventListener("click", function () {
67+
table.setFilter("dept", "=", "Engineering");
68+
});
69+
document.getElementById("filter-clear").addEventListener("click", function () {
70+
table.clearFilter(true); // also clears header filters
71+
});
72+
</script>
73+
</body>
74+
</html>

‎examples/04-editing.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Tabulator Example — 04 Editing</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
8+
<link rel="stylesheet" href="../dist/css/tabulator.css" />
9+
<script src="../dist/js/tabulator.js"></script>
10+
</head>
11+
<body>
12+
<main>
13+
<h1>04 · Inline Editing &amp; Validation</h1>
14+
<p>
15+
Double-click (or click) a cell to edit it. This shows the <code>input</code>,
16+
<code>number</code>, <code>list</code>, <code>star</code>, <code>tickCross</code>
17+
and the built-in <code>date</code> editors, plus validators. Edits are logged below.
18+
<a href="index.html">← back to index</a>
19+
</p>
20+
21+
<div id="example-table"></div>
22+
23+
<h2>Edit log</h2>
24+
<pre id="log" aria-live="polite">No edits yet — change a cell above.</pre>
25+
</main>
26+
27+
<script>
28+
var tabledata = [
29+
{ id: 1, name: "Oli Bob", location: "United Kingdom", progress: 12, gender: "male", rating: 1, dob: "2005-08-14", driver: true },
30+
{ id: 2, name: "Mary May", location: "Germany", progress: 90, gender: "female", rating: 4, dob: "1989-02-01", driver: false },
31+
{ id: 3, name: "Chris L.", location: "France", progress: 42, gender: "male", rating: 0, dob: "1980-11-23", driver: true },
32+
{ id: 4, name: "Margret M.",location: "Sweden", progress: 16, gender: "female", rating: 5, dob: "1998-06-30", driver: true },
33+
];
34+
35+
var logEl = document.getElementById("log");
36+
37+
var table = new Tabulator("#example-table", {
38+
data: tabledata,
39+
layout: "fitColumns",
40+
columns: [
41+
// Plain text input with a "required" validator.
42+
{ title: "Name", field: "name", editor: "input", validator: "required" },
43+
44+
// List editor that auto-populates its options from existing column values.
45+
{ title: "Location", field: "location", editor: "list",
46+
editorParams: { autocomplete: true, allowEmpty: true, listOnEmpty: true, valuesLookup: true } },
47+
48+
// Number editor constrained to 0-100, shown as a progress bar.
49+
{ title: "Progress", field: "progress", sorter: "number", formatter: "progress",
50+
editor: "number", editorParams: { min: 0, max: 100 },
51+
validator: ["min:0", "max:100"] },
52+
53+
// List editor with an explicit value map.
54+
{ title: "Gender", field: "gender", editor: "list",
55+
editorParams: { values: { male: "Male", female: "Female", unknown: "Unknown" } } },
56+
57+
// Star editor — click a star to set the rating.
58+
{ title: "Rating", field: "rating", formatter: "star", hozAlign: "center",
59+
width: 130, editor: "star" },
60+
61+
// Built-in date editor using a native <input type="date"> (no external libs).
62+
{ title: "Date Of Birth", field: "dob", sorter: "date", hozAlign: "center",
63+
editor: "date" },
64+
65+
// Boolean toggled with a tick/cross editor.
66+
{ title: "Driver", field: "driver", hozAlign: "center", formatter: "tickCross",
67+
editor: "tickCross" },
68+
],
69+
});
70+
71+
// In Tabulator 6 you bind event callbacks with table.on(...).
72+
// cellEdited fires after a cell is successfully edited.
73+
table.on("cellEdited", function (cell) {
74+
var msg = cell.getField() + " (row " + cell.getRow().getIndex() + "): "
75+
+ JSON.stringify(cell.getOldValue()) + " → " + JSON.stringify(cell.getValue());
76+
logEl.textContent = msg + "\n" + logEl.textContent;
77+
});
78+
</script>
79+
</body>
80+
</html>

‎examples/05-pagination.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Tabulator Example — 05 Pagination</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
8+
<link rel="stylesheet" href="../dist/css/tabulator.css" />
9+
<script src="../dist/js/tabulator.js"></script>
10+
</head>
11+
<body>
12+
<main>
13+
<h1>05 · Pagination</h1>
14+
<p>
15+
Client-side pagination over a larger generated dataset. Use the page controls at the
16+
bottom, change the page size with the selector, and watch the row counter.
17+
<a href="index.html">← back to index</a>
18+
</p>
19+
20+
<div id="example-table"></div>
21+
</main>
22+
23+
<script>
24+
// Generate 200 rows of sample data so paging is meaningful.
25+
var firstNames = ["Oli", "Mary", "Chris", "Brendon", "Margret", "Van", "Duc", "Anita", "Sam", "Priya"];
26+
var depts = ["Engineering", "Sales", "Marketing", "Support", "Finance"];
27+
var tabledata = [];
28+
for (var i = 1; i <= 200; i++) {
29+
tabledata.push({
30+
id: i,
31+
name: firstNames[i % firstNames.length] + " #" + i,
32+
dept: depts[i % depts.length],
33+
age: 18 + (i * 7) % 45,
34+
score: (i * 37) % 100,
35+
});
36+
}
37+
38+
var table = new Tabulator("#example-table", {
39+
data: tabledata,
40+
layout: "fitColumns",
41+
pagination: "local", // page the in-memory data
42+
paginationSize: 10, // rows per page
43+
paginationSizeSelector: [10, 25, 50, 100], // let the user change page size
44+
paginationCounter: "rows", // "Showing X-Y of Z rows"
45+
columns: [
46+
{ title: "ID", field: "id", width: 70, sorter: "number" },
47+
{ title: "Name", field: "name", sorter: "string" },
48+
{ title: "Department", field: "dept", sorter: "string" },
49+
{ title: "Age", field: "age", sorter: "number", hozAlign: "right" },
50+
{ title: "Score", field: "score", sorter: "number", hozAlign: "right",
51+
formatter: "progress", formatterParams: { min: 0, max: 100 } },
52+
],
53+
});
54+
</script>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)