or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cell-editing.mdclipboard.mdcolumn-management.mddata-management.mddata-sorting.mddata-trees.mdevent-system.mdfiltering-search.mdhistory-undo.mdimport-export.mdindex.mdpagination.mdrange-selection.mdrow-grouping.mdtable-construction.mdvalidation.md
tile.json

tessl/npm-tabulator-tables

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tabulator-tables@6.3.x

To install, run

npx @tessl/cli install tessl/npm-tabulator-tables@6.3.0

index.mddocs/

Tabulator Tables

Tabulator Tables is a comprehensive interactive table generation JavaScript library that enables developers to create feature-rich data tables from HTML tables, JavaScript arrays, or JSON data. It provides extensive functionality including data manipulation, editing, sorting, filtering, pagination, grouping, and real-time updates with a modular architecture that supports custom extensions.

Package Information

  • Package Name: tabulator-tables
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install tabulator-tables
  • CDN: https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js

Core Imports

ES Modules:

import { Tabulator, TabulatorFull } from "tabulator-tables";

CommonJS:

const { Tabulator, TabulatorFull } = require("tabulator-tables");

UMD (browser):

<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">

Component imports:

import { 
  CellComponent, 
  RowComponent, 
  ColumnComponent,
  GroupComponent
} from "tabulator-tables";

Basic Usage

import { Tabulator } from "tabulator-tables";

// Create table from element
const table = new Tabulator("#my-table", {
  data: [
    { id: 1, name: "Alice", age: 25, department: "Engineering" },
    { id: 2, name: "Bob", age: 30, department: "Sales" },
    { id: 3, name: "Charlie", age: 28, department: "Marketing" }
  ],
  columns: [
    { title: "Name", field: "name", sorter: "string" },
    { title: "Age", field: "age", sorter: "number" },
    { title: "Department", field: "department", sorter: "string" }
  ],
  height: 400,
  layout: "fitColumns"
});

// Add event listeners
table.on("rowClick", function(e, row) {
  console.log("Row clicked:", row.getData());
});

// Manipulate data
table.addRow({ id: 4, name: "Diana", age: 32, department: "HR" });
table.setFilter("department", "=", "Engineering");

Architecture

Tabulator Tables is built around several key architectural components:

  • Core Table Class: Main Tabulator class manages table lifecycle, configuration, and module coordination
  • Component System: RowComponent, ColumnComponent, CellComponent provide programmatic access to table elements
  • Modular Architecture: 38+ optional modules provide specific functionality (sorting, filtering, editing, etc.)
  • Dynamic Method Binding: Proxy-based system allows modules to extend component APIs at runtime
  • Event System: Comprehensive event handling for user interactions and data changes
  • Virtual DOM: Efficient rendering system for large datasets with virtual scrolling
  • Data Pipeline: Configurable data processing chain for transformations, validation, and formatting

Capabilities

Table Construction and Configuration

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

class Tabulator {
  constructor(element: string | HTMLElement, options?: TabulatorOptions);
  
  // Static methods
  static extendModule(...args: any[]): void;
  static registerModule(...args: any[]): void;
}

interface TabulatorOptions {
  data?: any[] | string;
  columns?: ColumnDefinition[];
  height?: number | string | false;
  layout?: "fitData" | "fitColumns" | "fitDataFill" | "fitDataStretch" | "fitDataTable";
  index?: string;
  // ... extensive additional options
}

Table Construction

Data Management

Comprehensive data loading, manipulation, and synchronization capabilities for dynamic table content.

// Data loading and replacement
setData(data: any[], params?: any, config?: any): Promise<void>;
replaceData(data: any[], params?: any, config?: any): Promise<void>;
getData(active?: boolean): any[];
clearData(): void;

// Row operations
addRow(data: any, pos?: boolean | number, index?: any): Promise<RowComponent>;
updateRow(index: any, data: any): Promise<RowComponent>;
deleteRow(index: any | any[]): Promise<void>;
getRow(index: any): RowComponent | false;
getRows(active?: boolean): RowComponent[];

Data Management

Column Management

Dynamic column configuration, manipulation, and display control for flexible table layouts.

// Column configuration
setColumns(definition: ColumnDefinition[]): void;
getColumns(structured?: boolean): ColumnComponent[];
getColumn(field: string): ColumnComponent | false;

// Column manipulation
addColumn(definition: ColumnDefinition, before?: boolean, field?: string): Promise<ColumnComponent>;
deleteColumn(field: string): Promise<void>;
showColumn(field: string): void;
hideColumn(field: string): void;
moveColumn(from: string, to: string, after?: boolean): void;

