<commit_before># simple-grid


A simple grid (editable table) for AngularJS.

Why another grid?

* Pure angular, no other dependencies.
* Works '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.](http://sinelaw.github.io/simple-grid/demo/index.html) 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):

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


### Then, somewhere in your angular app:

View:

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

    ...
    $scope.myGridConfig = {
        // 'rows' should point to your data
        rows: [{ age: 3, name: 'star' }, 
               { age: 2, name: 'sparky' }], 
               
        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 = {
        rows: [{ age: 3 }, { age: 5 }], // should point to your data
        options: {
            columns: [
                {
                    field: 'age',
                    
                    title: 'Age', // optional, default is field with first letter capitalized
                    inputType: 'number', // optional, default = text
                    required: false, // optional, default = false
                    disabled: false // optional, default = false
                },
                // ...more columns
            ],
            
            // optional - will show a 'delete' button at the end of each row
            showDelete: true, 
            
            // optional - callbacks for actions on rows
            deleted: function (row) { console.log('deleted:', row); },
            focused: function (row, column) { console.log('focused:', row, column); }
        }
    }
    ...

See the `demo` directory in the source for a full demo.

<commit_msg>Updated README - missing info about angular module deps<commit_after># simple-grid


A simple grid (editable table) for AngularJS.

Why another grid?

* Pure angular, no other dependencies.
* Works '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.](http://sinelaw.github.io/simple-grid/demo/index.html) 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):

    <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.myGridConfig = {
        // 'rows' should point to your data
        rows: [{ age: 3, name: 'star' }, 
               { age: 2, name: 'sparky' }], 
               
        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 = {
        rows: [{ age: 3 }, { age: 5 }], // should point to your data
        options: {
            columns: [
                {
                    field: 'age',
                    
                    title: 'Age', // optional, default is field with first letter capitalized
                    inputType: 'number', // optional, default = text
                    required: false, // optional, default = false
                    disabled: false // optional, default = false
                },
                // ...more columns
            ],
            
            // optional - will show a 'delete' button at the end of each row
            showDelete: true, 
            
            // optional - callbacks for actions on rows
            deleted: function (row) { console.log('deleted:', row); },
            focused: function (row, column) { console.log('focused:', row, column); }
        }
    }
    ...

See the `demo` directory in the source for a full demo.


{'fraction_non_alphanumeric': 0.12710566615620214, 'fraction_numerical': 0.0015313935681470138, 'mean_word_length': 1.8091397849462365, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '277513', 'n_tokens_mistral': 1499, 'n_tokens_neox': 1406, 'n_words': 489}