Active Table

Active Table is a customizable web component for editable tables and real-time data visualization. Key capabilities include:

• Row/Column Management: Add, remove, move, and edit rows and columns (including mouse-based dragging).
• Data Types: Built-in support for Text, Number, Currency, Select, Label, Date, and Checkbox columns.
• Data Manipulation: Sorting, pagination, filtering, and programmatic cell updates.
• File Support: Import, export, paste, and drag-and-drop support for csv, xls, xlsx, ods, and txt files.
• Extensibility: API for building custom column types and full UI customization.

When the table has a fixed width or maxWidth (via tableStyle), adding new columns normally shrinks existing columns.

• preserveNarrowColumns: true (Default): If columns reach a minimum width of 33px and cannot be shrunk further, the table width will automatically increase to accommodate new columns.
• preserveNarrowColumns: false: If columns reach the 33px limit, no new columns will be allowed to be inserted.

Note: If tableStyle uses % or vw units, the table will not remove excess columns even if preserveNarrowColumns is false when the window is resized, to prevent data loss.

<ActiveTable
  preserveNarrowColumns={true}
  tableStyle={{ width: '300px' }}
  data={[['1', '2', '1', '2'], ['val', 'val', 'val', 'val']]}
/>

Active Table supports importing and exporting the following file formats:

• csv (supported natively)
• xls
• xlsx
• ods
• txt

Important: If you intend to use any format other than csv (such as xls, xlsx, or ods), you must add the xlsx module to your project.

The project provides several types for applying CSS styles based on element states:

• StatefulCSS: Defines styles for different mouse states: default, hover, and click. Each state accepts a CSSStyle object.
• HoverableStyles: A specialized type for hover effects. It includes a default state (using NoDimensionCSSStyle) and a hoverColors object which only accepts backgroundColor and color properties.
• NoDimensionCSSStyle: A subset of CSSStyle that excludes all dimension-related properties (width, minWidth, maxWidth, height, minHeight, maxHeight).

You can observe events in ActiveTable using two different methods:

1. Property Assignment: Assign a callback function directly to the corresponding property on the table element (e.g., tableElementRef.onCellUpdate = ...).
2. Custom Event Listeners: Use the standard addEventListener method to listen for custom events fired from the element (e.g., tableElementRef.addEventListener('cell-update', ...)).

Warning: When using event information to update a parent state, take care not to trigger an infinite re-render loop of the component.

Once installed, you can render a table by adding the <active-table> web component to your markup. You can pass initial data using the data attribute as a JSON string representing a 2D array (where the first array contains headers).

Note: The exact syntax for passing data may vary depending on your specific framework (React, Vue, Angular, etc.).

<active-table data='[["Planet", "Diameter"], ["Earth", 12756]]'/>

Active Table supports importing and exporting csv, xls, xlsx, ods, and txt files. While csv is supported natively, all other formats require the xlsx module to be available on the global window.XLSX object.

You must provide the xlsx module to the environment using one of the following methods to enable advanced file support.

import * as xlsx from "xlsx";

window.XLSX = xlsx;

When using TypeScript, you must declare the XLSX property on the global Window interface to avoid compilation errors when assigning the module to window.XLSX.

import * as xlsx from 'xlsx';

declare global {
  interface Window {
    XLSX: typeof xlsx;
  }
}

You can include active-table directly in your project using a CDN link without a package manager:

https://unpkg.com/active-table@1.1.8/dist/activeTable.bundle.js

ActiveTable works out of the box with Svelte version 4.2.2 or above.

For older Svelte versions: Properties that use camelCase names (e.g., myProperty) must be passed as stringified attributes in the markup.

If you are using a package manager like npm, you can provide the xlsx module to Active Table by importing it and assigning it to window.XLSX.

// Static import
import * as xlsx from "xlsx";
window.XLSX = xlsx;

// Dynamic import
import("xlsx").then((module) => {
  window.XLSX = module;
});