Column Management

Data Filtering and Search

Advanced filtering system with multiple filter types, header filters, and search capabilities.

// Filter management
setFilter(filters: FilterParams | FilterParams[]): void;
addFilter(field: string, type: FilterType, value: any): void;
getFilters(all?: boolean): FilterParams[];
removeFilter(field: string, type: FilterType, value: any): void;
clearFilter(all?: boolean): void;

// Header filters
setHeaderFilterValue(field: string, value: any): void;
getHeaderFilterValue(field: string): any;
clearHeaderFilter(): void;

// Search functionality
searchData(field: string, type: FilterType, value: any): any[];
searchRows(field: string, type: FilterType, value: any): RowComponent[];

Filtering and Search

Data Sorting

Multi-column sorting with custom sort functions and dynamic sort management.

// Sort management
setSort(sorters: SorterParams | SorterParams[]): void;
getSorters(): SorterParams[];
clearSort(): void;

interface SorterParams {
  column: string;
  dir: "asc" | "desc";
  params?: any;
}

Data Sorting

Pagination

Built-in pagination system with configurable page sizes and navigation controls.

// Page navigation
setPage(page: number): Promise<void>;
setPageToRow(row: any): Promise<void>;
setPageSize(size: number): void;
getPageSize(): number;
getPage(): number;
getPageMax(): number;
previousPage(): Promise<boolean>;
nextPage(): Promise<boolean>;

Pagination

Cell and Row Editing

Interactive editing capabilities with validation, custom editors, and edit state management.

// Cell editing (added to CellComponent by Edit module)
edit(): void;
cancelEdit(): void;
setValue(value: any, mutate?: boolean): Promise<void>;
getValue(): any;
getOldValue(): any;
isEdited(): boolean;
clearEdited(): void;

Cell Editing

Event System

Comprehensive event handling for user interactions, data changes, and table lifecycle events.

// Event management
on(event: string, callback: Function): void;
off(event: string, callback?: Function): void;
dispatchEvent(event: string, ...args: any[]): void;

// Common events: tableBuilt, dataLoaded, rowClick, cellClick, 
// rowAdded, rowDeleted, rowUpdated, cellEdited, etc.

Event System

Data Import and Export

Flexible data import/export functionality supporting multiple formats and sources.

// Export functionality (added by modules)
download(type: string, filename: string, options?: any): void;
downloadToTab(type: string, options?: any): void;

// Import functionality  
import(type: string, selector: string, options?: any): Promise<any[]>;

Import and Export

Row Grouping

Advanced hierarchical row grouping with collapsible sections and custom group headers.

setGroupBy(groupBy: string | string[]): void;
getGroups(active?: boolean): GroupComponent[];
getGroupedData(active?: boolean): any[];

Row Grouping

Data Validation

Comprehensive validation system with built-in validators and custom validation functions.

validate(): CellComponent[];
getInvalidCells(): CellComponent[];
clearCellValidation(cell: CellComponent): void;

Data Validation

Range Selection

Spreadsheet-like range selection for rectangular cell areas with keyboard navigation.

getRanges(): RangeComponent[];
getRangesData(): any[][];
addRange(start: CellComponent, end?: CellComponent): RangeComponent;

Range Selection

Data Trees

Hierarchical data tree functionality for nested parent-child relationships.

// Added to RowComponent
treeCollapse(): void;
treeExpand(): void;
getTreeChildren(): RowComponent[];
addTreeChild(data: any): Promise<RowComponent>;

Data Trees

Clipboard Operations

Advanced copy/paste functionality with multiple formats and custom parsers.

copyToClipboard(selector?: string, styled?: boolean, config?: any): Promise<void>;

Clipboard Operations

History and Undo/Redo

Complete operation history tracking with undo/redo functionality.

undo(): boolean;
redo(): boolean;
getHistoryUndoSize(): number;
clearHistory(): void;

History and Undo/Redo

Component Classes

Tabulator provides component classes that represent different parts of the table:

class RowComponent {
  // Core data methods
  getData(transform?: boolean): any;
  getIndex(): any;
  getPosition(): number;
  update(data: any): Promise<void>;
  delete(): Promise<void>;
  
  // Cell access methods
  getCells(): CellComponent[];
  getCell(column: string): CellComponent | false;
  
  // Navigation methods
  getNextRow(): RowComponent | false;
  getPrevRow(): RowComponent | false;
  scrollTo(position?: string, ifVisible?: boolean): Promise<void>;
  
