edit table structure and content
npm install web-table-editorWeb table editor
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
* 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;
}
```