1.0.3 • Published 4 years ago

web-table-editor v1.0.3

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

Table Editor

npm

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}

row index and column index

Constructor options

NameTypeAttributesDescription
elemHTMLElementTable container element
dataTableData, TableCellsTable data
defaultColWidthnumber<optional>Default column width for cells those do not have width property. The default is 0.
fullWidthboolean<optional>The table size is 100% or not. The default is false
editableboolean<optional>Table is editable or not. The default is true.
resizeableboolean<optional>Table is resizeable or not. The default is false.
borderColorstring<optional>Border color of cell.
cellStyleobject<optional>Style color of cell.
cellClassstring<optional>Class name of cell.
debugboolean<optional>Debug switch. The default is false.
maxUndoTimesnumber<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

NameCallback paramDescription
cellfocusTECellFocusEventCell focused
cellblurTECellBlurEventCell blur
mousemoveTEMouseMoveEventMouse 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
1.0.3

4 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago