Angular Fixed Table Header Glitch - javascript

This is a continuation of my previous post found here.
The fixed headers work fine but I'm having a problem on initial load.
When the table first loads it looks like this:
But then once I click on of the column heads to sort it by that value everything snaps into place and ends up looking like this:
Like I said in my previous post, I'm using the anguFixedHeaderTable plugin. The headers stick fine but I'm just getting this glitch. I can provide details on all the resources I use in this project if that helps to debug the problem. I can provide more info but I just don't know what to provide at this point.
Additionally, when I click on the column to sort the list the table flickers in that it expands to full size before coming back to a height of 300px with a scroll bar. If I click it a few more times it sorts without any table flickers. If I click on a new column header to sort by that it again flickers once but a few more clicks of the same header results in a smooth and clean ordering. Any idea what's causing this flicker?
Edit 1:
Based on Code Wizard's advice I took the working code from the demo and put it into the github .js file. Here's what I have now:
function tableDataLoaded() {
// first cell in the tbody exists when data is loaded but doesn't have a width
// until after the table is transformed
return $elem.find("tbody").is(':visible');
/*var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
return firstCell && !firstCell.style.width;*/
}
This actually works perfectly on first load. The only problem is I have two tables that the user can switch between with a click of a button. Those tables are controlled with a simple ng-show expression to detect which view the user selected. So when the table first loads, the look exactly like they should in both views. But then if you keep toggling back and forth the columns start messing up again. Until you click the column to sort it, then it snaps back into place.
Edit 2:
I tried going the css route and I mostly got it working. Only problem is the columns are slightly misaligned. The main issue is that the columns widths aren't dynamic. Here's a plunker to reproduce my issue. As you can see, the first row's first column content spills into the adjacent column. I want the columns to be dynamic and aligned

Since i dont have your code i can only try to help you out by pointing out some issues that might cause this problem.
When HTML engine render out tables it has to loop over all the cells and to calculate the max width of each cell in order to find the max width per table column.
The anguFixedHeaderTable use this code:
function tableDataLoaded() {
// first cell in the tbody exists when data is loaded but doesn't have a width
// until after the table is transformed
var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
return firstCell && !firstCell.style.width;
}
And this function is fired here:
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
if (isTableDataLoaded) {
transformTable();
}
});
If the table is not loaded yet when this code is executed the table will "fix" its width and it will use the default width which the HTML engine set to it.
What i suggest to do in order to fix it is to load the table and only After its loaded (to be sure that the function is called after the table was loaded) is to use java script code which will append the directive to the table of to re-write this module to fix this issue.
Updates after playing with the code and trying to fix the problem.
Note
On the demo site the code is different than the one in GitHub
Demo code:
- http://pointblankdevelopment.com.au/plnks/angularjs-fixed-header-scrollable-table-directive/app.js
GitHub code
- https://github.com/cornflourblue/angu-fixed-header-table/blob/master/angu-fixed-header-table.js
And the difference is this:
# The working code in the demo
$scope.$watch(function () { return $elem.find("tbody").is(':visible') },
# The "buggy" code on git hub
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded,
function(isTableDataLoaded) {
if (isTableDataLoaded) {
transformTable();
}
}
);
Grab the code from the demo and it will work as expected.
Good Luck.

have you try adding width:100%; in table and tr ?
table,tr {
width:100%;
}
Demo here

Your issue is mostly fixed, and I think you just need to apply fixes from CSS to complete it. How about we wrap the first column like this:
table tr th:first-child, table tr td:first-child{
word-wrap: break-word;
white-space: inherit!important;
}
Preview on Plunker
The TDs in your table are already responsive, we just need to modify to make the content is not overflow by applying the wrap in every th, td that you might think it would happen.
The above code I applied it to the first child, but you can customize to entire table.

Try adding this CSS:
.table {
width: 100%;
height: 200px;
}
Please see this modified CodePen: CodePen for fixed Header & Footer

Related

Display groupFooterTemplate as the entire footer row for Kendo Grid

Is there a way to display the groupFooterTemplate value when showing group aggregates to take the entire row? So instead of the content being confined to the single column where you put the groupFooterTemplate property, I'd like for it to take up the entire row so the contents don't wrap if the container column is really small.
Using the Kendo template to add a tr seems to add a completely new, separate row and also another blank one, so that doesn't work. I also tried targeting the affected td to give it a colspan, but since the grid automatically creates blank cells for the other columns, that didn't work either.
I feel like I'm missing something to be able to do this. Anyone have any ideas?
Thanks!
I ended up using a CSS solution for it, so it just overflows and makes it look like it takes the whole row.
.k-group-footer {
td {
overflow: visible;
// div that contains the aggregate content
.footer-totals {
white-space: nowrap;
}
}
}

React.js FixedDataTable - Row heights are not evaluated when table is re-rendered - scrollbar is missing

