Angular UI directive for Handsontable

Enables creation of data grid applications in AngularJS.

Demo

The current version should be deployed here: http://ng-datagrid.handsontable.com/split-screen.html

You can also clone this repo and run split-screen.html in your browser

Usage

Include the library files (see dist/ directory):

<script src="lib/jquery.min.js"></script>
<script src="lib/angular.min.js"></script>
<script src="dist/angular-ui-handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="dist/angular-ui-handsontable.full.css">

Template:

<div minSpareRows="1" datarows="item in items">
  <datacolumn value="item.id" title="'ID'"></datacolumn>
  <datacolumn type="grayedOut" value="item.name.first" title="'First Name'" readOnly></datacolumn>
  <datacolumn type="grayedOut" value="item.name.last" title="'Last Name'" readOnly></datacolumn>
  <datacolumn value="item.address" title="'Address'"></datacolumn>
  <datacolumn value="item.Product.Description" title="'Favorite food'" type="'autocomplete'" live strict>
    <optionlist datarows="option in item.Product.Options"
                clickrow="item.Product.Description = option.Description">
      <img src="{{option.Image}}" style="width: 16px; height: 16px; border-width: 0">
      {{option.Description}}
    </optionlist>
  </datacolumn>
  <datacolumn type="'checkbox'" value="item.isActive" title="'Is active'" checkedTemplate="'Yes'"
              uncheckedTemplate="'No'"></datacolumn>
</div>

Controller:

$scope.items = [
  {
    id: 1,
    name: {
      first: "Marcin",
      last: "Warpechowski"
    },
    address: "Marienplatz 11, Munich",
    isActive: "Yes",
    Product: {
      Description: "Big Mac",
	    Options: [
	      {Description: "Big Mac"},
	      {Description: "Big Mac & Co"}
	    ]
	  }
	}
  //more items go here
];

Please note that in the above example, the item.Product.Description column has autocomplete options returned by a function defined in the controller.

Whereas item.isActive column has autocomplete options defined directly in the parental scope.

Directives and attributes specification

All Handsontable attributes listed here should be supported (namely: width, height, rowHeaders, colHeaders, colWidths, columns, cells, dataSchema, contextMenu, onSelection, onSelectionByProp, onBeforeChange, onChange, onCopyLimit, startRows, startCols, minRows, minCols, maxRows, maxCols, minSpareRows, minSpareCols, multiSelect, fillHandle, undo, outsideClickDeselects, enterBeginsEditing, enterMoves, tabMoves, autoWrapRow, autoWrapCol, copyRowsLimit, copyColsLimit, currentRowClassName, currentColClassName, asyncRendering, stretchH, columnSorting)

Directive	Attribute	Description
<div ui-handsontable>		Defines the grid container. Can also be declared as element <ui-handsontable>
<div ui-handsontable>	datarows	Data provider for the grid. Usage like item in items (similar to ngRepeat). Creates new scope for each row
<div ui-handsontable>	settings	jquery-handsontable settings. For list of options, see: warpech/jquery-handsontable
<div ui-handsontable>	selectedIndex	Allows to bind a scope variable to get/set selected row index
<datacolumn>		Defines a column in the grid
<datacolumn>	type	Column type. Possible values: text, checkbox, autocomplete (default: text)
<datacolumn>	value	Row property that will be used as data source for each cell
<datacolumn>	title	Column title
<datacolumn>	readOnly	If set, column will be read-only
<datacolumn>	saveOnBlur	(Autocomplete columns only) If set, value will be updated after autocomplete is blured. This is in contrast to default behavior, where value is updated after each keystroke
<datacolumn>	strict	(Autocomplete columns only) If set, value can only be selected from autocomplete options. If not set, also custom value is allowed if entered to the text box
<datacolumn>	checkedTemplate	(Checkbox columns only) Expression that will be used as the value for checked checkbox cell (default: boolean true)
<datacolumn>	uncheckedTemplate	(Checkbox columns only) Expression that will be used as the value for unchecked checkbox cell (default: boolean false)

Further development

This is not considered production ready. When the work is finished, contents of this repo will be submitted into https://github.com/warpech/angular-ui/