Tabulator Interactive Tables

Common errors

• TypeError: Tabulator is not a constructor

  cause Attempting to instantiate `Tabulator` as a default export in ES Modules after v6.3, or from a CommonJS module that doesn't expose it correctly.
  fix For ES Modules (v6.3+), use `import { Tabulator } from 'tabulator-tables';`. For CommonJS, use `const { Tabulator } = require('tabulator-tables');`.

• ReferenceError: Tabulator is not defined

  cause Trying to use the `Tabulator` global variable when the library has been imported via a module system (ESM/CJS) without explicitly attaching it to `window`, or when the script tag failed to load properly.
  fix Ensure the `tabulator.min.js` script is loaded *before* your inline script attempts to use `new Tabulator()`, or preferably, use ES Module imports (`import { Tabulator } from 'tabulator-tables';`) and instantiate it within your module scope.

• Column 'X' not found or unexpected table formatting issues after upgrade.

  cause Using renamed formatters or editors, or an outdated configuration for column definitions after a major version upgrade, especially v6.3.
  fix Review the v6.3 release notes and documentation for any renamed formatters, editors, or changes in how custom formatters/editors are registered using `Tabulator.registerModule()`.

Warnings

• breaking Module import paths and structure changed significantly in v6.3. The default export for the `Tabulator` constructor was removed in favor of a named export.
  Fix: Update ES Module imports from `import Tabulator from 'tabulator-tables';` to `import { Tabulator } from 'tabulator-tables';`.
• breaking Several formatters and editors were renamed or their registration methods changed in v6.3, requiring updates to existing custom table configurations.
  Fix: Refer to the official v6.3 release notes at http://tabulator.info/docs/6.3/release and documentation for updated formatter/editor names and the new `Tabulator.registerModule()` method for custom registrations.
• gotcha Tables will appear unstyled or malformed if the required CSS is not imported or linked correctly. This is a common oversight when integrating with bundlers or in single-page applications.
  Fix: Ensure you `import 'tabulator-tables/dist/css/tabulator.min.css';` in your main application file or link to the CSS file in your HTML when not using a bundler.
• deprecated The Bower package manager is officially deprecated. While `tabulator-tables` can still be installed via Bower, it is no longer the recommended method for package management.
  Fix: Prefer `npm install tabulator-tables --save` or `yarn add tabulator-tables` for package management in modern JavaScript projects.

Install

• npm install tabulator-tables npm
• yarn add tabulator-tables yarn
• pnpm add tabulator-tables pnpm

Imports

• Tabulator
  wrong:

  import Tabulator from 'tabulator-tables';

  correct:

  import { Tabulator } from 'tabulator-tables';

  Since v6.3, `Tabulator` is a named export for ES Modules. Prior versions or CommonJS environments might have used a default export.
• CSS Styles

  import 'tabulator-tables/dist/css/tabulator.min.css';

  Crucial for proper table rendering. Ensure your bundler is configured to process CSS imports.
• Tabulator (CommonJS)
  wrong:

  const Tabulator = require('tabulator-tables');

  correct:

  const { Tabulator } = require('tabulator-tables');

  For CommonJS environments, ensure you destructure the `Tabulator` class as a named export from the module for consistency and reliability across versions.

Quickstart

Demonstrates basic setup of Tabulator with ES Modules, including data, column definitions, and dynamic row addition upon user interaction.

import { Tabulator } from 'tabulator-tables';
import 'tabulator-tables/dist/css/tabulator.min.css';

// Ensure the DOM is loaded before initializing Tabulator
document.addEventListener('DOMContentLoaded', () => {
  const tableElement = document.createElement('div');
  tableElement.id = 'example-table';
  document.body.appendChild(tableElement);

  // Sample data for the table
  const tableData = [
    {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
    {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
    {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
    {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"}
  ];

  // Initialize Tabulator on the created div element
  const table = new Tabulator("#example-table", {
    height:"310px", // Set table height, enables Virtual DOM for large datasets
    data:tableData, // Assign data to the table
    layout:"fitColumns", // Fit columns to the width of the table
    columns:[ // Define table columns with titles, fields, and optional formatters/sorters
      {title:"Name", field:"name", width:150},
      {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
      {title:"Favorite Color", field:"col"},
      {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"}
    ],
  });

  // Example: Dynamically add a new row to the table
  const addButton = document.createElement('button');
  addButton.textContent = 'Add New Row';
  addButton.id = 'add-row';
  document.body.appendChild(addButton);

  addButton.addEventListener('click', () => {
    table.addRow({id: tableData.length + 1, name: `User ${tableData.length + 1}`, age: Math.floor(Math.random() * 50) + 20, col: "purple", dob: ""});
  });
});