maptalks table.

The maptalks.table.js plug-in is mainly used to create a table on the map container, which contains two types, respectively, custom tables and dynamic tables, The former manual editing data, the latter data is bound to a layer.

##Feature

1. Add interactive table for maps.
2. Output table screenshot through "map.toDataURL()".
3. Support drag and mouse event listener.

##Installing

<script src="dist/maptalks.table.min.js">

or

npm install maptalks-table

##Demo

Maptalks Table Demo

#Table Class ##API ###new maptalks.Table(options);

var myTalbe = new maptalks.Table({
    'title': 'title',
    'columns': [
        {header:'Name', dataIndex: 'name', type: 'string'},
        {header:'Birth', dataIndex: 'birth', type: 'data'},
        {header:'Age', dataIndex: 'age', type: 'number'},
        {header:'Marry', dataIndex: 'marry', type: 'boolean', trueText:'Yes', falseText: 'No'}
    ],
    'data': [
        {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'},
        {name:'Peter', birth:'1985-5-1', age: 30, marry: 'true'},
        {name:'Mary', birth:'2000-6-1', age: 15, marry: 'false'}
    ],
    'headerSymbol' :{
        'lineColor': '#ffffff',
        'fill': '#4e98dd',
        'textFaceName': 'monospace',
        'textSize': 12,
        'textFill': '#ebf2f9',
        'textWrapWidth': 100
    },
    'symbol': {
        'lineColor': '#ffffff',
        'fill': '#4e98dd',
        'textFaceName': 'monospace',
        'textSize': 12,
        'textFill': '#ebf2f9',
        'textWrapWidth': 100
    },
    'position': {
        'x': 121.489935,
        'y': 31.24432
    },
    'width': 300,
    'height': 300,
    'draggable': true,
    'editable': true,
    'header': true,
    'order': true,
    'startNum' : 1,
    'dynamic': false,
    'layerId' : null
});

Create table. ###toJSON()

myTable.toJSON();

Convert table object to JSON string. ###initByJson(jsonStr)

myTable.initByJson(jsonStr);

Initialize table from JSON string. ###addTo(layer)

myTable.addTo(layer);

Add table to maptalks's layer. ###hide()

myTable.hide;

Hide table. ###show()

myTable.show();

Display table. ###remove()

myTable.remove();

Remove table from layer. ###setCoordinates(coordiante)

myTable.setCoordinates({
    'x': 121.489935,
    'y': 31.24432
});

Setting the position where table display. ###setStartNum(num)

myTable.setStartNum(6);

Setting table start number。 ###animate(style, options, callback)

myTable.animate(style, options, callback);

Setting table animate show or hide effect. ###getMap()

myTable.getMap();

Get this map which table add to. ###getLayer()

myTable.getLayer();

Get this layer which table add to. ###getCenter()

myTable.getCenter();

Get table coordinate. ###setTableStyle(attr, value, isGlobal)

myTable.setTableStyle('markerFill', '#00ff00', true);

Change table style. ###addRow(rowNum, data, below)

myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'}, true);

Add new row. ###updateRow(rowNum, data)

myTable.addRow(1, {name:'Tom', birth:'1990-1-1', age: 25, marry: 'true'});

Update row. ###removeRow(rowNum)

myTable.addRow(1);

Remove row. ###moveRow(rowNum, direction)

myTable.addRow(1, 'down');

Move row up or down.

###addCol(colNum, data, right)

myTable.addCol(1, {header:'Name', dataIndex: 'name', type: 'string'}, true);

Add new column. ###removeCol(colNum)

myTable.removeCol(1);

Remove column. ###moveCol(colnum, direction)

myTable.moveCol(1, 'left');

Move column left or right.

##Events mouseover mouseout mousedown click dblclick contextmenu hide remove dragstart dragend moving dragging symbolchange edittextstart edittextend orderchanged

myTable.on('click', function(){alert('Your click table')});

Monitor table events for event handling.