abctable v0.1.2

ABCTABLE

The ultimate grid/table component for angularjs application

Features

• Simple and lightweight table based grid working with angularjs
• Multiple filters based on angular-ui-select
• Build-in aggregation functions (sum, average, unique) with easy configuration
• Cell templates support (text, number, date, currency, checkbox, link and custom)
• Inline editing support with templates (text, number, select and custom)
• Using bootstrap style snippets
• Paging, sorting
• Conditional row/cell styling
• Keyboard integration (ENTER/TAB/ESC)

Install

npm

npm install abctable

bower

bower install abctable

Dependencies

• AngularJS
• angular-sanitize
• Angular UI Bootstrap
• Bootstrap
• Angular UI select
• Fontawesome

Using in your web app

Add main js, css and all the dependencies to html

<link href="/bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="/bower_components/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet">
<link href="/bower_components/angular-ui-select/dist/select.css" rel="stylesheet">
<link href="/bower_components/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="abctable.css" rel="stylesheet">


<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/angular-ui-select/dist/select.js"></script>
<script src="abctable.js"></script>

Add angular dependency to your main module

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

Add html tag

<abc-table columns="vm.columns" data="vm.data" options="vm.options"></abc-table>

In controller create options object

vm.options = {
        showFilter: true,
        class: 'table table-striped table-hover',
        pageSize: 50
};

And then create columns definition

vm.columns = [
    {
        type: 'checkbox'
    },
    {
        type: 'index'
    },
    {
        title: '#',
        field: 'ID',
        filter: {
            fromData: false
        }
    },
    {
        title: 'Company',
        field: 'Company',
        style: {
            'width': '250px'
        },
        templateUrl: '/test/templates/company-cell.html'
        },
    {
        title: 'Comment',
        field: 'Comment',
        type: 'text',
        filter: {
            enabled: true,
            type: 'text'
        }
    }];

Finally retrieve data

$http.get('/test/data.json').then(function (response) {
    vm.data = response.data;
})

Development

git clone https://github.com/felixpis/abctable.git
cd abctable
npm install
bower install

Then run gulp task to start server and file change watcher:

gulp

To build files run:

gulp build

Build generates two files in folder dist: abctable.js and abctable.css

Todo

1. Build demo page
2. Add server side support