Table Editor

!npm

Web table editor

$3

```
import TableEditor from 'web-table-editor';

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

$3


``
{start row index}, {end row index}
{start column index}, {end column index}
``
!row index and column index

$3

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

$3

* 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>, colWidth: Array }
* setEditable(editable: boolean)
* addEventListener(name: string, handler: Function)
* removeEventListener(name: string, handler: Function)
* destroy()




$3

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

$3

``
type TdRange = [number, number];

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

type TrData = Array

type TableData = Array

type TableCells = Array;

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

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

$3

* Select cells by drag