tessl/npm-tabulator-tables

Interactive table generation JavaScript library with sorting, filtering, editing, formatting, and extensive customization capabilities

—

Pending

Overview

Eval results

Files

Table Construction

Name: tessl/npm-tabulator-tables
Author: tessl

Core functionality for creating and configuring interactive tables with extensive customization options and lifecycle management.

Capabilities

Tabulator Constructor

Creates a new interactive table instance with comprehensive configuration options.

/**
 * Creates a new Tabulator table instance
 * @param element - DOM element or CSS selector string where table will be created
 * @param options - Configuration object for table behavior and appearance
 * @param modules - Optional specific modules to load (uses all modules if not specified)
 */
constructor(element: string | HTMLElement, options?: TabulatorOptions, modules?: any);

Usage Examples:

// Basic table creation
const table = new Tabulator("#my-table", {
  data: tableData,
  columns: columnDefinitions,
  height: 400
});

// Advanced configuration
const table = new Tabulator("#advanced-table", {
  data: "/api/data",
  columns: [
    { title: "Name", field: "name", editor: "input" },
    { title: "Age", field: "age", editor: "number", validator: "min:0" },
    { title: "Active", field: "active", formatter: "tickCross", editor: "tickCross" }
  ],
  height: 600,
  layout: "fitColumns",
  pagination: true,
  paginationSize: 20,
  movableColumns: true,
  resizableColumns: true,
  selectable: true,
  editTrigger: "click"
});

Static Module Methods

/**
 * Extend existing module functionality
 * @param args - Module extension parameters
 */
static extendModule(...args: any[]): void;

/**
 * Register new custom module
 * @param args - Module registration parameters  
 */
static registerModule(...args: any[]): void;

Table Display Control

Methods for controlling table rendering and display characteristics.

/**
 * Force table redraw without reloading data
 * @param force - Force complete redraw including recalculating column widths
 */
redraw(force?: boolean): void;

/**
 * Block all table redrawing operations
 */
blockRedraw(): void;

/**
 * Restore table redrawing after being blocked
 */
restoreRedraw(): void;

/**
 * Set table height dynamically
 * @param height - New height as number (pixels) or CSS string
 */
setHeight(height: number | string): void;

Table Lifecycle Methods

Control table initialization state and cleanup.

/**
 * Check if table has completed initialization
 * @param func - Function name for debugging (optional)
 * @param msg - Additional debug message (optional)
 * @returns True if table is initialized
 */
initGuard(func?: string, msg?: string): boolean;

/**
 * Completely destroy table instance and clean up DOM
 */
destroy(): void;

Module System Integration

Access and check module availability within table instances.

/**
 * Check if specific module exists and is loaded
 * @param plugin - Module name to check
 * @param required - Whether to log error if module missing
 * @returns True if module exists
 */
modExists(plugin: string, required?: boolean): boolean;

/**
 * Get reference to specific module instance
 * @param key - Module name
 * @returns Module instance or undefined
 */
module(key: string): any;

Configuration Options

Core Display Options

interface CoreDisplayOptions {
  /** Table height - false for auto-height, number for pixels, string for CSS */
  height?: number | string | false;
  /** Minimum table height */
  minHeight?: number | string;
  /** Maximum table height */  
  maxHeight?: number | string;
  /** Layout mode for column sizing */
  layout?: "fitData" | "fitColumns" | "fitDataFill" | "fitDataStretch" | "fitDataTable";
  /** Show/hide table header */
  headerVisible?: boolean;
  /** Custom CSS class for table */
  cssClass?: string;
  /** Text direction for RTL support */
  textDirection?: "auto" | "ltr" | "rtl";
}

Data Configuration Options

interface DataConfigOptions {
  /** Initial data as array or URL string */
  data?: any[] | string;
  /** Column definitions array */
  columns?: ColumnDefinition[];
  /** Auto-generate columns from data */
  autoColumns?: boolean;
  /** Field name to use as row index/key */
  index?: string;
  /** Default position for new rows */
  addRowPos?: "top" | "bottom";
  /** Separator for nested field access */
  nestedFieldSeparator?: string;
}

Rendering Performance Options

interface RenderingOptions {
  /** Vertical rendering mode - virtual for performance */
  renderVertical?: "virtual" | "basic";
  /** Horizontal rendering mode */
  renderHorizontal?: "basic";  
  /** Buffer size for virtual DOM rendering */
  renderVerticalBuffer?: number;
  /** Start rendering at specific row */
  renderStartRow?: number;
}

Usage Examples:

// Performance-optimized large dataset
const largeTable = new Tabulator("#large-data", {
  data: largeDataset, // 10,000+ rows
  height: 400,
  renderVertical: "virtual",
  renderVerticalBuffer: 50,
  pagination: true,
  paginationSize: 100,
  columns: columnDefs
});

// Auto-sizing table with column generation  
const autoTable = new Tabulator("#auto-table", {
  data: dynamicData,
  height: false, // Auto-height
  layout: "fitData", // Size to content
  autoColumns: true, // Generate columns from data
  headerVisible: true
});

// RTL language support
const rtlTable = new Tabulator("#rtl-table", {
  data: arabicData,
  textDirection: "rtl",
  columns: arabicColumns,
  height: 300
});

Install with Tessl CLI