Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alalonde/angular-scrollable-table

A fixed header table directive for AngularJS
https://github.com/alalonde/angular-scrollable-table

Last synced: 3 months ago
JSON representation

A fixed header table directive for AngularJS

Awesome Lists containing this project

README

        

angular-scrollable-table
========================

Yet another table directive for AngularJS.

This one features a fixed header that elegantly handles overly-long column header names.

Other features:
* Scroll to row
* Sortable header with custom comparator functions
* Resizable columns

## Installation
```
npm install angular-scrollable-table
```
OR
```
bower install angular-scrollable-table
```

## Usage

```js
angular.module('myApp', ['scrollable-table', ...]);
```

## Example

```html




Facility
...




{{ proj.facility }}
...


```

where the controller contains

```js
$scope.visibleProjects = [{
facility: "Atlanta",
code: "C-RD34",
cost: 540000,
conditionRating: 52,
extent: 100,
planYear: 2014
}, ...];

$scope.$watch('selected', function(fac) {
$scope.$broadcast("rowSelected", fac);
});
})
```

Third-party dependencies:
* jQuery
* Bootstrap 3 CSS (for styling, optional. See the 'bootstrap2' branch also)

Demo here: https://jsfiddle.net/alalonde/BrTzg/

More infomation here: http://blog.boxelderweb.com/2013/12/19/angularjs-fixed-header-scrollable-table/

License: MIT

## FAQ

1. How do I change the height of the table?

See here: https://jsfiddle.net/alalonde/qgc2gp7d/2/