Open Source

TableCrafter.js

Zero-dependency vanilla JS data table. ~27 KB min+gz. MIT licensed. Framework-agnostic.

MIT ~27 KB min+gz v2.0.0 Zero dependencies GitHub

TableCrafter.js turns any JavaScript array, REST URL, or CSV into a fully interactive, editable, mobile-ready data table with a single constructor call. No framework, no build step, no server required.

Quick start

Include the CSS and UMD script from jsDelivr, then drop a data-tc-bootstrap element onto the page:

<!-- 1. Add styles and script from jsDelivr -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/tablecrafter@2/dist/tablecrafter.css">
<script src="https://cdn.jsdelivr.net/npm/tablecrafter@2/dist/tablecrafter.umd.min.js"></script>

<!-- 2. Declare a table with data-tc-bootstrap -->
<div data-tc-bootstrap
     data-tc-config='{
       "columns":[{"field":"name","label":"Name"},{"field":"role","label":"Role"}],
       "data":[{"name":"Alice","role":"Engineer"},{"name":"Bob","role":"Designer"}],
       "filterable":true,
       "sortable":true
     }'></div>

<!-- 3. Auto-init all data-tc-bootstrap elements on the page -->
<script>
const tables = TableCrafter.bootstrap(); // returns Map<HTMLElement, TableCrafter>
</script>

For JavaScript-driven initialization, use the constructor directly:

const table = new TableCrafter('#my-table', {
  data: '/api/employees',
  columns: [
    { field: 'id',    label: 'ID' },
    { field: 'name',  label: 'Name',  editable: true },
    { field: 'email', label: 'Email', editable: true, type: 'email' },
  ],
  editable: true,
  filterable: true,
  pagination: true,
});
table.render();

Features

Display

Multi-column sortUnlimited sort keys, shift-click chaining, custom comparators
Search grammarAND, OR, negation, field:value, regex, comparison operators in a single search bar
Per-column filtersText, multiselect, date range, number range; column type auto-detected
Mobile card viewResponsive breakpoints collapse rows into readable cards instead of squishing columns
Virtual scrollWindowed rendering via enableVirtualScroll(); handles large datasets without pagination
Formula columnsComputed values using arithmetic, comparisons, IF, CONCAT, LENGTH, UPPER, LOWER
Conditional formattingData bars, color scales, icon sets, and heatmap cells (cellType:'heatmap'); all ARIA-labeled
i18n and RTL6 bundled locales: en, es, fr, de, ar, ur. RTL layout applied automatically for ar and ur

Editing and validation

14 inline cell editorstext, textarea, number, email, date, datetime, select, multiselect, checkbox, radio, file, url, color, range
15+ validation rulesrequired, minLength, maxLength, min, max, pattern, email, url, phone, date bounds, oneOf, notOneOf, unique, custom function
Role-based permissionsPer-action view/edit/delete/create; row-level ownOnly ownership
Bulk operationsMulti-row select, delete, export, and custom actions

Extensibility and export

Events APIon / off / once for 8 named events; each on() returns an unsubscribe function
Plugin hooksuse(plugin) / unuse(name) with lifecycle pairs: beforeRender/afterRender, beforeSort, beforeEdit/afterEdit, beforeLoad/afterLoad, destroy
CSV and JSON exportRFC-4180 CSV (injection-safe, filtered) and JSON serialization; both native with no extra dependencies
XLSX and PDF exportOptional via peer dependencies: xlsx for spreadsheets; jspdf + jspdf-autotable for PDF

Relationship to the TableCrafter WordPress plugin

TableCrafter.js shares feature DNA with the TableCrafter WordPress plugin and is tracking full parity on client-side capabilities. The plugin adds server-side concerns the library deliberately omits: Gravity Forms write-back, Gutenberg and Elementor blocks, scheduled exports, encrypted data source credentials, and WordPress user-role integration. The library covers these use cases through its own api.* config, permissions object, and plugin system.

The current gap status between the two is tracked in docs/PARITY.md.

v3 is coming

v3 is in the RFC phase. The plan splits the current monolith into a headless TypeScript core plus a default DOM renderer, with every optional capability available as a tree-shakeable ESM subpath export and a single IIFE CDN bundle for no-build-step use. The v2 one-line ergonomics are preserved. See the v3 RFC on GitHub for the full architecture proposal.