esvit / ng-table

Simple table with sorting and filtering on AngularJS

Table + AngularJS

Code licensed under New BSD License.

This directive enhances your HTML tables. It support sorting, filtering and pagination. Header row with titles and filters automatic generated.

Installing

NPM

Install the current stable release:

npm install ng-table --save

Or install the latest beta release:

npm install ng-table@next --save

note: when to use next? see this issue-comment

CDN

You can download the distribution files directly from unpkg

Bower: NO LONGER SUPPORTED

Getting started

Please follow the getting started steps here

Examples

• Demo site
• Sample apps:
  • ES5
  • ES2015 + SystemJS
  • ES2015 + Webpack
  • Typescript + Webpack
• Codepen examples (Tip: fork these to create your own examples);
  • ngTable: inmemory list
  • ngTable: server-side list
  • ngTableDynamic: inmemory list
  • ngTableDynamic: server-side list

Using Typescript?

As of v2.0.0 ngTable is written in typescript and so you do NOT have to install external type declarations for this library.

By installing the ng-table package from npm, you will get typescript intellisense for all ng-table exported types.

WARNING:. The type definitions on DefinitelyTyped are depreciated.

Upgrading from an earlier version?

Upgrade from 0.8.3

It's recommended to upgrade in two jumps:

1. Upgrade to version 1.0.0-beta.9, making any changes to your application code neccessary to work with this version
   • EG: bower install ng-table#1.0.0-beta.9 --save
2. Refactor your application to remove any code that depended on depreciated behaviours that where removed in the 1.0.0 release
3. Install 1.0.0 (should now be a drop in replacement for 1.0.0-beta.9)
   • Bower: bower install ng-table#1.0.0 --save
   • NPM: npm i [email protected] --save

Upgrade from version earlier than 0.8.3

It's recommended to upgrade in three jumps:

1. Upgrade to version 0.8.3, making any changes to your application code neccessary to work with this version
   • EG: bower install ng-table#0.8.3 --save
2. Follow the guide above to upgrade from 0.8.3 -> 1.0.0-beta.9 -> 1.0.0

Tips

• Read the notes in github releases. Each release details the breaking changes and migration guidance

Compatibility

For work in IE < 9 need jQuery, just add:

<!--[if lt IE 9]>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<![endif]-->

Building from sources

1. Clone: git clone https://github.com/esvit/ng-table.git
2. Install: npm install
3. Build: npm run build:full

• To locally build and serve docs site: npm run doc && npm run serve:docs-site
• To locally serve the demo: npm run serve:demo

Want to contribute?

See the contributing guidelines.

---

This project is part of Bazalt CMS.

ng-table's Issues

checkbox in header

Is there a way to manually put a checkbox in the header of the table?

[Bug] Data lost in scenario

Steps to reproduce:

• http://esvit.github.io/ng-table/#!/demo11
• Paginate to second page
• Filter by "Moroni"

The app is still on page 2 despite there not being enough results to warrant a second page.

I'm able to fix this in my application with the following code:

if ((params.page * params.count) > params.total) {
    params.page = 1;
}

But I think this should be taken care of by ng-table.

I tried to edit the source to make a PR but was unable to determine where I should make the change. (sorry)

question about demo10

http://esvit.github.io/ng-table/#!/demo10
you have button "Filtering", but table make automated filtering after selecting some name.
so whats the reason of this button ?

Question: Directive scope

Why is the directive set to scope = 'true' and not isolated? Working through some issues and am thinking converting to isolate would be solve them. But, I thought I'd ask before committing the time. Thank you in advance.

Dynamic data-title with ng-repeat

I would like to assign the title dynamically on creation of the html element. It seem the title parser work before the assignment. If i inspect the elements in chrome the title is set but the thead element is missing.

<table ng-table="tableParams" show-filter="true" class="table table-striped">
    <tr ng-repeat="item in items">
        <td data-title="{{key}}" ng-repeat="(key, value) in item">
            {{value}}
        </td>
    </tr>
</table>

isNumber function in ngTableParams factory

I've come across an issue with the filter feature. If I type 001 for the filter criteria, it is kept as a string, which is what I want. Then I click on next page and the filter criteria is converted to a number and becomes 1 instead of 001.

This is because in the ngTableParams factory, you have this bit of code that checks the type of data[key] :

     this[key] = (isNumber(data[key]) ? parseFloat(data[key]) : data[key]);

"001" is successfully converted to a number, but that's not what I want. If I get rid of that, it works fine, but I'm not sure about the consequences this could have.

What is the reason for this code in the first place ?

Conditional columns

Is it current possible or would it be possible to have conditional columns? Currently the rows work but headers do not.

<table ng-table="tableParams">
    <tr ng-repeat="one in many">
        <td ng-if="falsevariable" title="Should not be displayed">Will not be displayed</td>
        <td title="Visible">Normal</td>
    </tr>
</table>

Remove unnecessary dependence on jQuery

I changed two lines in ng-table and now I can use it without jQuery.

I don't have time to make a pull-request yet, but I hope I will find time in the next days.

Basically I change a line el = $(item) to 'el = anguler.element(item)' and replaced element.filter("thead") .remove(); with element.find("thead") .remove();

In the examples jQuery is often used for a loading layer. This is not the angular way of live IMHO:

        .directive('loadingContainer', function () {
            return {
                restrict: 'A',
                scope: false,
                link: function(scope, element, attrs) {
                    var loadingLayer = $('<div class="loading"></div>').appendTo(element);
                    $(element).addClass('loading-container');
                    scope.$watch(attrs.loadingContainer, function(value) {
                        loadingLayer.toggle(value);
                    });
                }
            };
        })

This could be replaced with something like:

        .directive('loadingContainer', function () {
            return {
                restrict: 'A',
                scope: false,
                template: '<div class="loading-container><div class="loading" ng-show="isLoading"></div></div>'
                link: function(scope, element, attrs) {
                    scope.$watch(attrs.loadingContainer, function(value) {
                        scope.isLoading = attrs.loadingContainer === "loading"
                    });
                }
            };
        })

or even simplier. I don't want to include the big old jquery for that if angular can handle that itself :)

Are there any reason why jQuery is really needed?

Nice module anyway!
Greets,
maklemenz

Javascript error

I receive the following error while copy/pasting code from the demos:

I'm using the latest version of ng-table and tested against AngularJS/1.1.5+jQuery/2 and AngularJS/1.0.7+jQuery/1.9.1 receiving the same error.

TypeError: Object [object Object] has no method 'filter'
at http://localhost/components/ng-table/ng-table.js:1:2587
at i (http://localhost/components/angular/angular.min.js:44:6)
at e (http://localhost/components/angular/angular.min.js:39:307)
at http://localhost/components/angular/angular.min.js:38:372
at k (http://localhost/components/angular/angular.min.js:151:156)
at Object.e.$broadcast (http://localhost/components/angular/angular.min.js:90:281)
at http://localhost/components/angular/angular.min.js:82:323
at h (http://localhost/components/angular/angular.min.js:78:33)
at h (http://localhost/components/angular/angular.min.js:78:33)
at http://localhost/components/angular/angular.min.js:78:266

Add tests

Any plans to add unit/integration tests?

Compatibility with AngularJS 1.1.x

I'm using AngularJS 1.1.x and the "{[]}" used in the demos don't work.
I changed to "{{}}" and it worked OK.
But the code wich is in the .js source of the demo site generates "{[]}" for the columns header name, which doesn't work.
I'm using the .js source of the demo site because the .js which I can download in the package (compiled from the .coffee files) doesn't seem to work at all (at least for the http://esvit.github.io/ng-table/#!/demo3 syntax, I can't use the "sortable" attribute with the version in the zip package)...

Scrolling table with fixed headers

Something like this: http://www.imaputz.com/cssStuff/bigFourVersion.html

I've looked at a lot of different discussions about how to accomplish this, either through plug-ins or using CSS, but so far nothing I've found has worked quite how I would like it. My primary problem with the CSS approach is that having to apply the display: block; property breaks the formatting of the table, making it look ugly and unable to resize with the window. Is this a feature you've ever considered adding to ng-table? If not, do you know of the best way I can achieve this?

passing sorting criteria in url is broken

I've noticed that sorting on Age after sorting on Name doesn't work. I think passing multiple sorting parameters in the URL does not work.

Cells with empty title and only whitespace in them get a title with the whitespace

With this markup I end up with the td having a title of three lines of whitespace.

            <td>
                <label>
                    <input type="checkbox" />
                </label>
            </td>

We need to trim the whitespace before assigning the value of title.

Also, this is a bad idea to use the title attribute on td for the headers. First, it's just plain annoying when the title pops up on every table cell, but also this will read the title for the screen reader users. I offer to introduce a special attribute to use as a header text.

Grouping

hi,
this is very clean and nice grid, is there a way to group records like NG-Grid

thanks in advanced.

browser history is not managed

When passing sort order in the url, if the user browses back, the sort order changes in the url but not in tableParams.

Update Performance issues

Hi! I'm using ng-table for adding rows in realtime (coming from a websocket).
As long as the number of rows reach 500~1000 the browser gets unresponsive and hangs up.

It worked with plain JS, simple div and appending text inside.

I'm more inclined to think that AngularJS with it"s DOM monitoring mechanism is at fault.
So before I go the non-AngularJS plain JS way, do you have any tips for either adding rows in a performant way, or modifying ng-table?

Thank you!

Default pager structure wrong for twitter bootstrap

When I use ng-table.js (from the zip which can be download from the website) alone, the pager is generated with :

<div><ul class="pagination"><li ...

But if you check http://twitter.github.io/bootstrap/components.html#pagination you have to code it like that :

<div class="pagination"><ul><li>...

(you have to put the "pagination" onto the div and not the ul)

Title attribute overlap with cell's tooltip

The title attribute is used by the browser to set a tooltip when hovering a cell. Using it to set the table header is adding a functionality to that default behaviour, which I don't think it's desirable, if someone wants to have a tooltip different than the header or no tooltip at all. A simple renaming or prefixing is enough for fixing though.

Demo broken?

Hi, this module seems to be what I was looking for!
The only problem is that the demo is broken and I cannot get it to work.

How to set a header and pagination template globally?

button not working

http://esvit.github.io/ng-table/#!/demo10
button "clear sorting" doesn't work

bug with selected items

step to reproduce:

1. go to the http://esvit.github.io/ng-table/#!/demo10
2. click on top checkbox to select all.
3. select Morony
   4 click on top checkbox to unselect all.
   you have {"1":false,"2":true,"3":true,"4":true,"5":true,"6":true,"7":true,"8":true,"9":true,"10":true}
   instead {"1":false,"2":false,"3":false,"4":false,"5":false,"6":false,"7":false,"8":false,"9":false,"10":false} which expected

`ng-table.map` missing from Bower package?

First, thanks for writing ng-table, I was stoked to find this directive!

I'm using it via Bower, and my bower.json looks like this:

"ng-table": "https://github.com/esvit/ng-table.git"

When developing in Chrome with the Enable source maps option checked, I'm noticing this error in the console:

GET http://localhost:9000/components/ng-table/ng-table.map 404 (Not Found)

It looks like the default Grunt task creates this file, but it's excluded from the repository via .gitignore.

Should the map file actually be included?

Sorting using expressions

Hi,

I'm using some computed properties in my cells, something like {{ model.getRelation().value }}. And I want to know how can I use this value in my sortable attribute.

Thanks.

sorting and filter in the same table

Hi,

got a code like this:

 <table ng-table="tableParams" show-filter="true"   class="table table-bordered table-condensed">

        <tr ng-repeat="user in clients">
          <!-- IMPORTANT: String titles must be in single quotes -->
          <td title="'Code'" filter="{ 'code': 'text' }" sortable="code" style="width:20px;">
            <a href="" ng-href="#/clients/{{user.id}}">{{user.code}}</a>
          </td>

          <td title="'Name of person'" filter="{ 'name': 'text' }" sortable="name">
            <a href="" ng-href="#/clients/{{user.id}}">{{user.name}}</a>
          </td>
          <td title="'Email'"  style="width:200px;">
            {{user.email}}
          </td>
        </tr>
      </table>

js:

function client_list($scope, $filter, ngTableParams, Clients) {

  var clist = Clients.query(function(data) {
    $scope.data = data.data;

    $scope.tableParams = new ngTableParams({
      page: 1,            // show first page
      total: $scope.data.length, // length of data
      count: 20,          // count per page
      sorting: {
        name: 'asc'     // initial sorting
      }
    });

    // watch for changes of parameters
    $scope.$watch('tableParams', function(params) {

      var orderedData = params.filter ?
        $filter('filter')($scope.data, params.filter) :
        $scope.data;

      $scope.clients = orderedData.slice(
        (params.page - 1) * params.count,
        params.page * params.count
      );
    }, true);
  })
}

about code works, but if I change the orderedData part to following, it does not work:

 var orderedData = params.sorting ?
        $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;

how to run those examples?

Hi,

i go to the examples folder, then do a:
python -m SimpleHTTPServer

then in browser, open: http://localhost:8000/demo1.html

it does not load the ngtable.js, any way to run it? Thanks,

Angelo

single quote inside header title is causing code break

I think I may have found a bug, could you look into it ?

Notice the single quote inside the title after the letter 'd'. This is causing the code to break and the headers are no longer showing.

license is not immediately apparent

[EDIT] I eventually found a reference to the license at the bottom of the documentation, but it would be nice if it was more apparent. Consider including the full text of the license in a file named COPYING or LICENSE (or some variation) in the root directory of your repository and distributions. A mention in the README is also a good idea.

removing thead is a bit too much

basically the way it currently works is that the THEAD markup is removed completely and replaced by the template.

In some cases, I would like to keep some of the existing headers, such as a header that contains a checkbox (very useful for selecting all items in the table). So the TH containing the checkbox should be marked with a class like '.static' and the directive would not remove it.

Could this be done as an improvement ?

Add some tests

Where is the source for ng-table/pager.html ?

I see in ng-table.js that there is a "a.put("ng-table/pager.html",'

<ul class="pagination ng-cloak..." but that code is not anywhere else in the sources... ng-table.js is not the source code, is it ? (you code "minifily" ? :))

Master does not work

Hey,

it seems that the current master (67f0830) does not work... can someone confirm this?

Thanks!

Raphael

non minified source code

Where's the non-minified version of the source code ? I couldn't find it in the zip file.

dynamics data-title

Hello guys!

I have a small problem with my ng-table, i need to load the data-title from my default controller:

<table ng-table="tableParams" class="table ng-table-responsive">
    <tr ng-repeat="expert in experts">
        <td data-title="{{messages['expert.gridTitle.lastName']}}">
            {{expert.lastName}}
        </td>
</tr>
</table>

my controller:

function ExpertCtrl($scope, Expert, ngTableParams) {

    $scope.experts = Expert.query();

    $scope.messages = {
                       'expert.gridTitle.lastName' : 'Last Name'
        };
[...]
}

The error is throw on the ng-table.src at ligne : parsedTitle = $parse(el.attr("data-title"))() || el.attr("data-title") || " ";

The google chrome trace : Error: Syntax Error: Token 'messages' is unexpected, expecting [:] at column 3 of the expression [{{messages['expert.gridTitle.lastName']}}] starting at [messages['expert.gridTitle.lastName']}}].
at Error ()

data-title

Can we set in data-title glyphicons or image?

Changing tableParams.total retrigger the $watch

The issue is present in this example: http://esvit.github.io/ng-table/#!/demo6

Basically, the ajax callback change the tableparams.total value, which retrigger $watch. Instead of retrieving the resource once, it does 2 ajax request which isn't really optimal. So far I don't have a very good solution. For now I'm going to retrieve the data and change the total outside of the $watch.

Perhaps that's how it's intended but the example will need some correction in that case.

sorting cyrillic

When I try to sort, I have not correct results. But when I try with numeric or latin data, data is correct. It problem in module or in angular?

Latest commit clobbered fix

The latest commit (6078657) for #53 broke PR #57.

Could you please revert the latest commit. The changes made in #57 resolved #53.

In the current state titles are not parse-able when using a filter in the title.

Bootstrap release 2.3.2

Hi,

I'm using the current release of boostrap (2.3.2), and I'm having problems with the layout of the pagination controls. I see you are using bootstrap 3.0.0 - can you give me an idea of what I need to do to fix it?

Thanks!

Chris

Add a feature to hide the pagination

My use case is that the client don't want pagination, only the sorting feature...
So with the current sources (once again, the .js which is on the demo site) I've used a CSS workaround :

div[ng-include="templates.pagination"] {
display: none;
}

But perhaps you could add some property in the ngTableParams to don't use the pagination ? (more or less like the filter feature)

reduce repetition in custom header templates

So I want to have icons in my header. Since in header.jade column.title is inserted without unsecure binding, the only way I see for this is defining an own header template.

First, it is nice that this is possible at all. However, my header template looks like this in haml:

%script(type="text/ng-template" id="table/header.html")
    %tr
      %th.header(ng-class="{sortable: columns[0].sortable,'sort-asc': params.sorting[columns[0].sortable]=='asc', 'sort-desc': params.sorting[columns[0].sortable]=='desc'}" ng-click='sortBy(columns[0])' ng-show='columns[0].show(this)')
        %i.my-icon1
      %th.header(ng-class="{sortable: columns[1].sortable,'sort-asc': params.sorting[columns[1].sortable]=='asc', 'sort-desc': params.sorting[columns[1].sortable]=='desc'}" ng-click='sortBy(columns[1])' ng-show='columns[1].show(this)')
        %i.my-icon2
      %th.header(ng-class="{sortable: columns[2].sortable,'sort-asc': params.sorting[columns[2].sortable]=='asc', 'sort-desc': params.sorting[columns[2].sortable]=='desc'}" ng-click='sortBy(columns[2])' ng-show='columns[2].show(this)')
        %i.my-icon3
      %th.header(ng-class="{sortable: columns[3].sortable,'sort-asc': params.sorting[columns[3].sortable]=='asc', 'sort-desc': params.sorting[columns[3].sortable]=='desc'}" ng-click='sortBy(columns[3])' ng-show='columns[3].show(this)')
        %i.my-icon4

Now this sucks. Can we move the repeating code in a separate directive, so that if that scenario occurs one only has to do s.th. like

%th(ng-table-header)
  %i.icon-bla

What do you think?

goToPage on init

ng-table params are read from URL, so when I browse to :

http://mydomain?page=5

I initialize the tableParams like this:

$scope.tableParams = new ngTableParams({
page: $location.search().page ? $location.search().page : 1
});

However, the pagination control is not set to the correct page number. I think this is because the method goToPage is only called on click event of the pagination numbers. But in this particular case, it would be great if it could be set to the right page on init.

How can I do that ?

disabling sorting and pagination control based on a flag's value

When I run a search to fetch data from the server, I would like to be able to disable sorting and pagination according to a flag value like 'isLoading'.

Otherwise, while the search query is running on the server, the user is able to paginate or sort the grid, triggering new queries to the server, which is bad.

Is that possible ?

Client side filtering

Zdorov, Vitalii!

You created a very useful directive, and I created one modification today:
added to 'ng-table/header.html' template:

<input type="text" ng-model="params.filter[name]" ng-change="doFilter()" ng-show="filter=='client-text'" class="input-filter"/>

It is for cases when it is needed to execute filtering when I'm typing.
How to use it: filter="{ 'some-column-name': 'client-text' }"

How to make sorting for every columnt?

For example i have a table with 2 columns:

<table ng-table="tableParams" class="table">

        <th>
            First name
        </th>

        <th>
            Second name
        </th>

        <tr ng-repeat="user in users">
            <td data-title="'Name'" sortable="name">
                {{user.name}}
            </td>

            <td data-title="'SecondName" sortable="second_name">
                {{user.secondname}}
            </td>
        </tr>
</table>

How to do sorting for every columns? I want to click at first <th> and sort first column, click at second <th> sort second column.

Thank you.

header with no title

If a TD contains text, that text becomes the header of the column. I do not want any header for that particular column. How do I force blank column title ?

ng-table doesn't work when parent scope is not controller

We are trying to use ng-table in a page where the controller is set on the first element (via $routeProvider routes)

However we have two ng-switch statements wrapping the table, in order to show different views when there is no data (and other alternative displays). And ng-switch introduces a new scope.

Ng-table seems to assume that the tableParams live on scope.$parent - in our case, as each ng-switch creates a new scope, tableParams would be on scope.$parent.$parent.$parent !!

The result in our app is that initial rendering works OK, but pressing pagination buttons does nothing - the ng-click() calls updateParams() which seems to assign a new ngTableParams object to $scope.parent.tableParams - which isn't our controller's tableParams. The original tableParams doesn't change, so no pagination happens.

data-title not used / raw list accessor used instead

Hi,

I got a strange problem where data-title is not being displayed correctly (0.2.0). I am setting the name of the columns via <td data-title="'Date'" , but at the end the header will be "{{click.date}}" - this is the "raw" string to access the data in my "clicks". Code is below. Everything else works just fine...

Any help would be much appreciated :)

Thanks!

Raphael

        <table ng-table="tableParams" class="table table-bordered table-striped" 
                           template-pagination="custom/pager">

                        <tr ng-repeat="click in clicks">
                <td data-title="'Date'" sortable="date">
                    {{click.date}}
                </td>
                <td data-title="'Ad Space'" sortable="adSpace">
                    {{click.adSpace}}
                </td>
                <td data-title="'Referrer Domain'" sortable="referrerDomain">
                    {{click.referrerDomain}}
                </td>
                <td data-title="'Program'" sortable="program">
                    {{click.program}}
                </td>
            </tr>
        </table>

[feature request] tab index on filters

When having a row of text filters a user has to press tab twice to get to the next filter. I'd like to request a tab index is placed in the ng-table/filter/text.html template so the user only has to press tab once to get to the next filter.