cornflourblue / angu-fixed-header-table

AngularJS fixed header scrollable table directive
http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive
MIT License
67 stars 43 forks source link

3 bugs fixed and 3 enhancements (see details) #13

Open Dorian-Fusco opened 9 years ago

Dorian-Fusco commented 9 years ago

I encountered and fixed 3 issues and made 3 enhancements

First issue : I had bootstrap datepickers in my thead. These directive create tables (to display a calendar). Angu-fixed-header-table was "fixing" this calendar's td widths instead of my table using angu-fixed-header-table.

Second issue : the scrollbar problem - I tweaked it more than fixed it : instead of reducing the size of the last td of tbody, I widened the last td of thead and tfoot. It worked better and didn't need any adjustement. The behaviour changes juste a bit, but I do believe it's better this way.

Third issue : the table's header css were refreshed only when the first cell of tbody had no width set. As a result, if I was setting it through another directive, it failed to refresh. To fix it in the most reliable way, I had to add a scope. So now, I MUST set a "table-data" attribute wich is an Array object containing all the datas displayed in my table. As a result, anytime my table-data changes, the tHead's css is recalculated.

First enhancement : before I changed it, setting the tableHeight attribute was just like fixing the table height. Now it's like setting table max-height (since max-height would be ignored otherwise). However, you now have to set the attribute like this :

Second enhancement : you used to change the thead / tbody / tfoot display to '' and back to 'block' every time transformTable was called. The thing is that I wanted to use your directive along with an ngInfiniteScroll directive to scroll as much a I wanted on my table and still have my headers there. Since I loaded more data in my array, my table headers had to adapt to the new column's width, thus applying the transformTable function wich changes the display -even for a split second- and made the scrollbar disappeared. The display-swap had an effect similar to forcing the user to drop the scrollbar, he had to click it again to scroll some more. Instead of changing the display, I create a clone of elem and operate everything that was requiring the display to be back to '' on that clone. Once done, I delete the clone. Although human eye shouldn't be able to see the clone (since I had to append the clone to the table's parent to get it's actual width, but I remove it as soon as I can), I made sure it wouldn't mess the page, even for that split second by putting the clone in a wrapper div with height set to 0 px and overflow hidden + visibility set to invisible (wich is a bit of an overkill I guess) Third enhancement : sometimes, there were display problems with the width of the cells making the table too big for the page. This forced the cells of the thead to be as small as possible for it to fit in the page although the cells from tbody wouldn't have the same size. Fixed it by setting minWidth and maxWidth to the same value than width. The result is that if the table is too big for the page, all the rows are, not only tbody, wich makes more sense even though I guess the user should be the one paying attention to the width of his table in his page / container and manage overflow properly.