Active Table Web Component

Common errors

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

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

• 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 npm
• yarn add active-table yarn
• pnpm add active-table pnpm

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