DOCSEARCHbyAlgolia
Submit Docs

Active Table

website·Indexed 31 days ago

https://activetable.io/

A framework-agnostic web component designed for an editable data table experience. It features a variety of column types, programmatic updates, and support for importing and exporting files in csv, xls, xlsx, ods, and txt formats. The API includes properties for table styling, pagination, filtering, and custom event handling.

Tokens
11.6K
Snippets
76
Records
98
Agent score
52%

What's inside Active Table

  1. Overview of Active Table web component

    Active Table is a cross-framework web component designed for creating highly customizable editable tables. It provides a comprehensive API to handle various data requirements, including categorical, numerical, and partial augmentation of data, allowing developers to implement complex editable data features quickly across different frameworks.

  2. Overview of Active Table features

    Active Table is a framework-agnostic table component designed for editable data experiences. Key capabilities include:

    • Customizable Columns: Support for various column types with an API to create custom ones including custom sorting, validation, and selection options.
    • Programmatic Updates: Ability to stream data and update cells programmatically without manual user input.
    • Reactive Styling: Preconfigurable styling that reacts to text changes to improve user experience.
    • Responsive Design: Built-in support for responsive layouts and style management.

  3. Programmatically update cells in ActiveTable

    ActiveTable allows developers to stream data and update cells programmatically, enabling the table to reflect real-time data changes without manual user input. This can be combined with reactive on-text change styling to enhance the user experience when values are updated via API or stream.

  4. Customize Active Table column types and behavior

    Active Table provides a variety of built-in column types and an API that allows developers to create custom columns. Custom columns can include specialized logic for sorting, data validation, and selection options.

  5. Programmatically update cells and apply reactive styling

    Active Table supports streaming data and updating cells programmatically to eliminate manual input. It also allows for the preconfiguration of reactive styling that triggers automatically when text changes occur.

  6. Use ActiveTable with Vanilla JavaScript

    ActiveTable can be imported via CDN for Vanilla JS projects. It is recommended to set values via properties; attributes should be used as a fallback approach.

  7. Integrate ActiveTable with Next.js

    For Next.js integrations, use the active-table-react package. Because the component relies on browser APIs, it must be lazy-loaded using Next's dynamic extension to disable server-side rendering for that component.

  8. General ActiveTable event usage guidelines

    ActiveTable events can be observed in two ways: by assigning a callback function to the element's property (e.g., tableElementRef.onRender = ...) or by listening for the corresponding custom DOM event fired from the element.

    Caveat: To avoid performance issues or infinite loops, avoid re-rendering the component when using event information to update the parent state.

  9. Enable file import and export for Excel and ODS formats

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

  10. Configure the xlsx module for Active Table

    To enable support for xls, xlsx, ods, and txt files, you must assign the xlsx module to window.XLSX. Depending on your project setup, use one of the following methods:
    // 1. Standard import via npm
import * as xlsx from "xlsx";
window.XLSX = xlsx;

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

// 3. Dynamic import from CDN
import("https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js").then((module) => {
  window.XLSX = module;
});

// 4. Script tag (HTML)
<script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>

// 5. Programmatic script injection
const script = document.createElement("script");
script.src = "https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js";
document.body.appendChild(script);

  12. Define custom column sorting

    Custom sorting is implemented via the sorting property in a ColumnType. Provide ascendingFunc and descendingFunc which follow the standard JavaScript Array.sort contract: return < 0 if the first element is smaller, 0 if equal, and > 0 if larger.
    <active-table
  customColumnTypes='[
    {
      "name": "Custom type",
      "sorting": {
        "ascendingFunc": "(cellText1, cellText2) => Number(cellText1) - Number(cellText2)",
        "descendingFunc": "(cellText1, cellText2) => Number(cellText2) - Number(cellText1)"
      }
    }]'
></active-table>