Table Editor

Web table editor

Usage

import TableEditor from 'web-table-editor';

// create instance
const te = new TableEditor({...});
// event listener
te.addEventListener('load', () => {});
// destroy
te.destroy();

Row Index & Column Index

{start row index}, {end row index}
{start column index}, {end column index}

Constructor options

Name | Type | Attributes | Description --------------------------|-------------------------|-------------|------------- elem | HTMLElement | | Table container element data | TableData, TableCells | | Table data defaultColWidth | number | <optional> | Default column width for cells those do not have width property. The default is 0. fullWidth | boolean | <optional> | The table size is 100% or not. The default is false editable | boolean | <optional> | Table is editable or not. The default is true. resizeable | boolean | <optional> | Table is resizeable or not. The default is false. borderColor | string | <optional> | Border color of cell. cellStyle | object | <optional> | Style color of cell. cellClass | string | <optional> | Class name of cell. debug | boolean | <optional> | Debug switch. The default is false. maxUndoTimes | number | <optional> | Max times of undo. The default is 10.

Methods

• addRow(rowIdx: number, above: boolean): boolean
• delRow(rowIdx: number): boolean
• addColumn(colIdx: number, left: boolean): boolean
• delColumn(colIdx: number): boolean
• mergeCells(rowRange: TdRange, colRange: TdRange): boolean
• splitCell(rowIdx: number, colIdx: number, rowCount: number, colCount: number): boolean
• getCellContent(rowIdx: number, colIdx: number): string
• setCellContent(rowIdx: number, colIdx: number, content: string): boolean
• undo(): boolean
• redo(): boolean
• getTableData(): { rows: Array<Array<object>>, colWidth: Array<number> }
• setEditable(editable: boolean)
• addEventListener(name: string, handler: Function)
• removeEventListener(name: string, handler: Function)
• destroy()

Event Listeners

Name | Callback param | Description -------------|----------------------|------------- cellfocus | TECellFocusEvent | Cell focused cellblur | TECellBlurEvent | Cell blur mousemove | TEMouseMoveEvent | Mouse move

Type Definitions

type TdRange = [number, number];

type TdData = {
    row: TdRange;
    col: TdRange;
    content: string;
    style?: object
    width?: number
}

type TrData = Array<TdData>

type TableData = Array<TrData>

type TableCells = Array<TdData>;

class TECellFocusEvent {
    row: TdRange;
    col: TdRange;
}

class TECellBlurEvent {
    row: TdRange;
    col: TdRange;
}
class TEMouseMoveEvent {
    offsetX: number;
    offsetY: number;
}

Todo

• Select cells by drag