{"id":15501,"library":"active-table","title":"Active Table Web Component","description":"Active Table is a framework-agnostic web component, currently at stable version 1.1.8, designed to provide a highly customizable and editable table experience. Built with Lit Element, it offers a robust feature set including adding, removing, moving, and editing rows/columns, text validation, sorting, pagination, filtering, and various column types (Text, Number, Currency, Select, Label, Date, Checkbox). It also provides an API for building custom column types, and capabilities for importing, exporting, pasting, and drag-and-dropping CSV, XLS, XLSX, ODS, and TXT files. The component supports programmatic cell updates, reactive dimensions, and handles overflow. Releases are frequent, addressing bugs and introducing new features like column/row dragging, indicating active development. Its key differentiator is being a standalone web component, allowing seamless integration into any JavaScript framework or vanilla HTML, and shipping with comprehensive TypeScript types.","status":"active","version":"1.1.8","language":"javascript","source_language":"en","source_url":"https://github.com/OvidijusParsiunas/active-table","tags":["javascript","table","grid","editable","edit","react","vue","angular","solid","typescript"],"install":[{"cmd":"npm install active-table","lang":"bash","label":"npm"},{"cmd":"yarn add active-table","lang":"bash","label":"yarn"},{"cmd":"pnpm add active-table","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Imports the main module to register the `<active-table>` custom element globally. This is typically all that's needed for basic HTML usage.","symbol":"active-table","correct":"import 'active-table';"},{"note":"Imports the TypeScript interface for the `active-table` element, allowing for type-safe programmatic interaction with the component's methods and properties (e.g., `getData()`, `addRow()`).","symbol":"ActiveTable","correct":"import type { ActiveTable } from 'active-table';"},{"note":"While direct HTML usage is common, the underlying Lit Element class can be imported for advanced scenarios like extending the component or for testing purposes. This package is ESM-only for modern JS environments.","wrong":"const ActiveTableComponent = require('active-table').ActiveTableComponent;","symbol":"ActiveTableComponent","correct":"import { ActiveTableComponent } from 'active-table';"}],"quickstart":{"code":"import 'active-table'; // Registers the <active-table> custom element\nimport type { ActiveTable } from 'active-table'; // For TypeScript type safety\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  const tableElement = document.createElement('active-table') as ActiveTable;\n  tableElement.setAttribute('data', JSON.stringify([\n    ['Product', 'Price', 'Stock'],\n    ['Laptop', 1200, 50],\n    ['Mouse', 25, 200],\n    ['Keyboard', 75, 100],\n  ]));\n  // You can also set properties directly:\n  tableElement.pagination = true;\n  tableElement.enterKeyMoveDown = true;\n\n  document.body.appendChild(tableElement);\n\n  // Example of programmatic interaction after the table is rendered\n  setTimeout(() => {\n    const activeTableInstance = document.querySelector('active-table') as ActiveTable | null;\n    if (activeTableInstance) {\n      console.log('Current table data:', activeTableInstance.getData());\n      // Programmatically add a row\n      activeTableInstance.addRow(['Monitor', 300, 75]);\n      console.log('Data after adding row:', activeTableInstance.getData());\n    }\n  }, 1000);\n});","lang":"typescript","description":"Demonstrates how to install, register, instantiate, and programmatically interact with the `active-table` web component in a TypeScript environment, including setting initial data and retrieving updated data."},"warnings":[{"fix":"Update your code to use the `data` property instead of `content` when initializing or updating table data. Example: `tableElement.setAttribute('data', '...');`","message":"The `content` property was renamed to `data` to avoid conflicts with existing HTML attributes and resolve TypeScript errors.","severity":"breaking","affected_versions":">=1.1.0"},{"fix":"Upgrade to `active-table` version 1.1.5 or newer. If using React, consider `active-table-react` for seamless integration.","message":"When integrating with React, older versions (prior to 1.1.5) could encounter module resolution errors related to ESM (`\"type\": \"module\"`) bundling.","severity":"gotcha","affected_versions":"<1.1.5"},{"fix":"Upgrade to `active-table` version 1.1.6 or newer to fix the parent resize rendering issue.","message":"Versions prior to 1.1.6 had a `TypeError: Cannot read properties of null (reading 'offsetWidth')` when resizing the webpage width, indicating a rendering issue with responsive layouts.","severity":"gotcha","affected_versions":"<1.1.6"},{"fix":"Upgrade to `active-table` version 1.1.4 or newer to ensure all pasted data is correctly registered and exportable.","message":"Data pasted into empty cells in versions prior to 1.1.4 might not have been registered correctly, leading to data not being returned by `getData` or exported.","severity":"gotcha","affected_versions":"<1.1.4"},{"fix":"Review Lit Element 3's breaking changes if you have custom web components or specific Lit configurations that interact with `active-table`'s internal structure.","message":"Version 1.0.16 migrated to Lit Element version 3. While often seamless, this could introduce compatibility issues for projects with deep or custom Lit Element integrations.","severity":"gotcha","affected_versions":">=1.0.16"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Upgrade to `active-table` version 1.1.6 or newer. This issue was specifically addressed in that release.","cause":"This error occurs when the component tries to access the `offsetWidth` property of a DOM element that is `null` or hasn't been rendered yet, often during window resizing.","error":"TypeError: Cannot read properties of null (reading 'offsetWidth')"},{"fix":"Upgrade to `active-table` version 1.1.5 or later, as this release fixed bundling issues using Vite. Ensure your project's build setup correctly handles ES modules. For React, consider `active-table-react`.","cause":"This issue, commonly appearing in React environments before v1.1.5, arises when a CommonJS-expecting bundler or runtime attempts to load `active-table` (which uses ES modules) without proper configuration.","error":"SyntaxError: Cannot use import statement outside a module"},{"fix":"Replace all instances of `content` with `data`. For example, change `tableElement.content = [...]` to `tableElement.data = [...]` or `tableElement.setAttribute('data', '...');`.","cause":"Attempting to use the `content` property for data initialization or updates in TypeScript after it was renamed.","error":"Property 'content' does not exist on type 'ActiveTable'"}],"ecosystem":"npm"}