tessl/npm-tabulator-tables

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

—

Pending

Overview

Eval results

Files

Column Management

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

Dynamic column configuration, manipulation, and display control for flexible table layouts with comprehensive column definition options.

Capabilities

Column Configuration

Methods for setting and updating column definitions dynamically.

/**
 * Set complete column definition array, replacing existing columns
 * @param definition - Array of column definition objects
 */
setColumns(definition: ColumnDefinition[]): void;

/**
 * Get all column components
 * @param structured - If true, return nested structure for column groups
 * @returns Array of ColumnComponents
 */
getColumns(structured?: boolean): ColumnComponent[];

/**
 * Get specific column component by field name
 * @param field - Column field identifier
 * @returns ColumnComponent or false if not found
 */
getColumn(field: string): ColumnComponent | false;

/**
 * Get current column definitions tree
 * @returns Array of column definition objects including nested structure
 */
getColumnDefinitions(): ColumnDefinition[];

Usage Examples:

// Set initial columns
table.setColumns([
  { title: "Name", field: "name", width: 200 },
  { title: "Age", field: "age", width: 100, sorter: "number" },
  { title: "Email", field: "email", width: 250 }
]);

// Get column references
const nameColumn = table.getColumn("name");
const allColumns = table.getColumns();

// Access nested column groups
const structuredColumns = table.getColumns(true);

Dynamic Column Manipulation

Add, remove, and modify columns after table initialization.

/**
 * Add new column to table
 * @param definition - Column definition object
 * @param before - If true, add before target column; if false, add after
 * @param field - Field name of target column for positioning
 * @returns Promise resolving to new ColumnComponent
 */
addColumn(definition: ColumnDefinition, before?: boolean, field?: string): Promise<ColumnComponent>;

/**
 * Delete column from table
 * @param field - Field name of column to delete
 * @returns Promise resolving when deletion completes
 */
deleteColumn(field: string): Promise<void>;

/**
 * Update existing column definition
 * @param field - Field name of column to update
 * @param definition - New column definition properties
 * @returns Promise resolving when update completes
 */
updateColumnDefinition(field: string, definition: ColumnDefinition): Promise<void>;

Column Visibility Control

Show, hide, and toggle column visibility dynamically.

/**
 * Show hidden column
 * @param field - Field name of column to show
 */
showColumn(field: string): void;

/**
 * Hide visible column
 * @param field - Field name of column to hide
 */
hideColumn(field: string): void;

/**
 * Toggle column visibility state
 * @param field - Field name of column to toggle
 */
toggleColumn(field: string): void;

Usage Examples:

// Add new column dynamically
await table.addColumn({
  title: "Status", 
  field: "status", 
  formatter: "tickCross",
  width: 100
}, true, "email"); // Add before email column

// Update column properties
await table.updateColumnDefinition("age", {
  title: "Age (Years)",
  validator: ["min:0", "max:120"]
});

// Column visibility management
table.hideColumn("email");
table.showColumn("status");
table.toggleColumn("age");

// Delete column
await table.deleteColumn("status");

Column Movement and Positioning

Reorder columns and control their positioning within the table.

/**
 * Move column to new position
 * @param from - Field name of column to move
 * @param to - Field name of target column
 * @param after - If true, move after target; if false, move before
 */
moveColumn(from: string, to: string, after?: boolean): void;

/**
 * Scroll table horizontally to show specific column
 * @param field - Field name of column to scroll to
 * @param position - Position in viewport ("left", "center", "right") 
 * @param ifVisible - Only scroll if column is not currently visible
 * @returns Promise resolving when scroll completes
 */
scrollToColumn(field: string, position?: string, ifVisible?: boolean): Promise<void>;

Column Definition Interface

Core Column Properties

interface ColumnDefinition {
  /** Display title for column header */
  title?: string;
  /** Field name in data object */
  field: string;
  /** Column visibility */
  visible?: boolean;
  /** Column width (number=pixels, string=CSS) */
  width?: number | string;
  /** Minimum column width */
  minWidth?: number;
  /** Maximum column width */
  maxWidth?: number;
  /** Allow column resizing */
  resizable?: boolean;
  /** Freeze column position */
  frozen?: boolean;
  /** Responsive breakpoint for hiding */
  responsive?: number;
  /** CSS class for column */
  cssClass?: string;
}

Data Processing Properties