  // Display methods
  getElement(): HTMLElement;
  normalizeHeight(): void;
  reformat(): void;
  
  // Position management
  move(to: any, after?: boolean): void;
  watchPosition(callback: Function): Function;
  
  // Table reference
  getTable(): Tabulator;
  
  // Selection methods (SelectRow module)
  select(): void;
  deselect(): void;
  toggleSelect(): void;
  isSelected(): boolean;
  
  // Tree methods (DataTree module)
  treeCollapse(): void;
  treeExpand(): void;
  treeToggle(): void;
  getTreeParent(): RowComponent | false;
  getTreeChildren(): RowComponent[];
  addTreeChild(data: any, pos?: boolean, index?: any): Promise<RowComponent>;
  isTreeExpanded(): boolean;
  
  // Grouping methods (GroupRows module)
  getGroup(): GroupComponent | false;
  
  // Range selection methods (SelectRange module)
  getRanges(): RangeComponent[];
  
  // Validation methods (Validate module)
  validate(): CellComponent[];
  
  // Frozen rows methods (FrozenRows module)
  freeze(): void;
  unfreeze(): void;
  isFrozen(): boolean;
  
  // Popup methods (Popup module)
  popup(contents: any, position?: string): any;
  
  // Pagination methods (Page module)
  pageTo(): void;
}

class ColumnComponent {
  // Core information methods
  getField(): string;
  getDefinition(): ColumnDefinition;
  getWidth(): number;
  
  // Visibility methods
  isVisible(): boolean;
  show(): void;
  hide(): void;
  toggle(): void;
  
  // Cell access methods
  getCells(): CellComponent[];
  
  // Navigation methods
  getNextColumn(): ColumnComponent | false;
  getPrevColumn(): ColumnComponent | false;
  scrollTo(position?: string, ifVisible?: boolean): Promise<void>;
  
  // Display methods
  getElement(): HTMLElement;
  getTitleDownload(): string;
  
  // Configuration methods
  updateDefinition(updates: object): Promise<void>;
  setWidth(width: number | true): Promise<void>;
  move(to: any, after?: boolean): void;
  delete(): Promise<void>;
  
  // Hierarchy methods (for grouped headers)
  getSubColumns(): ColumnComponent[];
  getParentColumn(): ColumnComponent | false;
  
  // Filter methods (Filter module)
  headerFilterFocus(): void;
  reloadHeaderFilter(): void;
  getHeaderFilterValue(): any;
  setHeaderFilterValue(value: any): void;
  
  // Range selection methods (SelectRange module)
  getRanges(): RangeComponent[];
  
  // Validation methods (Validate module)
  validate(): CellComponent[];
  
  // Popup methods (Popup module)
  popup(contents: any, position?: string): any;
}

class CellComponent {
  // Core value methods
  getValue(): any;
  getOldValue(): any;
  getInitialValue(): any;
  setValue(value: any): Promise<void>;
  
  // Value restoration methods
  restoreOldValue(): void;
  restoreInitialValue(): void;
  
  // Component access methods
  getRow(): RowComponent;
  getColumn(): ColumnComponent;
  getField(): string;
  getData(): any;
  
  // Display methods
  getElement(): HTMLElement;
  checkHeight(): void;
  
  // Table reference
  getTable(): Tabulator;
  getType(): string;
  
  // Edit methods (Edit module)
  edit(ignoreEditable?: boolean): void;
  cancelEdit(): void;
  isEdited(): boolean;
  clearEdited(): void;
  
  // Navigation methods (Edit module)
  navigatePrev(): boolean;
  navigateNext(): boolean;
  navigateLeft(): boolean;
  navigateRight(): boolean;
  navigateUp(): boolean;
  navigateDown(): boolean;
  
  // Range selection methods (SelectRange module)
  getRanges(): RangeComponent[];
  
  // Validation methods (Validate module)
  isValid(): boolean;
  clearValidation(): void;
  validate(): boolean | string | any;
  
  // Popup methods (Popup module)
  popup(contents: any, position?: string): any;
}

class GroupComponent {
  getKey(): any;
  getField(): string;
  getElement(): HTMLElement;
  getRows(): RowComponent[];
  getSubGroups(): GroupComponent[];
  getParentGroup(): GroupComponent | false;
  isVisible(): boolean;
  show(): void;
  hide(): void;
  toggle(): void;
}

