{"id":12115,"library":"tabulator-tables","title":"Tabulator Interactive Tables","description":"Tabulator Tables is a robust JavaScript library designed for generating interactive tables from various data sources including HTML, JavaScript arrays, or JSON. It provides extensive features such as data sorting, filtering, editing, AJAX loading, and custom cell formatting. Currently at version 6.4.0, the library maintains an active development pace with frequent patch and minor releases, often addressing bug fixes, performance improvements, and feature enhancements. Its key differentiators include ease of use, a comprehensive feature set for complex data presentation, and strong compatibility with major front-end frameworks like React, Angular, and Vue, without requiring framework-specific wrappers. Recent releases, particularly v6.3.0, focused on significant improvements to ESM import compatibility and dependency management, streamlining its integration into modern build pipelines, and it includes a suite of unit and end-to-end tests for stability.","status":"active","version":"6.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/olifolkerd/tabulator","tags":["javascript","table","grid","datagrid","tabulator","editable","sort","format","resizable"],"install":[{"cmd":"npm install tabulator-tables","lang":"bash","label":"npm"},{"cmd":"yarn add tabulator-tables","lang":"bash","label":"yarn"},{"cmd":"pnpm add tabulator-tables","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Since v6.3, `Tabulator` is a named export for ES Modules. Prior versions or CommonJS environments might have used a default export.","wrong":"import Tabulator from 'tabulator-tables';","symbol":"Tabulator","correct":"import { Tabulator } from 'tabulator-tables';"},{"note":"Crucial for proper table rendering. Ensure your bundler is configured to process CSS imports.","symbol":"CSS Styles","correct":"import 'tabulator-tables/dist/css/tabulator.min.css';"},{"note":"For CommonJS environments, ensure you destructure the `Tabulator` class as a named export from the module for consistency and reliability across versions.","wrong":"const Tabulator = require('tabulator-tables');","symbol":"Tabulator (CommonJS)","correct":"const { Tabulator } = require('tabulator-tables');"}],"quickstart":{"code":"import { Tabulator } from 'tabulator-tables';\nimport 'tabulator-tables/dist/css/tabulator.min.css';\n\n// Ensure the DOM is loaded before initializing Tabulator\ndocument.addEventListener('DOMContentLoaded', () => {\n  const tableElement = document.createElement('div');\n  tableElement.id = 'example-table';\n  document.body.appendChild(tableElement);\n\n  // Sample data for the table\n  const tableData = [\n    {id:1, name:\"Oli Bob\", age:\"12\", col:\"red\", dob:\"\"},\n    {id:2, name:\"Mary May\", age:\"1\", col:\"blue\", dob:\"14/05/1982\"},\n    {id:3, name:\"Christine Lobowski\", age:\"42\", col:\"green\", dob:\"22/05/1982\"},\n    {id:4, name:\"Brendon Philips\", age:\"125\", col:\"orange\", dob:\"01/08/1980\"},\n    {id:5, name:\"Margret Marmajuke\", age:\"16\", col:\"yellow\", dob:\"31/01/1999\"}\n  ];\n\n  // Initialize Tabulator on the created div element\n  const table = new Tabulator(\"#example-table\", {\n    height:\"310px\", // Set table height, enables Virtual DOM for large datasets\n    data:tableData, // Assign data to the table\n    layout:\"fitColumns\", // Fit columns to the width of the table\n    columns:[ // Define table columns with titles, fields, and optional formatters/sorters\n      {title:\"Name\", field:\"name\", width:150},\n      {title:\"Age\", field:\"age\", hozAlign:\"left\", formatter:\"progress\"},\n      {title:\"Favorite Color\", field:\"col\"},\n      {title:\"Date Of Birth\", field:\"dob\", sorter:\"date\", hozAlign:\"center\"}\n    ],\n  });\n\n  // Example: Dynamically add a new row to the table\n  const addButton = document.createElement('button');\n  addButton.textContent = 'Add New Row';\n  addButton.id = 'add-row';\n  document.body.appendChild(addButton);\n\n  addButton.addEventListener('click', () => {\n    table.addRow({id: tableData.length + 1, name: `User ${tableData.length + 1}`, age: Math.floor(Math.random() * 50) + 20, col: \"purple\", dob: \"\"});\n  });\n});","lang":"javascript","description":"Demonstrates basic setup of Tabulator with ES Modules, including data, column definitions, and dynamic row addition upon user interaction."},"warnings":[{"fix":"Update ES Module imports from `import Tabulator from 'tabulator-tables';` to `import { Tabulator } from 'tabulator-tables';`.","message":"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.","severity":"breaking","affected_versions":">=6.3.0"},{"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.","message":"Several formatters and editors were renamed or their registration methods changed in v6.3, requiring updates to existing custom table configurations.","severity":"breaking","affected_versions":">=6.3.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Prefer `npm install tabulator-tables --save` or `yarn add tabulator-tables` for package management in modern JavaScript projects.","message":"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.","severity":"deprecated","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For ES Modules (v6.3+), use `import { Tabulator } from 'tabulator-tables';`. For CommonJS, use `const { Tabulator } = require('tabulator-tables');`.","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.","error":"TypeError: Tabulator is not a constructor"},{"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.","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.","error":"ReferenceError: Tabulator is not defined"},{"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()`.","cause":"Using renamed formatters or editors, or an outdated configuration for column definitions after a major version upgrade, especially v6.3.","error":"Column 'X' not found or unexpected table formatting issues after upgrade."}],"ecosystem":"npm"}