daniel-nagy / fixed-table-header Goto Github PK
View Code? Open in Web Editor NEWFixed table header directive.
License: MIT License
Fixed table header directive.
License: MIT License
when I set height : 100% in div , my whole page scrolls not only tbody.
It should be just table with scrolling table body, filling the page left over.
<div> <md-content> <md-table-container class="fixed-header-table-container"> <div style="overflow: auto;height: 100%"> <table md-table md-row-select md-progress="promise" ng-class="'data-table'"> <thead fix-head md-head md-order="standardTable.query.order" class="fixed-table-header"> ..... .... </thead> <tbody> ..... </tbody> <table> </div> </md-table-container> </md-content> </div>
Tried to use with table headers that are generated dynamically by ng-repeat
<thead fix-head md-head md-order="vm.order" md-on-reorder="vm.reorder">
<tr md-row>
<th ng-repeat="header in vm.tHeaders" md-column md-numeric="header.numeric"
ng-attr-flex="{{header.flex ? header.flex : ''}}"
ng-attr-md-order-by="{{header.order === false ? '' : header.field}}"
ng-attr-md-desc="{{header.desc}}" ng-hide="vm.showHideColumns && !header.visible">
<span translate>{{header.text}}</span>
</th>
</tr>
</thead>
On compile of header.clone
, it is giving error Controller 'mdTable', required by directive 'mdRow', can't be found!
Maybe cause header.clone, contain only thead without table tag and directive md-table. So tried to compile appended version table.clone.append(header.clone)[0]
, compilation was successfull, but instead of populated th tags i see comment <--ngRepeat in header in vm.tHeaders-->
Hello,
Thank you for this fantastic fixed header.
I've discovered a problem ๐
The header deseappear if the table is contained inside a tab .
The tabs are from angular-ui (, etc ...)
Maybe somebody has a workaround ?
Thank you a lot
I found out that 'getWitht' is CPU consuming if there is a lot of $digest.
So instead of using $watch, ResizeObserver in chrome is a better choice.
if (ResizeObserver) {
//window.console.log("ResizeObserver exists", ResizeObserver);
new ResizeObserver((outputsize) => {
getWidth();
setWidth();
}).observe(cell[0]);
} else {
//window.console.log("ResizeObserver does not exists", ResizeObserver);
var listener = scope.$watch(getWidth, setWidth);
}
Also, "scope.$watch(cells, updateCells);" is not need, I think, if the number of cells in header does not change. It can be replace directly by "updateCells();"
Cannot read property '0' of undefined
bower_components/angular-fixed-table-header/src/fixed-table-header.js:86:52
var cell = cells.original[index];
var style = $window.getComputedStyle(cell[0]);
Sometimes when the table is scrolled the header looks glitchy.
We have an issue where we have several uibTabs that use ngHide and ngShow to display content. When the content is hidden and displayed again, the header column widths are set to their default. The only way to fix this is with native javascript events which differs from our use of jQuery events. Is there a way to fix this or do we just keep using native JS?
When using some elements inside a th
we get transclusion errors
a simple
md-button
inside a th
is enough to reproduce this
I have an md-data-table:
<md-table-container>
<table md-table>
<thead md-head md-order="order" md-on-reorder="onReorder">
<tr md-row>
<th md-column ng-repeat="column in columns" md-order-by="{{column.name}}"><span translate="{{column.name}}"></span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in items | orderBy: order">
<td md-cell ng-repeat-start="column in columns">
...
</td>
</tr>
</tbody>
</table>
</md-table-container>
To add a fixed header, I've added fix-head
to the <thead>
element and giving the <md-table-container>
a fixed height and overflow.
White-space shows above the table on initial load and the header doesn't stick when scrolling.
Please help!
Above 16 records table header is not visible in 1366*768 resolution laptop.
In iPad and some other device resolutions it works good.
please take a look and solve this.
<!-- exact table from live demo -->
<md-table-container >
<table id="foodTypeTable" md-table multiple md-progress="promiseGetFT">
<thead fix-head md-head md-order="FTOrderBy" md-on-reorder="getFoodTypes">
<tr md-row>
<th md-column md-order-by="id"><span>ID</span></th>
<th md-column md-numeric md-order-by="foodName"><span>@Html.DisplayNameFor(model => model.foodName) Food Type</span></th>
<th md-column md-numeric>Fat (g)</th>
</tr>
</thead>
<tbody md-body>
<tr md-row md-select="item" md-select-id="foodName" md-auto-select ng-repeat="item in FoodTypes | orderBy : FTOrderBy ">
<td md-cell>{{item.id}}</td>
<td md-cell>{{item.foodName}}</td>
<td md-cell>{{item.foodName}}</td>
</tr>
</tbody>
</table>
</md-table-container>
I'm having a problem where the table header cells do not properly line up with the table columns exclusively in IE11, seems to work fine in Chrome. Has anyone had a similar issue?
I have followed the instructions and it works fine if I don't have any interpolated string on the page lower down after the table where I use the directive. But when I add some interpolated strings, it keeps on throwing the js error. See attached images for more details.
Image 1: Working code + interpolated string without fix-head.
Image 2: Interpolation fails due to js error, the moment I use fix-head on my table.
Wrapping the table in a dive with a fixed height and overflow of auto causes the header styling to disappear on scroll in chrome. Removing overflow: auto fixes the styling but disables fixed-head. I haven't noticed this issue in Firefox or Safari.
```html
<div ng-repeat="tab in tabs" flex="{{ tab.width }}">
<md-table-container >
<div style="overflow: auto; max-height: 300px;" ng-table-height>
<table md-table multiple md-progress="tab.promise" >
<thead md-head md-order="tab.query.order" md-on-reorder="logOrder" fiex>
<tr md-row>
<th md-column ng-repeat="obj in tab.source|filter:{if_visible:true}" md-order-by="{{ obj.row_name }}" md-tabindex="$parent.$index">
<span>{{ obj.show_name }}</span>
</th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="dessert in tab.desserts.data">
<td md-cell ng-repeat="val in dessert track by $index" ng-class="{'headcol':$first}">
{{ val }}
<md-tooltip>
{{ dessert[0] }}
</md-tooltip>
</td>
</tr>
</tbody>
</table>
</div>
</md-table-container >
</div>
```
angular.js:13708 Error: [$compile:ctreq] Controller 'mdTable', required by directive 'mdRow', can't be found!
http://errors.angularjs.org/1.5.7/$compile/ctreq?p0=mdTable&p1=mdRow
Error: [$compile:ctreq] Controller 'mdTable', required by directive 'mdColumn', can't be found!
http://errors.angularjs.org/1.5.7/$compile/ctreq?p0=mdTable&p1=mdColumn
at angular.js:68
at getControllers (angular.js:9296)
at getControllers (angular.js:9303)
at nodeLinkFn (angular.js:9219)
at compositeLinkFn (angular.js:8510)
at publicLinkFn (angular.js:8390)
at lazyCompilation (angular.js:8728)
at boundTranscludeFn (angular.js:8527)
at controllersBoundTransclude (angular.js:9265)
at ngRepeatAction (angular.js:29607)
angular.js:13708 TypeError: Cannot read property 'parent' of undefined
at Object.enter (angular.js:5446)
at ngRepeatTransclude (angular.js:29613)
at publicLinkFn (angular.js:8389)
at lazyCompilation (angular.js:8728)
at boundTranscludeFn (angular.js:8527)
at controllersBoundTransclude (angular.js:9265)
at ngRepeatAction (angular.js:29607)
at $watchCollectionAction (angular.js:17147)
at Scope.$digest (angular.js:17286)
at Scope.$apply (angular.js:17552)
dammage that this lib isn't continued! this is very interesting lib
I found out that when using pagination in md-table, the header cells width is not always correct.
I switch to page 2 for example, but the header cells do not adapt to the new table layout.
To fix that, you just have to use angulars $timeout
function as a wrapper in your setWidth
function:
var setWidth = function () {
$timeout(function () {
marginTop(height());
clone.css({
minWidth: style.width,
maxWidth: style.width
});
});
};
Obviously $timeout
also has to be listed in the $inject
array and function parameters
Hi, I'm having an issue with (i think) dynamic columns,
Getting this error:
angular.js:13920 TypeError: Cannot read property '0' of undefined
at http://localhost/MyApp/Scripts/fixed-table-header.js:86:52
at Array.forEach (native)
at updateCells (http://localhost/MyApp/Scripts/fixed-table-header.js:77:21)
at Scope.$digest (http://localhost/MyApp/Scripts/angular.js:17524:23) ....
Not sure where to look, or what to fix. Any help?
var cell = cells.original[index];
var style = $window.getComputedStyle(cell[0]); **// **This line fails.****
here is the header
<thead fix-head>
<tr>
<th class="tableLabelHeaderInputs">
<input type="checkbox" ng-click="ToggleAllItems(!listtoggle)" style="vertical-align: middle" />
</th>
<th class="tableLabelHeaderInputs">
Compare
</th>
<th data-ng-repeat="x in ColumnNames" ng-if="x.ShouldDisplayColumn" ng-hide="HiddenColumns[x.ColumnName]" class="tableLabelHeader">
<span ng-click="setOrderBy(x.ColumnName)" class="tableLabelTitle">
{{GetColumnHeader(x.ColumnName)}}<span class="glyphicon sort-icon sortArrow"
ng-show="orderBy==x.ColumnName"
ng-class="{'glyphicon-chevron-up':!PagerHandler.reverse,'glyphicon-chevron-down':PagerHandler.reverse}"></span>
</span>
<span class="fa fa-times topRightRemove grey" ng-click="HideColumn(x.ColumnName)"></span>
</th>
</tr>
<tr ng-show="ToggleQuickFilters">
<th>
</th>
<th>
</th>
<th data-ng-repeat="x in ColumnNames" ng-hide="HiddenColumns[x.ColumnName]">
<input ng-model="Search[x.ColumnName]" class="form-control input-xs" style="width: 100px">
</th>
</tr>
</thead>
in your codepen example, you set
md-table-container { max-height: 300px; }
so that the table would be no larger than 300px and would scroll the internal content, but is there a way to set flex or layout-fill on that table-container so that it will always use up the available space, and then scroll inside? This would stop there from ever being 2 scroll bars.
Right now I end up picking an arbitrary max height to try to get it to fill inside the container and I don't like doing so.
It seems that there is a problem in bower.json main section.
There is no "dist" directory:
"main": [
"dist/fixed-table-header.js"
]
tried to insert the fix-head
directive where the md-head
is and I get this error: [$compile:ctreq] Controller 'mdTable', required by directive 'mdColumn', can't be found!
What am I doing wrong?
Using md-data-table v0.9.14
With Angular 1.6.4 and agular-material 1.1.3 I have a table something like this:
<md-content flex layout="column">
<md-table-container>
<table md-table>
<thead md-head fix-head>
<tr md-row>
<th md-column>Apple</th>
<th md-column>Banana</th>
<th md-column>Cat</th>
<th md-column>Dog</th>
</tr>
</thead>
<tbody md-body>
<tr md-row>
<td md-cell>{{foo.foo}}</td>
<td md-cell>{{foo.bar}}</td>
<td md-cell>{{foo.example}}</td>
<td md-cell>{{foo.test}}</td>
</tr>
</tbody>
</table>
</md-table-container>
</md-content>
I can fill it with fake data and it works, but when I change the row to <tr md-row ng-repeat="foo in $ctrl.getFoos()">
, when the entities are loaded the "fixed" header completely disappears.
Any idea why below error is shown? Thanks
angular.js:12444 TypeError: Cannot read property '0' of undefined
at https://localhost:8443/vertex/open/veit/ang/bower_components/angular-fixed-table-header/src/fixed-table-header.min.js:1:806
at Array.forEach (native)
at Object.l as fn
at n.$digest (https://localhost:8443/vertex/open/veit/ang/bower_components/angular/angular.min.js:130:149)
at n.$apply (https://localhost:8443/vertex/open/veit/ang/bower_components/angular/angular.min.js:133:174)
at Object. (https://localhost:8443/vertex/open/veit/ang/scripts/services.js:14:28)
at j (https://localhost:8443/vertex/open/veit/ang/bower_components/jquery/dist/jquery.min.js:2:26911)
at Object.fireWith as resolveWith
at x (https://localhost:8443/vertex/open/veit/ang/bower_components/jquery/dist/jquery.min.js:4:11065)
at XMLHttpRequest. (https://localhost:8443/vertex/open/veit/ang/bower_components/jquery/dist/jquery.min.js:4:14577)
Using code from demo. Only change is the dataset. Mine has 50 items.
ngRepeat
will not work within the table header. I think this is only when the header has another directive on it with an isolated scope.
This does not work if there is an ng-if
directive on the <table>
element or the <thead>
element. This may be only when a directive in the header requires another directive on the table. For example my data table module.
The following causes the headings to become invisible:
<div ng-if="1">
<div style="overflow: auto; max-height: 300px;">
<table>
<thead fix-head>
<tr><th>Name</th></tr>
</thead>
<tbody>
<tr><td>A</td></tr>
<tr><td>A</td></tr>
</tbody>
</table>
</div>
</div>
Removing the ng-if restores them.
from what I gather (it's said nowhere) this is an angularjs repo.
How would I go about having the same result under angular 5 cli?
My table is in a bootstrap grid:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1>PMT test</h1>
<table class="table">
<thead fix-head>
<tr>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="d in pmtData">
...
</tr>
</tbody>
</table>
</div>
</div>
</div>
And with this directive I get:
As you can see, the thead is rendered above the h1 that precedes the table. And its not even fixed.
Is it possible to give the minimum width for the column ?
when i install this package and applied property fix-head to my thead element of table but its not working for me what can be the issue please help as its very important.
<tbody>
<ng-container *ngFor="let report of reports">
<tr>
<td class="alcenter"><a target="_blank"
href="https://system.bjshomedelivery.com/routes/view/?route={{report.gsit_route_id1}}">{{report.route_name }}</a><br>/
<a target="_blank"
href="/fleet/addvehicle?mode=fleet/addvehicle&action=WldScGRBPT0=&id={{report.van_id_sec}}">{{report.VanRegNo }}</a>
</td>
<td class="alcenter"><a target="_blank"
href="/profile/profile/{{report.MainID}}"> {{report.ID }} {{report.FName }}</a>
</td>
<td class="alcenter"> {{report.supervisor_name }}</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.fuel == 'Yes','fa-times red':report.fuel == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check red':report.Camera == 'Yes'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Clean == 'Yes','fa-times red':report.Clean == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Uniform == 'Yes','fa-times red':report.Uniform == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Uniform_sm == 'Yes','fa-times red':report.Uniform_sm == 'No'}"></i>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check red':report.intercoller == 'Yes'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.unpacking == 'Yes','fa-times red':report.unpacking == 'No'}"></i>
</td>
<td class="alcenter">{{report.emptyboxcount}}</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Trolley == 'Yes','fa-times red':report.Trolley == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Toolkit == 'Yes','fa-times red':report.Toolkit == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Cello_tape == 'Yes','fa-times red':report.Cello_tape == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Screw_driver == 'Yes','fa-times red':report.Screw_driver == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Safety_knife == 'Yes','fa-times red':report.Safety_knife == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Tape_measure == 'Yes','fa-times red':report.Tape_measure == 'No'}"></i>
</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.Pliers == 'Yes','fa-times red':report.Pliers == 'No'}"></i>
</td>
<td class="alcenter">
<button class="btn btn-primary"
(click)="ShowModal(modal_images, report.image_link)"> {{report.imageCount}}</button>
</td>
<td class="alcenter">{{report.issue_type}}</td>
<td class="alcenter">{{report.Issues_note}}</td>
</tr>
<tr>
<td colspan="3">Outbound</td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.ob_fuel == 'Yes','fa-times red':report.ob_fuel == 'No'}"></i>
</td>
<td></td>
<td class="alcenter"><i class="fa"
[ngClass]="{'fa-check green':report.ob_Clean == 'Yes','fa-times red':report.ob_Clean == 'No'}"></i>
</td>
<td colspan="12"></td>
<td class="alcenter">
<button class="btn btn-primary"
(click)="ShowModal(modal_images, report.ob_image_link)"> {{report.ob_imageCount}}</button>
</td>
<td></td>
<td class="alcenter">{{report.ob_note}}</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
this is my package.json file code as its finely installed to my project
"dependencies": {
"angular-fixed-table-header": "^0.2.1",
"angular2-csv": "0.2.5",
in installed this package via npm
Route | Driver | Supervisor | Fueling | CCTV | Clean | Driver Uniform | Sideman Uniform | Intercooler | Expected Unpacking | Empty Box | Trolley Returned | Toolkit Received | Cello Tape | Screw Driver | Safety Knife | Tape Measure | Pliers | Images | Issue Type | Notes |
---|
Is this module not available on bower?
bower install angular-fixed-table-header says package not found.
Any chance this would be updated for fixed row headers (i.e. when scrolling horizontally)? Or any recommendations on this?
After implemented the fixed-table-header on your md-data-table https://github.com/daniel-nagy/md-data-table all the md-progress animations when loading content into the tables are gone. If I remove the fix-head
attribute tag on the thead, then they are back again.
Please review and merge PR #4
I have just installed it and for some reason it doesn't work.
Claiming the directive 'fixed.table.header' cannot be found.
any ideas?
I'm working with md-data-table v0.8 something. is that related to my case?
Thanks a ton.
This seems to work if I have a single <md-content layout="column">
column, but if I have a <md-content layout="row">
containing two <md-content layout="column">
, each containing a table, the fixed table headers don't work --- the fixed header and the table are showed side by side in each column.
(Note that I'm creating two columns with two tables side-by-side to try to simulate a fixed column of row headers; see #27. If that issue is addressed, maybe I wouldn't even need two <md-content layout="column">
anymore.)
When I'd like to use your solution with angular's infinite-scroll, then the "load more" function is called in every millisecond.
The issue is when you clone the table with the thead
tag, it clones the whole table tag, with the infinite-scroll
directive, so that way the copied table will have infinite scroll also, and it will trigger the load event.
I suggest you to try to remove these tags, or a better solution try not to copy the whole table, just the classes and styles from it to a new table.
I did this manually and works like a charm, but without your solution I would be lost.
Thank you!
Great Module. Having problem when I am using it with tabs. On page reload It has fixed header and aligned well with table body. Issue is When I click on another tab and come back clone header is not aligned properly. I have noticed header.original.clientHeight returns 0 in some cases. Here is my code pen
https://codepen.io/sandycarney/pen/jALqbj
I'm trying to use fixed-table-header in conjunction with a couple other modules, but it seems fix-head calculates it's header width well before the other elements kick in. If I click on anything else within the page, fix-head moves into the correct position
Is there anyway to force-refresh the fix-head header calculation at the end of a controller?
Hi,
In LTR case, the header works fine .
Can you help please with RTL?
What should be added in the code?
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.