Angular+Bootstrap : Table designing

Question

I'm having trouble with several features I want to implement:

I want a fixed table header so I can scroll down while still be able to see the header as I go through the data.
I want my table to be as large as it can be => no overflow-x
My columns can be from different sizes, yet the header must be aligned.
My < td > have to restrain from a max-height, and add a scrollbar inside the td.

Are these even possible ? Because I tried several inconclusives solutions =(

If I separate the header from the table, it'll mess up the width of the columns header.

.test {
    overflow-x: visible;
    overflow-y: auto;
}

If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.

And these won't work:

EDIT @Merijn DK:

<!-- html -->
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th ng-repeat="column in columns" ng-show="column.show" ng-style="column.style">
                {{ column.label }}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in results">
            <td ng-repeat="column in columns" ng-show="column.show" ng-style="column.style" ng-bind-html="item.data | unsafe">
            </td>
        </tr>
    </tbody>
</table>

//Javascript
.filter('unsafe', function($sce, $rootScope) {
     return function(html) {
         return $sce.trustAsHtml(html);
     };
 });

Hi, thanks for your answer. The question isn't meant to ask people to code for me. I already have the table, the data is formatted perfectly. It's about design (you can look the title). You say it's possible, please, show me. I've search a lot and I'm just tired trying always the same methods that only work for one case. I've given examples I tried. — Romain
– Romain, Commented Feb 17, 2014 at 13:55
thanx your getting closer. can you also post the css which styles your header? — Merijndk
– Merijndk, Commented Feb 17, 2014 at 14:09
im quite sure fixedheadertable.com would do the trick btw. are you sure you tried that right? had you included jquery etc? — Merijndk
– Merijndk, Commented Feb 17, 2014 at 14:13
None at the moment, since it's all part of bootstrap. For the test, I just tried separating the head from the body. Since the column width are differents for each other, it messes up with the alignment from the body. The thing is every solutions I got separatly messes with another feature I want to implement on the table. — Romain
– Romain, Commented Feb 17, 2014 at 14:15
Yes, jQuery is included. Yet the thing is : the data display in the body is done by ng-bind-html + unsafe filter. So fixedheadertable is cool unless you need to display complexe data. — Romain
– Romain, Commented Feb 17, 2014 at 14:17

mainguy · Accepted Answer · 2014-02-18 14:53:14Z

3

Just found a nice plugin that allows floating or fixed theads in various ways. Just look at the awesome demos here

Now you need to implement that in angular. I made a very quick and imperfect directive which could be improved a lot: (allready improved by @spades himself, THX for being awesome!)

plunker.directive('thead', function() {
  return {
    restrict: 'A',
    scope: {
      ngModel: '='
    },
    link: function(scope, elem) {
        window.onscroll = function() {
            elem.floatThead({
                scrollingTop: 45,
            });
            elem.floatThead('reflow');
        }
    }
  };
})

You can tryout the various options by adding them here:

elem.floatThead(additionaloptions);

Just add the directive your html:

  <table thead>
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>111</td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
      </tr> ...

Find a complete plunker (with example for window scrolling) here (of course this could also happen in container, just look at the floatThead homepage)

Note that you should open the preview in a new window (blue x on the top right side) and size its height until a scrollbar shows up.

edited Feb 18, 2014 at 14:53

answered Feb 17, 2014 at 14:39

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Romain Over a year ago

I almost got it right : imgur.com/HOPDPdN&EgPHLxU#1 But when I scroll down : imgur.com/HOPDPdN&EgPHLxU#0

mainguy Over a year ago

Hmm, hard to tell where this is coming from without your final code. Here is another plunker I made that corellates more to your initial question plnkr.co/edit/pbfDxTutsIaaPkVYw8tR?p=preview. (I could not implement safehtml for now). But in general it works. Maybe play around with the options of the jquery plugin. As i said, I did not write it, but found it some days ago on DailyJS and thought: Hey, this may be usefull some day:-) I will leave off work for now and look back at your forecomings tomorrow. Nice evening:-)

mainguy Over a year ago

Looks awesome, why does it not work on your page? I bet you tell me tomorrow. Good Luck!

Romain Over a year ago

Well the safehtml isn't complicated and it works, but if you look closely to my plnkr, I just updated it, you can see that it doesn't scroll =(

Romain Over a year ago

What browser (version also) are you using ?

|

Collectives™ on Stack Overflow

Angular+Bootstrap : Table designing

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related