I have dynamic data in my table. The amount of data in a cell may change. I have implemented a rowHeightGetter method to calculate the height of a row. When I add content to a cell and rerender my table, the content appears and the cell is larger, but if the additional content caused overflow, scrollbars do not show up. Please see the jsfiddle and click on a row. You'll see that you can no longer access the bottom row of the table until you click a second time.
https://jsfiddle.net/3cooper/ed7Ltc6o/1/
It appears that _calculateState() is not getting the actual row heights from the rowHeightGetter methods when it calls
var scrollContentHeight = this._scrollHelper.getContentHeight()
At this point it is getting the height of the rows by checking the rowHeight property on the table. I see in _calculateState() there are other calls that eventually call this._scrollHelper._updateHeightsInViewport() to properly get the height. Should this be done again. Just really started looking into this today - so I could be missing something obvious. Thanks.
Is there a better way to handle this?
Update:
Also, I notice that once a scrollbar appears so that the contents can scroll, if you click a row again, the table with shift down but the scrollbar will not adjust. Then once you start to scroll up the scroll jumps to the correct position and allows you to scroll the entire table correctly.

Adding a row to jquery-datatable using slideDown()?

In my view, I have two divs, one responsible for adding an entry to my database, and one responsible for showing all of my database table rows when the page loads. The div responsible for displaying the contents of my table uses the Datatables jQuery plugin, which makes my life easier as far as displaying this content goes.
Both of these divs work just fine, separately. However, I would like to integrate them together such that when I add an entry using my first div, the database is updated, and this entry is then appended to my Datatable in my second div, without reloading the entire page.
I'm aware that this process alone is easy enough using the Datatables API, simply by using the row.add() and draw() functions, this can be done, and is demonstrated here.
While this is a potential solution, I'm not completely satisfied with it, because the rest of my page utilizes jQuery's slideDown() for neat-looking animations, and I was hoping that I could apply this animation to adding another row to my Datatable. If you look at their example, it simply inserts the row, but it would look better if I could make that row slide down from the table.
Is this something that could be done without spending too much time on it? Or should I just stick with using the Datatables API and give up on trying to animate it? I've already tried using jQuery to append a new row manually, but it looks terrible because I don't think I can reload the plugin to adopt the change into the Datatable.
Could someone please point me in the right direction? Thanks!
I think I've solved It!
DEMO
I've observed When click on #addRow button takes place, It adds a <tr> with class .odd or .even
Depending on the number of that row ie, 1,3,5... are odd 2,4,6... are even.
So I've added CSS to make smooth transitions for height of tr, setting height of td ultimately will affect the height of tr. So here is my CSS:
.odd td{
height:0px;
transition:all ease 1s;
padding:5px;
}
.even td{
height:0px;
transition:all ease 1s;
padding:5px;
}
Now When the click event on #addRow button occurs, We just need to animate the last tr to specific height, to achieve slideDown effect.
That row can be either .odd or .even depending on the counter variable which is incremented each time when row is added.
So that's what I Do in JQuery.
Here is My JQuery:
$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
var tr=t.row;
tr.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw();
var cls= counter%2!=0 ? ".odd" : ".even"; //class of latest row added (odd or even) %2 will do it.
$(cls).last().animate({
"height":"50px"
},1000); // Acheive slideDown();
counter++; //Increment Counter Now.
} );
// Automatically add a first row of data
$('#addRow').click();
});
This will serve you as a starting step.
Also Note that: slideDown() isn't supported on <tr>. Setting height manually using css to 0px also fails. So I request you to use fadeIn() instead of changing height using animate.
Hope it helps. Cheers :)!

Why does jQuery slideToggle() function acts strangely for me in my table?

I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..

Make column width same for 2 tables

I am trying to implement a table structure in which the header remains fixed when i scroll down. I have used 2 tables for this purpose. The first table has the header values and the second table have the corresponding data(length of data in each column might vary as the data is populated dynamically). The problem is that the header width and data column width are not matching exactly.
I have written some code like shown below to dynamically alter the column width
$('#tdCheckAllBody').width($('#tdCheckAllHead').width());
$('#tdLoginBody').width($('#tdLoginHead').width());
$('#tdStatusBody').width($('#tdStatusHead').width());
$('#tdFNameBody').width($('#tdFNameHead').width());
$('#tdLNameBody').width($('#tdLNameHead').width());
$('#tdCompBody').width($('#tdCompHead').width());
But it doesnt seem to work properly. Any help appreciated.
Use this method
$(window).scroll(function(){
$("#id of the table header").offset({top:$("#id of the control which u placed the scrolling").scrollTop()});
});
Created a working fiddle for this:
http://jsfiddle.net/terjeto/dx7H5/
Offcourse if your case is different, you might need to tweak a litle. In my opinion the problematic areas are if the table use dynamic or % width and coping with the "auto" scrollbar which takes up approx 18px, and offcourse if the table needs horizontal scrollbars it complicates things a litle needing the onscroll event.
Could it be that your exmple is not accurate because of lacking reset-css code?
I use this: http://developer.yahoo.com/yui/reset/

Categories