active-table

library1.1.8jsnpmunverified

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.

web-framework data serialization

npm install active-table

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · ACTIVE-TABLE

active-table

web-frameworkjavascriptv1.1.8

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

active-table

✓ import 'active-table';

Imports the main module to register the `<active-table>` custom element globally. This is typically all that's needed for basic HTML usage.

ActiveTable

✓ import type { ActiveTable } from 'active-table';

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()`).

ActiveTableComponent

✓ import { ActiveTableComponent } from 'active-table';

✗ const ActiveTableComponent = require('active-table').ActiveTableComponent;

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.

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.

import 'active-table'; // Registers the <active-table> custom element import type { ActiveTable } from 'active-table'; // For TypeScript type safety document.addEventListener('DOMContentLoaded', () => { const tableElement = document.createElement('active-table') as ActiveTable; tableElement.setAttribute('data', JSON.stringify([ ['Product', 'Price', 'Stock'], ['Laptop', 1200, 50], ['Mouse', 25, 200], ['Keyboard', 75, 100], ])); // You can also set properties directly: tableElement.pagination = true; tableElement.enterKeyMoveDown = true; document.body.appendChild(tableElement); // Example of programmatic interaction after the table is rendered setTimeout(() => { const activeTableInstance = document.querySelector('active-table') as ActiveTable | null; if (activeTableInstance) { console.log('Current table data:', activeTableInstance.getData()); // Programmatically add a row activeTableInstance.addRow(['Monitor', 300, 75]); console.log('Data after adding row:', activeTableInstance.getData()); } }, 1000); });

Debug

Known issues

breakingThe `content` property was renamed to `data` to avoid conflicts with existing HTML attributes and resolve TypeScript errors.

fix

Update your code to use the `data` property instead of `content` when initializing or updating table data. Example: `tableElement.setAttribute('data', '...');`

affects: >=1.1.0

gotchaWhen integrating with React, older versions (prior to 1.1.5) could encounter module resolution errors related to ESM (`"type": "module"`) bundling.

fix

Upgrade to `active-table` version 1.1.5 or newer. If using React, consider `active-table-react` for seamless integration.

affects: <1.1.5

gotchaVersions 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.

fix

Upgrade to `active-table` version 1.1.6 or newer to fix the parent resize rendering issue.

affects: <1.1.6

gotchaData 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.

fix

Upgrade to `active-table` version 1.1.4 or newer to ensure all pasted data is correctly registered and exportable.

affects: <1.1.4

gotchaVersion 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.

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.

affects: >=1.0.16

Errors

Common errors & fixes

TypeError: Cannot read properties of null (reading 'offsetWidth')

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.

fix

Upgrade to `active-table` version 1.1.6 or newer. This issue was specifically addressed in that release.

SyntaxError: Cannot use import statement outside a module

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.

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`.

Property 'content' does not exist on type 'ActiveTable'

Attempting to use the `content` property for data initialization or updates in TypeScript after it was renamed.

fix

Replace all instances of `content` with `data`. For example, change `tableElement.content = [...]` to `tableElement.data = [...]` or `tableElement.setAttribute('data', '...');`.

Upgrade

Version history

1.1.8latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

47 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/OvidijusParsiunas/active-table ↗

packagehttps://www.npmjs.com/package/active-table ↗

homepagehttps://active-table.com ↗