interface DataProcessingProperties {
  /** Format cell display value */
  formatter?: string | Function;
  /** Parameters for formatter */
  formatterParams?: any;
  /** Process data before storage */
  mutator?: Function;
  /** Access nested or calculated data */
  accessor?: Function;
  /** Parameters for accessor */
  accessorParams?: any;
  /** Allow variable row height for content */
  variableHeight?: boolean;
}

Editing Properties

interface EditingProperties {
  /** Enable cell editing */
  editable?: boolean | Function;
  /** Cell editor type */
  editor?: string | Function | boolean;
  /** Parameters for editor */
  editorParams?: any;
  /** Validation rules */
  validator?: string | Function | Array<string | Function>;
}

Sorting Properties

interface SortingProperties {
  /** Sort function or type */
  sorter?: string | Function | boolean;
  /** Parameters for sorter */
  sorterParams?: any;
  /** Custom sort value accessor */
  sorterAccessor?: Function;
}

Header Filter Properties

interface HeaderFilterProperties {
  /** Header filter type */
  headerFilter?: string | Function | boolean;
  /** Parameters for header filter */
  headerFilterParams?: any;
  /** Placeholder text */
  headerFilterPlaceholder?: string;
  /** Empty value check function */
  headerFilterEmptyCheck?: Function;
  /** Filter comparison function */
  headerFilterFunc?: string | Function;
  /** Parameters for filter function */
  headerFilterFuncParams?: any;
  /** Enable live filtering as user types */
  headerFilterLiveFilter?: boolean;
}

Display and Export Properties

interface DisplayExportProperties {
  /** Show tooltip on hover */
  tooltip?: boolean | string | Function;
  /** Parameters for tooltip */
  tooltipParams?: any;
  /** Include in HTML output */
  htmlOutput?: boolean;
  /** Include in print output */
  print?: boolean;
  /** Include in downloads */
  download?: boolean;
  /** Title for download files */
  titleDownload?: string;
}

Column Calculations

interface ColumnCalculations {
  /** Top calculation function */
  topCalc?: string | Function;
  /** Parameters for top calculation */
  topCalcParams?: any;
  /** Formatter for top calculation */
  topCalcFormatter?: string | Function;
  /** Parameters for top calc formatter */
  topCalcFormatterParams?: any;
  /** Bottom calculation function */
  bottomCalc?: string | Function;
  /** Parameters for bottom calculation */
  bottomCalcParams?: any;
  /** Formatter for bottom calculation */
  bottomCalcFormatter?: string | Function;
  /** Parameters for bottom calc formatter */
  bottomCalcFormatterParams?: any;
}

Column Groups

interface ColumnGroupProperties {
  /** Child columns for grouping */
  columns?: ColumnDefinition[];
  /** Column group header tooltip */
  headerTooltip?: boolean | string | Function;
  /** Header context menu */
  headerMenu?: MenuOption[];
  /** Header click handler */
  headerClick?: Function;
  /** Header double-click handler */
  headerDblClick?: Function;
  /** Header context menu handler */
  headerContext?: Function;
}

Usage Examples:

// Comprehensive column definition
const advancedColumns = [
  {
    title: "User Info",
    columns: [
      {
        title: "Full Name", 
        field: "name",
        width: 200,
        editor: "input",
        validator: "required",
        headerFilter: "input",
        headerFilterPlaceholder: "Search names...",
        sorter: "string"
      },
      {
        title: "Age",
        field: "age", 
        width: 80,
        editor: "number",
        validator: ["required", "min:0", "max:120"],
        formatter: "money",
        formatterParams: { symbol: "", precision: 0 },
        headerFilter: "number",
        sorter: "number"
      }
    ]
  },
  {
    title: "Contact",
    field: "email",
    width: 250,
    editor: "input",
    validator: "email",
    formatter: "link",
    formatterParams: { target: "_blank" },
    headerFilter: "input"
  },
  {
    title: "Status",
    field: "active",
    width: 100,
    formatter: "tickCross",
    editor: "tickCross",
    headerFilter: "tickCross",
    headerFilterParams: { tristate: true },
    hozAlign: "center"
  },
  {
    title: "Actions",
    formatter: "buttonCross",
    formatterParams: {
      text: "Delete",
      action: function(e, cell) {
        cell.getRow().delete();
      }
    },
    width: 100,
    print: false,
    download: false
  }
];

table.setColumns(advancedColumns);

Install with Tessl CLI