editableTableWidget http://mindmup.github.io/editable-table

Tiny editable jQuery Bootstrap spreadsheet.

Base

Name Cost Profit Fun
Car 100 200 0
Bike 330 240 1
Plane 430 540 3
Yacht 100 200 0
Segway 330 240 1
TOTAL 1290 1420 5
See the usage documentation at http://mindmup.github.io/editable-table

Usage


require(['jquery', 'px-libs/mindmup-editabletable'], function($) {
  ...
});

Usage

To use editable-table plugin, you need to include the next scripts:


<script src="path/to/js/pixeladmin/directives/angular-editable-table.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['angular-editable-table']);

Alternatively, you can include editable-table plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'angular-editable-table',
    files: [
      'path/to/js/pixeladmin/directives/angular-editable-table.js',
    ],
  },
]);

editable-table directive

You can use editable-table directive on tables. And when the scope is destroyed the directive will be destroyed.

Name Cost Profit Fun
Car 100 200 0
Bike 330 240 1
Plane 430 540 3

Options

editable-table's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.

  • clone-properties
  • editor

<table editable-table class="table"
       clone-properties="['text-align', 'font', 'font-size']">
  ...
</table>

Events

Event handlers can be bound using attributes (see the plugin's documentation):

  • on-change
  • on-validate

<table editable-table class="table"
       on-change="ctrl.change"
       on-validate="ctrl.validate">
  ...
</table>
        

function SomeController() {
  this.change = function(e, newValue) { ... };
  this.validate = function(e, newValue) { ... };
});