class RangeComponent {
  getElement(): HTMLElement;
  getData(): any[][];
  getCells(): CellComponent[];
  getStructuredCells(): { [row: number]: { [col: number]: CellComponent } };
  getRows(): RowComponent[];
  getColumns(): ColumnComponent[];
  getBounds(): RangeBounds;
  getTopEdge(): number;
  getBottomEdge(): number;
  getLeftEdge(): number;
  getRightEdge(): number;
  remove(): void;
}

Types

interface ColumnDefinition {
  title?: string;
  field: string;
  visible?: boolean;
  width?: number | string;
  minWidth?: number;
  maxWidth?: number;
  resizable?: boolean;
  frozen?: boolean;
  responsive?: number;
  tooltip?: boolean | string | Function;
  cssClass?: string;
  rowHandle?: boolean;
  hideInHtml?: boolean;
  sorter?: string | Function | boolean;
  sorterParams?: any;
  formatter?: string | Function;
  formatterParams?: any;
  variableHeight?: boolean;
  editable?: boolean | Function;
  editor?: string | Function | boolean;
  editorParams?: any;
  validator?: string | Function | string[] | Function[];
  mutator?: Function;
  accessor?: Function;
  accessorParams?: any;
  maxInitialWidth?: number;
  headerFilter?: string | Function | boolean;
  headerFilterParams?: any;
  headerFilterPlaceholder?: string;
  headerFilterEmptyCheck?: Function;
  headerFilterFunc?: string | Function;
  headerFilterFuncParams?: any;
  headerFilterLiveFilter?: boolean;
  htmlOutput?: boolean;
  print?: boolean;
  download?: boolean;
  titleDownload?: string;
  topCalc?: string | Function;
  topCalcParams?: any;
  topCalcFormatter?: string | Function;
  topCalcFormatterParams?: any;
  bottomCalc?: string | Function;
  bottomCalcParams?: any;
  bottomCalcFormatter?: string | Function;
  bottomCalcFormatterParams?: any;
  columns?: ColumnDefinition[];
  // ... additional column-specific options
}

interface FilterParams {
  field: string;
  type: FilterType;
  value: any;
  params?: any;
}

type FilterType = "=" | "!=" | "like" | "not like" | "<" | "<=" | ">" | ">=" | 
                  "in" | "not in" | "regex" | "starts" | "ends";

interface TabulatorOptions {
  // Data options
  data?: any[] | string;
  ajaxURL?: string;
  ajaxParams?: any;
  ajaxConfig?: any;
  ajaxContentType?: string;
  ajaxRequestFunc?: Function;
  ajaxResponse?: Function;
  
  // Layout options
  height?: number | string | false;
  minHeight?: number | string;
  maxHeight?: number | string;
  layout?: "fitData" | "fitColumns" | "fitDataFill" | "fitDataStretch" | "fitDataTable";
  layoutColumnsOnNewData?: boolean;
  responsiveLayout?: boolean | "hide" | "collapse";
  responsiveLayoutCollapseStartOpen?: boolean;
  responsiveLayoutCollapseUseFormatters?: boolean;
  responsiveLayoutCollapseFormatter?: Function;
  
  // Column options  
  columns?: ColumnDefinition[];
  autoColumns?: boolean;
  autoColumnsDefinitions?: Function | ColumnDefinition;
  
  // Row options
  index?: string;
  addRowPos?: "top" | "bottom";
  selectable?: boolean | number | "highlight";
  selectableRollingSelection?: boolean;
  selectableCheck?: Function;
  movableRows?: boolean;
  movableRowsConnectedTables?: string | string[] | HTMLElement | HTMLElement[];
  movableRowsSender?: boolean | string | Function;
  movableRowsReceiver?: boolean | string | Function;
  resizableRows?: boolean;
  scrollToRowPosition?: "top" | "center" | "bottom" | "nearest";
  scrollToRowIfVisible?: boolean;
  
  // Pagination options
  pagination?: boolean | "local" | "remote";
  paginationMode?: "local" | "remote";
  paginationSize?: number;
  paginationSizeSelector?: boolean | number[];
  paginationElement?: string | HTMLElement;
  paginationDataReceived?: any;
  paginationDataSent?: any;
  paginationAddRow?: "table" | "page";
  paginationButtonCount?: number;
  
  // Sorting options
  initialSort?: SorterParams[];
  sortOrderReverse?: boolean;
  headerSort?: boolean;
  headerSortTristate?: boolean;
  
  // Filtering options  
  initialFilter?: FilterParams[];
  initialHeaderFilter?: FilterParams[];
  headerFilterLiveFilterDelay?: number;
  
  // Appearance options
  cssClass?: string;
  textDirection?: "auto" | "ltr" | "rtl";
  
  // ... many additional configuration options
}