Could you please add the resizable column function for the table?
Like this: http://quocity.com/colresizable/#download

Please add npm support

Inside the directive there is this section of code:

angular.element(window).on('resize', function(){
    $timeout(function(){
        $scope.$apply();
    });
});

This adds an event listener onto the window object every time the directive scope is created. If you have an application with multiple tables over multiple pages then the event listeners soon start adding up.

Suggest doing the following or similar:

var onResizeCallback = function(){
    $timeout(function(){
        $scope.$apply();
    });
};
angular.element(window).on('resize', onResizeCallback);
$scope.$on('$destroy', function() {
    angular.element(window).off('resize', onResizeCallback);
});

If I have a class e.g. bg-primary on the original THEAD element, this is not propagated onto the div with classes th-inner and box. The foreground colour is inherited from the THEAD (as white) but the background colour does not get inherited and stays white also - hence the headers are invisible.

Fixed first column of table

Could you please add scrollable-table.css in as main files in bower.json . so that it will be included automatically when we do grunt build using this component lib..

hello,

calculation of fixedheader is wrong, when the th is disabled.

br Alex

What is this code licensed under?

Tried to create a checkbox inside the 'th' but failed.
`Facility

In order to fix this issue, please change the following at line number 143

el.find(".box").html();

to

el.find(".box").text();

Only direct properties are supported for sortable headers, we have to create a comparator function for every nested property.

Example: with a collection containing nested objects like:
[{name:"ABC", birth:{date:'2000-01-01", place:"NY"}},
{name:"XYZ", birth:{date:'2010-01-01", place:"Spain"}}]

 <scrollable-table watch="people">
    <table>
        <thead>
            <tr>
                <th  sortable-header col="name">Charterer</th>
                <th  sortable-header col="birth.date">Birth</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="people">
                <td>{{name}}</td>
                <td>{{birth.date}}</td>
            </tr>
         </tbody>
      </table>
 </scrollable-table>

will not work. The code should parse the col attribute for dot.

An height attribute that could be set on the directive that will set the height of the scrollable area.

Hi alalonde,
If scrollable-table has an option to allow show/hide the title attribute for each header would be great!
because sometimes we add something that don't want to display the content of header by title way.
E.g. an icon in header cells or using third part tooltip way to display header content.
Thanks!

check for attribute 'resizable' to enable resizing, otherwise disable

Currently, only sortable columns are resizable. Extract the resizing code into its own directive and add the flag to each table header with $compile

Is there any known CSS solution for dynamic header size without ellipsis. I see the only solution with watcher, any suggestions?

I would suggest adding "-webkit-overflow-scrolling: auto;" to the .scrollArea css class until a solution is found to enable inertial scrolling and still have the headers show up. this would have saved me a couple hours. I would also make that clearer in the readme.rm. thank you for this excellent module!

Tested on: Chrome 40 / IE 11

1. Open demo fiddle
2. Scroll to the bottom of the table
3. Click and hold your mouse button on any header and move your mouse (i.e. try to highlight header's title)

Weird... I know ;) The problem doesn't exist on Firefox though..

you are a life saver :)

For a table with a large number of row (>1000) the table scrolling is very slow which I tracked down to the scroll event handler:
$element.find(".scrollArea").scroll(function (event) { $element.find(headerElementToFakeScroll).css('margin-left', 0 - event.target.scrollLeft); });
It appears this handles horizontal scrolling which I didn't need so I was able to take it out safely. Is there a way to give the option to improve performance for large data sets if horizontal scrolling isn't needed?

hello,
i'm using normal text in my headers in the. but a few columns has none text in the header. they have a glyphicon from bootstrap 3.x in it. so this column should not be sortable -> because of this, i don't give them the attribute . when i do this, the header has no border on left-side because only .box has a border. no sortable-header -> no box -> no border.

hope i could help you.

br alex

The .scroll method is deprecated in jQuery 3. The call to .scroll(handler) on line 168 of angular-scrollable-table.js should be replaced with .on("scroll", handler).

Would be extra convenient if I could install this through bower.

Make it possible to have a fixed footer.

Have ability to read parameter of last sort executed. Looking to save sort information so that it can be reset on table initialization.

When including scrollable-table under tabs which I'm loading dynamically, empty header is coming instead hiding it.

sorry, wrong project! please delete this.

Hi,

is it possibble to provide the containerheight with an Attribute like:

  template: '<div class="scrollableContainer" ng-style="{\'height\': containerHeight }">' +
                '<div class="headerSpacer"></div>' +
                '<div class="scrollArea" ng-transclude></div>' +
              '</div>'

and Usage:

   <div scrollable-table watch="ctrl.resultModel.Entries" container-height='"600px"'>

Or perhaps to get the Height from the sourrounded Container height?

that would be nice and is there a Version avaible which has no sort implementation just the fixed header implementation?

thx SquadWuschel

(VERY Great Directive!!)

I want to be able to use my own scrollbars into the scrollable table. I can't find any way to do this so here is my current code. It works, but the fixed header positioning will go haywire. (I'm using Malihu's Scrollbar)

Reversing the tags will result in the entire table not showing up at all.

<scrollable-table>
    <div m-custom-bar always-show-scrollbar enable-yx mouse-wheel-yx>
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th></th>
                ...
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="abc in list">
                <td></td>
                ...
            </tr>
            </tbody>
        </table>
    </div>
</scrollable-table>

In my scrollable table, I have editable cells with dropdown to select values, using angular-bootstrap typeahead component.
The dropdown is an ul with an absolute position. The parent relative position is the scrollableContainer div which has overflow:hidden css property, so it prevent the ul to overflow outside the scrollable table. I tried to play with the css positioning and overflow with no success. Any idea ?

It looks like 'resizable' directive doesn't work with version of AngularJS greater than 1.2.9.

Best regards,
Sergey

Im not sure if this is precisely an issue or is by design buy either way it would be useful to have an alternative to this behaviour.

The headers wont adapt to their contents on a reasonable way as you can see on the following screencap

Now it could easily adjust as follows on the same space

I wonder if there is any way to enforce that way of adjusting?
Sorry for my bad english it doesn't happen to be my first language...

Thanks

Would mainly involve replacing uses of .find with .querySelectorAll(), keeping in mind these types of corner cases: https://developer.rackspace.com/blog/using-querySelector-on-elements/

Data-width attributes on table headers should not be required. If they are not there, the width should default to the browser-calculated width of the actual table <td> columns. This behavior will probably not be compatible with the 'resizable' functionality.

I have tried to implement hiding functionality for columns and have a problem with aligning header title and the content when the last column is hidden. Please find the fiddle http://jsfiddle.net/0zswnzc1/ which shows the problem.

Thanks.

Hi. Thanks for this directive. Excellent!
I detected abnormal behavior when performing this sequence:
1- resize a column (by mouse)
2- change table width using the spinner control (up or down)
Then all columns will have the same width.
This does not happen if we change the table width directly typing the new width in the input field.
Thanks! :)

First of all, thanks a lot for your component! It works beautifully with IE and Chrome, but I am having the following problem with Firefox:

when the table has more columns than its width, the headers do not scroll together with the columns contents.
Actually, I think the problem is that thedirective adds a negative margin to all the ".th-inner" elements to let the header scroll left, but in Firefox the header flees to the left, regardless of the table content.

I would fix it myself, but I've just started with AngularJS and I only managed to mess things around.

Thank you!

As Array.prototype.sort is not guaranteed to be stable I think the library should guarantee stabilty itself using technique described in this anwser on Array.sort Sorting Stability in Different Browsers question on Stackoverflow.

See the screenshot below. There is just one but some of the column titles should wrap around to a new line and the size of the header should grow. However, as you can see the size of the header is always fixed. I have tried putting in '
' to force line breaks and I have tried increasing the height of the header as shown in the css below but that did not work either.

.scrollableContainer {
  height: 550px;

  .headerSpacer {
    height: 60px;
  }
}

.scrollArea table .th-inner {
  height: 60px;
  line-height: 60px;
}

Designate a sortable-header to be the primary sort for table when initially rendered.

Any ideas?

Hiya. Small bug in the title logic. You have:

        var title = el.parent().attr("title");
        if(el.children().length) {
          title = el.find(".title .ng-scope").html();
        } 
        if(!title) {
          title = el.html();
        }

...but I think the condition on the first if statement should be more like "if (el.find(".title"))" - otherwise the title attribute on the parent th will always be ignored?

Hi,

In the sort portion of sortableHeader, you have:

scope.toggleSort = function (e) {
if (scope.isActive()) {
tableController.toggleSort();
} else {
tableController.setSortExpr(expr);
}
tableController.doSort(scope[attrs.comparatorFn]);
e.preventDefault();
};
...

I can't use attrs.comparatorFn as html automatically renders my comparatorFn to comparatorfn (case-insensitive). Changing the code to use attrs.comparatorfn solves this issue. (Tried to send a PR but didn't have access, so I report this instead.)

Thanks,
Reynard.

When using a complex object inside the watch attribute, changes don't get tracked. Suggest finding a suitable case where the third objectEquality argument should be set for $scope.$watch('rows',....

Please add detailed usage instructions. It's not clear on the HTML changes needed to use scrollable-table. I tried to add the directive to my markup but it didn't do anything.
It will be nice to show the before and after on the example.

Fixed header with more than one row of th's

jQuery is used only once, and can be replaced by jqlite function.

On line 113 replace:

$(window).resize(fixHeaderWidths);

By

angular.element(window).on('resize', fixHeaderWidths);

If you scroll the table horizontally in Chrome the header stays properly aligned with the columns. In Firefox the header moves faster to the left then the column and becomes misaligned.

I'm using the latest version of FF.

Hi,
I have updated my code with bootstrap 3 and the headers are now mixed and cluttered when I scroll down the .
Any help please.
Cordially

Horizontal scrollbar is not present on Safari so no horizontal scrolling can be done.