simple-grid

A simple grid (editable table) for AngularJS.

Features

• Multiple edit modes: all cells editable, per-row editing (each row is read-only until changed to edit mode), or uneditable (just a table)
• Row selection (single or multi-select)
• Keyboard navigation (up/down in a cell move to same cell in next/previous row)
• Paging support
• Dynamically updatable configuration object (columns setup, editing modes, etc. - thanks to Angular!)

Of course, the grid support all input types natively supported by browsers, including all of Angular's special validated input types: text, checkbox, number, url, email and also select and textarea.

Why another grid?

• Pure angular, no other dependencies.
• Works the 'angular way' (model binding, form controllers, etc.) to make it natural for integration in an angular app.
• Easy to customize - use css with angular's form classes (ng-invalid, etc.) - or just copy & change the template html from the source.

The Demo. Click it.

Quick start

Get the files.

Either by cloning this git, or using bower:

bower install angular-simple-grid

Add them to your html.

Template:

<!-- should be below where you declare ng-app in your html -->
<script type="text/ng-template" id="simple-grid.html" src="path/to/simple-grid.html"></script>

Javascript:

<script src="path/to/simple-grid.js"></script>

CSS (optional - built for Bootstrap 3. You'll probably want to augment or replace it):

<link rel="stylesheet" href="path/to/simple-grid.css" />

Add the dependency simpleGrid

...to your angular module:

angular.module('myApp', ['simpleGrid'])

Then, somewhere in your angular app:

View:

...
<div simple-grid="myGridConfig"></div>
...

Controller:

...
$scope.myData = [{ age: 3, name: 'star' }, 
                 { age: 2, name: 'sparky' }];
                 
$scope.myGridConfig = {
    // should return your data (an array)        
    getData: function () { return $scope.myData; }, 
           
    options: { 
        showDelete: true,
        columns: [{ field: 'age', inputType: 'number' }, 
                  { field: 'name' }]
    }
}
...

All set!

Options Reference

Hopefully up-to-date in respect to the source.

$scope.myGridConfig = {
    // should return your data (an array)        
    getData: function () { return $scope.myData; }, 

    options: {
        columns: [
            {
                field: 'species',
                
                title: 'Species', // optional, default is field with first letter capitalized
                inputType: 'number', // optional, default = text. one of: text, number, checkbox, select
                required: false, // optional, default = false
                disabled: false // optional, default = false
                
                // required if inputType is 'select' - feeds the dropdown
                // array of objects with {value: , title: } properties
                // alternative format: array of strings (each will serve as both value and title)
                options: [{ value: 'f', title: 'flamingo'}, 
                          { value: 'd', title: 'dog'}]
            },
            // ...more columns
        ],
        
        // optional - are the cells in the grid actually editable?
        editable: true,

        // optional, default = false. Relevant only if editable = true.
        // use together with showEditButton, see below.
        perRowEditModeEnabled: false, 

        // optional - if set to 'true' and editable is true, the grid is editable (cells are input controls) but they are all disabled
        disabled: false,
        
        // optional - will show a 'delete' button at the end of each row
        showDeleteButton: false,
        
        // optional - will show an 'edit' button at the end of each row (useful when perRowEditModeEnabled)
        showEditButton: false,
        
        // optional - callbacks for actions on rows
        editRequested: function (row) { },
        rowDeleted: function (row) { },
        cellFocused: function (row, column) { },
        rowSelected: function (row) { },
    }
}
...

See the demo here.

See the demo directory in the source for the demo's source,

Performance Tips

Since Angular's performance deteriorates when there are too many bindings, the grid can become quite slow with as few as 20-30 rows, if using drop-downs (or just a slow browser).

To work around this issue you can:

• Use paging (see below)
• Use per-row editing mode (the grid will use a lot less bindings, since most of the table will be non-editable)
• Limit the usage of drop-downs
• Use less columns

Paging

The grid supports paging through the pageNum and pageSize configuration properties. Currently you have to add the prev/next buttons yourself and wire them up to change the pageNum appropriately (see the demo source for an example usage).

Contributing

For bugs or suggestions, use github issues.

Otherwise, just send your pull requests!