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

• Host: GitHub
• URL: https://github.com/alalonde/angular-scrollable-table
• Owner: alalonde
• License: mit
• Created: 2014-01-02T19:25:36.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2019-01-15T11:12:17.000Z (almost 6 years ago)
• Last Synced: 2024-07-08T13:21:28.428Z (4 months ago)
• Language: CSS
• Size: 81.1 KB
• Stars: 67
• Watchers: 10
• Forks: 49
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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/