Features

• Handle large data sets ( Virtual DOM )
• Left and Right Column Pinning
• Column Reordering
• Column Resizing
• Intelligent Column Width Algorithms ( Force fill / Flex-grow )
• Horizontal/Vertical Scrolling
• Virtual Paging WITH linked traditional pager
• Tree Grids
• Row Grouping
• Checkbox and Row Selection ( multi / single / keyboard / touch )
• Light codebase / No external deps
• Client-side AND Server Pagination / Sorting
• Rich header / column templates
• Fixed AND Fluid height
• Decoupled themeing with included Google Material theme
• Decoupled Cell tooltips on overflow
• Decoupled Column Add/Removing Menu
• Expressive Syntax

Using It

Download

• NPM npm install angularjs-list-view
• BOWER bower install angularjs-list-view

or Github download or clone of course!

Run Demos

Ensure you have the latest NPM and JSPM installed globally. If you don't already have JSPM installed run: npm install jspm -g.

• npm install
• jspm install
• gulp watch serve
• Open your browser to http://localhost:9000

docs coming soon, in the meantime, 'View Source' is your friend ;)!

Build

gulp release to build Modules, ES* via Babel and compile.

Include

You've got 5 different options to include this in your build depending on your setup.

• ./release/dataTable.js - A standalone file that was compiled with Babel (UMD)
• ./release/dataTable.min.js - A minified standalone file that was compiled with Babel (UMD)
• ./release/dataTable.cjs.js - A standalone file that was compiled with Babel (CommonJS)
• ./release/dataTable.es6.js - Raw ES6 Version.

All distributions include babel helpers, so they do not have to be included separately.

There is also the CSS too:

• ./release/dataTable.css - The base CSS, pretty much required
• ./release/material.css - Material theme

Usage

Include the module in your angular app module like:

var myApp = angular.module('myApp', [ 'data-table' ]);

module.controller('HomeController', function($scope){
  $scope.options = {
    scrollbarV: false
  };

  $scope.data = [
    { name: 'Austin', gender: 'Male' },
    { name: 'Marjan', gender: 'Male' }
  ];
});

then using expressive markup in your template:

<dtable options="options" rows="data" class="material dt">
  <column name="Name" width="300" flex-grow="2"></column>
  <column name="Gender">
    <strong>{{$row.name}}</strong>: {{$cell}}
  </column>
</dtable>