Fixed table header directive.
npm install angular-fixed-table-headerThis module will allow you to scroll a table vertically while the header remains visible.
* License
* Demo
* Installation
* Usage
* Change Log
* How It Works
* Restrictions
This software is provided free of charge and without restriction under the MIT License
#### Using Bower
This package is installable through the Bower package manager.
``
bower install angular-fixed-table-header --save
In your index.html file, include the source file.
`html`
Include the fixed.table.header module as a dependency in your application.
`javascript`
angular.module('myApp', ['fixed.table.header']);
#### Using npm and Browserify (or JSPM)
In addition, this package may be installed using npm.
`
npm install angular-fixed-table-header --save
You may use Browserify to inject this module into your application.
`javascript`
angular.module('myApp', [require('angular-fixed-table-header')]);
Wrap the table in a element that will scroll vertically. Use the fix-head A clone of the original #### Version 0.2.1 * Set the max width of the header cell as well. #### Version 0.2.0 * You may now use 1. Clone the original The advantage of this solution is the functionality of HTML tables is preserved. #### Using With The Data Table Module If you are using this directive with my data table module then be aware that the progress indicator will still scroll with the rest of the table. Use the following CSS to correct the borders. table.clone + md-table-container table tbody tr:first-child td { #### Why Not? > Why not reposition the original header instead of making a clone? I'm taking advantage of the browsers ability to calculate the width of the columns. Otherwise the developer would have to manually set the width of each column like many other solutions. > Why not use a pure CSS solution? CSS solutions often defeat the purpose of using a table in the first place. In addition, the solutions I've seen remove functionality from the table and require the developer to manually set the width of each column. attribute on a element to prevent it from scrolling with the rest of the table. element will be moved outside the scroll container. To ensure valid HTML, the cloned element will be wrapped in a copy of the element. The new element will be given the clone class.`html`
Name
City
State
Zip
Email
Phone
{{contact.name}}
{{contact.city}}
{{contact.state}}
{{contact.zip}}
{{contact.emial}}
{{contact.phone}}
Change Log
###### March 15, 2016
* Fix bower.json property.ng-repeat
###### March 4, 2016 within the table header.How It Works
element and empty its contents, then move it outside the scroll container and compile it.
2. Clone the original element and append it to the original element and compile it.
3. Detach the cloned element and append it to the cloned element.
4. For each in the cloned , set its width equal to the width of the original in the original .
5. Set the top margin of the original element equal to negative the height of the original element.
6. When the scroll container is scrolled horizontally, use css transforms to translate the cloned element.theadRestrictions
* Your table must be wrapped in a div that determines the vertical scroll of your table (you may use flex box).
* You may only have one element; however, your thead element may have multiple rows.`css``
table.clone thead tr:last-child th {
border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
}
border-top: none;
}