CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tabulator-tables

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/tabulator-tables@6.3.x
Publish Source
CLI
Badge
tessl/npm-tabulator-tables badge