Active Table Web Component

1.1.8 verified Tue Apr 21 auth: no javascript

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.

Common errors

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

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.

fix

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

error SyntaxError: Cannot use import statement outside a module ↓

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.

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.

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

cause 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', '...');.

Warnings

breaking The `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', '...');`

gotcha When 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.

gotcha 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. ↓

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

gotcha 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. ↓

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

gotcha 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. ↓

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.

Install

npm install active-table

yarn add active-table

pnpm add active-table

Imports

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
wrong
```
const ActiveTableComponent = require('active-table').ActiveTableComponent;
```
correct
```
import { ActiveTableComponent } from 'active-table';
```
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.

Quickstart

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);
});