angular-data-table

A feature-rich but lightweight ES6 AngularJS Data Table crafted for large data sets!

Homepage

Angular Core Dependency: ^1.4.4

Module License: MIT

Added by: Sam Deering

GitHub

Repository

swimlane/angular-data-table

Stats

Stars: 494

Watchers: 494

Forks: 98

Author

Swimlane
Swimlane

Module Description

angular-data-table

A data-table for AngularJS that doesn't suck. Its ES6/CSS3/HTML5, fast, light and awesome! Only supports Evergreen Browsers and 1.4.x Angular. See live demos here.

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 angular-data-table
  • JSPM jspm install github:Swimlane/data-table

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
  • 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, ES5 via Babel and compile.

Include

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

  • ./release/data-table.js - A standalone file that was compiled with Babel and EXCLUDES the Babel runtime.
  • ./release/data-table.helpers.js - A standalone file that was compiled with Babel and INCLUDES the Babel runtime.
  • ./release/data-table.helpers.min.js - A standalone file that was compiled with Babel, INCLUDES the Babel runtime and is MINIFIED.
  • ./release/data-table.es6.js - Raw ES6 Version.

There is also the CSS too:

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

If none of the above makes any sense just include ./release/data-table.min.js and include the css files referenced above.

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:

<dt options="options" rows="data" class="material dt">
  <column name="Name" width="300" flex-grow="2"></column>
  <column name="Gender">
    <strong>{{value}}</strong>
  </column>
</dt>

and your off to the races! See live demos here.

Research

Alternatives

Design

Interesting Reads

Module stats last updated: 2017-02-08 15:00:03

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!