samu/angular-table

Angular directive which allows to declare sortable tables and to add pagination with very little effort

angular-table

Angular directive which allows to declare sortable tables and to add pagination with very little effort.

Available via bower: bower install at-table

Features

• Adds sorting to any column
• Adds pagination
• Implicitly renders cell contents by name convention and allows custom cell content if needed
• Implicitly renders header titles by name convention and allows custom header content if needed

Dependencies

This directive depends on angular only. No jQuery or Bootstrap required! It has been tested on angular 1.2, but it should also work with 1.1 releases.

Usage Examples

See the live demo with usage examples here.

Walkthrough

Let's assume we have an array containing objects representing people. A person object has the following format:

{name: ..., age: ..., birthdate: ...}

The list contains about 100 entries and we would like to represent that data in a nice, sortable html table and eventually make it paginated so we don't have to scroll like a madman. With angular-table in our toolbelt, this task becomes easy. Let's write some markup:

  <table at-table at-list="people">
  <thead></thead>
  <tbody>
    <tr>
      <td at-implicit at-attribute="name"></td>
      <td at-implicit at-attribute="age"></td>
      <td at-implicit at-attribute="birthdate"></td>
    </tr>
  </tbody>
</table>

Result

This renders a simple html table with an automatically generated header, showing every entry in our list. Four attributes have been used that need further explanation:

• at-table indicate that we want to use the angular-table directive to extend our table
• at-list point to the data source in our scope
• at-attribute the attribute in each object the respective columns are dedicated to
• at-implicit implicitly render the content of each object's attribute defined in at-attribute

Our table looks kind of unspectacular by now, so let's use some css, assuming we have twitter bootstrap in our sources:

<table class="table table-striped" ...>...</table>

Result

Now that looks better! Next, let's make the birthdate column sortable. We want to see the youngest people first, therefore sort descending. We're also going to customize the content of the birthdate cell since the raw date format looks ugly:

<td at-attribute="birthdate" at-sortable at-initial-sorting="desc">
  {{item.birthdate.substring(0, 10)}}
</td>

Result

And thats it, our table is sortable by birthdate instantly! We can make the other columns sortable aswell, by using the at-sortable attribute only. Also, note how we removed the at-implicit attribute and rendered our own content by using a custom angular expression.

Our list of people is pretty long though, and we hate scrolling, so breaking up the table into smaller chunks and making it possible to go through it with a pagination would be cool. A task done within seconds: We need to define two additional keywords in our table ...

<table ... at-config="config" at-paginated>...</table>

... and add an additional element to our view ...

<at-pagination at-config="config" at-list="people"></at-pagination>

... and we end up with a sortable, paginated table!

Result

Contributing

Pull Requests

This directive is written in Coffee Script. If you want to contribute, please make sure to work on the coffee sources only. When you're done with your changes, two steps are required:

1. Update the version in the Gruntfile
2. Compile:

grunt coffee
grunt usebanner

Running the tests

The code for this directive is well covered with tests, which can be run with PhantomJS and Karma. Run npm install to install the required packages. Then, run karma start to run the tests. Make sure all the tests pass before you send a pull request.

angular-table's Issues

How can I add row selection event and get the selected row data?

In basic angular js table, we have ng-repeat, so we are able to pass the item to row selection event function.
But with this at-table, how I achieve this?

I am using the demo code shown in http://samu.github.io/angular-table/examples/examples.html

Thanks & Regards,
Suresh

Allow sorting by multiple columns

Hi,

Consider a table with first name, last name, and some boolean field. I'd like to be able to sort by the boolean field (true first, false last) and then sort by first name and last name.

That should be possible with ['toggle', 'first_name', 'last_name'] but the code has assumptions about the predicate being a simple string.

What's the reasoning? Any chance you're willing to fix it? :)

pagination not resettng

great table btw. thanks for developing it.

i've found that when the list that the table is bound to updates, it doesn't reset the pagination to the beginning. i've changed the code locally to reflect a fix for this:

line 595 in the update function
if (reset) w.setCurrentPage(0);

and line 635:
scope.$watch($attributes.atList, function () {
return update(true);
}

Reload pagination after removing an item from list

It's works with Angular 1.3 ?

I'm trying to use this component with AngularJS 1.3 and I am unable to make a simple table.

Do you know if it works with this version?

<table class="table table-striped" at-table at-list="myList"  >
            <thead></thead>
                <tbody>
                    <tr>
                        <td at-implicit at-attribute="Name"></td>
                        <td at-implicit at-attribute="School"></td>                     
                    </tr>
                </tbody>
        </table>

Controller

$scope.getAll = function(){
            MyService.getAll({}, function(data){
                $scope.myList = data;
                $scope.config = {
                        itemsPerPage: 5,
                        fillLastPage: true
                      }
            },function(erro){
                console.log(error);
            })
        }

Adding it into your app.js

So i am using angular-seed project and they recommend all the directive to be in one file app.js

Couldn't get this to work because i didn't inject the directive for angular-table. I am not sure if this is implied that i have to or not but for purpose of future users having this problem i shall log it down here

Add this to your module injection "angular-table", this is the directive that allows you to use in the other pages.

angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers',
'ui.date',
'angular-table',
'tempJsonService'
]).

Looks something like this

Pagination should navigate an array

With the current pagination format, if a thousand records is loaded, a lot of page numbers are drawn on the page.

By using some array as reference to navigate, a reasonable amount of numbers could be shown to the user, letting angular decide which icon numbers to show based on 'nav_array' index.

I know this is a feature request and not an issue, but I believe this component is great and totally deserves this so it can be used on medium/medium-large applications in the real world.

filter issue

hi guys
see http://samu.github.io/angular-table/examples/examples.html interactive example
if i copy and paste'Kristin Hill' in the Filter input ,it can filter Kristin Hill
but then if you copy and paste another one 'Greg Boyd' to the filter input , the list can't change
who can help me? thanks!

Need more information

Hi,

I'm actually a newbie discovering AngularJs and I feel like I need your "angular-table".
But I'm a bit lost in all those files in directory and your Readme only says how to use it. Can you please tell me how to install angular-table on my application ?
Where do I need to include it exactly ? (Btw, I've got a rails app)

Cordially,
Thomas

Merge custom header attributes

When defining custom header fields, attributes defined on there aren't merged into the generated header.

variable naming

there are some variable names such as predicate or reverse that might get ambigious. Eventhough every table has its own scope, those variable names may clash if they are defined in a parent scope.

Use angular-table's pagination with UI Bootstrap

Hi,

I wanted to use angular-table to be able to declare sortable and pageable tables in my AngularJS application. But I have a problem when using it with UI Bootstrap : http://angular-ui.github.io/bootstrap/

Here is my app.js file:

angular.module('myApp', ['ui.bootstrap','angular-table']);

When I use pagination the application crashes with the following message:

TypeError: Cannot read property 'initialSorting' of undefined
    at post (http://localhost:8080/myApp/lib/angular-table/angular-table.min.js:5:1167)
    at k (http://localhost:8080/myApp/lib/angular/angular.min.js:44:444)
    at http://localhost:8080/myApp/lib/angular/angular.min.js:49:201
    at http://localhost:8080/myApp/lib/angular/angular.min.js:100:347
    at i (http://localhost:8080/myApp/lib/angular/angular.min.js:79:437)
    at i (http://localhost:8080/myApp/lib/angular/angular.min.js:79:437)
    at http://localhost:8080/myApp/lib/angular/angular.min.js:80:485
    at Object.e.$eval (http://localhost:8080/myApp/lib/angular/angular.min.js:92:272)
    at Object.e.$digest (http://localhost:8080/myApp/lib/angular/angular.min.js:90:142)
    at Object.e.$apply (http://localhost:8080/myApp/lib/angular/angular.min.js:92:431) <div class="table table-bordered table-hover pagination ng-scope" id="projectsTable" pagination="projectsTablePagination" at-table=""> 

It seems that the attribute pagination of <table> tag is recognized as directive of UI Bootstrap, so I can't use the pagination of angular-table. Because when I remove 'ui.bootstrap' from application dependencies it works fine.

Any Idea of how to fix that ?

Thanks.

using limitTo filter in pagination list attribute throws exception

example:

list="list | limitTo:10"

Dynamic Column expressions not support

I ran an example to attempt to have the column value populated by having the evaluated expression {{queryParams.chosenDimension}} as an index into item as the rows are iterated over but it doesn't appear that the expression is evaluate and then used ... item.evaluateDimension. The column headers are evaluated properly though. Could you please add support for evaluating the at-implicit first and then using it to index into the item iterator? thx

 <table at-table at-list="reportData" class="table" at-config="rtConf">
     <thead></thead>
          <tbody>
              <tr>
                  <td at-attribute="{{queryParams.chosenDimension}}" at-implicit="{{queryParams.chosenDimension}}" ></td>
                  <td  at-attribute="{{queryParams.metric}}" at-implicit="{{queryParams.metric}}" ></td>
            </tr>
    </tbody>
 </table>

sorting data in columns

What's the best way to add custom sorting methods for sorting data in columns?

Thanks,
Bhinav.

Limit the maximum visible buttons for pagination

Hi,

firstable thanks for this plugin, it's very usefull for ou project.
We wanted to know if it's possible to make an improvement to limit the number of visible buttons like in angular bootstrap pagination:

Because we have a table with a lot of entries and we have like 50 pages so it's not very beautiful to have 50 buttons.

Thank you

Not able to use angular date filter with it

I am having my object as
eg.
Obj={
"id":4,
"userName":"Test",
"submittedOn":1440486440000
}

Previously before using this plugin I was able to use the builtin Date Filter of Angular.
Please provide some solution for the same.

Dynamic columns capability

Hi,

I'd like to be able to dynamically (in the controller) define which columns to include in the table. I mean: to be able to have a generic HTML partial where <td> elements are not fixed in HTML code, but extracted from a scope array.

Something like:

<td data-ng-repeat="column in columnList" at-implicit sortable attribute="{{column}}"></td>

Is it something that can be achieved somehow? If not, this is an enhacement which would be really useful in order to have a generic table widget to be used across an Angular app.

Thanks in advance...

JS error (ReferenceError: Setup is not defined)

ReferenceError: Setup is not defined (angular-table.js:line285)

Getting/setting current page number

Hi,

I would like to know the current page number, so if a user clicks on the detail page of an item and then goes back, I can set him on the page he/she was instead of the first.

¿How can I do this?

Can I use <li> instead <table> <th> <td> ?

I would like use this method but not for tables, and implement this as list into "divs"

<li> {{item.birthdate.substring(0, 10)}}</li>

Could be possible?

Server side interaction

Please add pagination and sort support on server side

Pagination not updated when modifying the number of items per page

Hi,

I wanted to modify the number of items per page but when I do so, the pagination doesn't update itself. Here is a plunker to illustrate the issue http://plnkr.co/edit/2LPdCU1j4wi3BoqCVWnU?p=preview .

Watching the pagination scope "itemsPerPage" variable to update the pagination seems to make it work fine.

Hope it could help :-)

Regards,
Yann

Angular-table not rendering rows.

I am trying to use angular-table for the first time with my Angular 1.4 page. I have the following:

$scope.table_config = {itemsPerPage: 25, currentPage: 0};
$scope.galleries_data = [];

Later, I set galleries_data to the returned data from an $http.get() request.

Below is the table. I verified that the data (an array with one object) is being retrieved and assigned properly. Yet no data displays in the table. Does angular-table watch galleries_data? Do I need to force the table to refresh when the data changes? How do I do that?

I have tried various things. Downgrading to 1.2. Removing the ng-show from tr elements. Nothing has helped.

<table at-table at-paginated at-list="galleries_data" at-config="table_config" class="table table-striped table-bordered table-condensed">
<tr ng-show='show_inactive || item.active'>
<td at-title="'Actions'" style='text-align: left;'>
<a href='edit_gallery/{{item.photogallery_id}}' title="Edit" class="glyphicons edit" ><i></i> </a>
<a ng-click='confirm_action(row, $index, "delete_gallery")' title="Delete" class="glyphicons delete" ><i></i> </a>
<a href='inactive/{{item.photogallery_id}}' title="Active (Make Inactive)" class="glyphicons play" ng-show='item.active_flag'><i></i> </a>
<a href='active/{{item.photogallery_id}}' title="Inactive (Make Active)" class="glyphicons pause" ng-show='item.inactive_flag'><i></i> </a>
<a ng-click='view_photos(item)' title="View Photos" class="glyphicons camera" ><i></i> </a>
</td>
<td at-title="{{item.label}}" at-attribute="name" at-sortable style='text-align: left;'>{{item.name}}</td>
<td at-title="{{item.label}}" at-attribute="active" at-sortable style='text-align: left;'>{{item.active}}</td>
<td at-title="{{item.label}}" at-attribute="enable_frontend_uploads" at-sortable style='text-align: left;'>{{item.enable_frontend_uploads}}</td>
<td at-title="{{item.label}}" at-attribute="layout" at-sortable style='text-align: left;'>{{item.layout}}</td>
<td at-title="{{item.label}}" at-attribute="count" at-sortable style='text-align: right;'>{{item.count}}</td>
</tr>
</table>
<at-pagination at-config="table_config" at-list="galleries_data"></at-pagination>

Ajax/$http

What about load data from server with server sorting and pagination?

Why does not exist .html file? I don't can run this application.

We need update bower.json file after the project builded by Yoman

add overrides into the bower.json

  "overrides": {
    "at-table": {
      "main": "./dist/angular-table.js"
    }
  }


after add this overrides, the script tag of angular-table will not be removed while `grunt build`

get current display number

i'm looking to display a page count like when you're on page 2 and you want to display 5-10 of 100.

any methods here for this?

Items per page bug

If there are less items than setted in "at-items-per-page" (for ex. 3 results, but setted 5 items per page) no results is shown at all.

Filter the list

Is it possible to use filters; e.g. at-list="clients | filter:clientSearchPhrase" ?

That would be very handy but I don't seem to be able to make it work...

Pagination CSS Style without Bootstrap

Hi,

I'm not using bootstrap for CSS so I had to dig out the styles manually and apply them for the pagination controls to look good.

So I'm just posting them here for posterity, might help someone save a few minutes digging around themselves.

This works OK for me, just drop into the page css - I'm using Angular Material Design as my CSS framework.

Cheers.

.pagination {
    border-radius: 4px;
    display: inline-block;
    margin: 20px 0;
    padding-left: 0;
}
ul, ol {
    margin-bottom: 10px;
    margin-top: 0;
}
.pagination > li {
    display: inline;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}
ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
.pagination > li > a, .pagination > li > span {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #337ab7;
    float: left;
    line-height: 1.42857;
    margin-left: -1px;
    padding: 6px 12px;
    position: relative;
    text-decoration: none;
    font-size: 18px;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #428bca;
    border-color: #428bca;
    color: #fff;
    cursor: default;
    z-index: 2;
}

Its possible to use <tfoot> in table?

Is it possible to use <tfoot> in your table? I tried it once but the table format will be misconfigured.

TypeError thrown in atPagination directive, itemsPerPage could be '=' rather than '@',

Hi,

I've noticed a bug in the atPagination directive that's throwing a TypeError - the itemsPerPage and list $watches are calling $scope.update, which is failing because it doesn't exist. Is this is supposed to call the directive's own update()? If I change this locally it seems to work.

In addition, would it be possible to get the itemsPerPage changed to bidirectional instead of being defined as an attribute so that it could be dynamic?

Thanks!

not available through bower

i know this isn't really a big issue but its really convenient to be able to access libraries via bower

set again currentPage

I have a config and 31 records

$scope.tableConfig = {
    itemsPerPage: 10,
     maxPages: 10
};

when I remove record finally and I have 30 records. currentPage should be reset

How to do server side pagination ?

In my API, I get results in json format with a fixed number of results per page. Is it possible, to load results on page change from the API rather than a prepopulated variable ?

js errors while loding data via jsonp

I get an error while loding the table data over jsonp as the data list is not ready while the table is loaded:

TypeError: Cannot read property 'length' of undefined
    at update_stuff (http://localhost:8000/app/lib/angular-table/angular-table.js:359:37)
    at Object.<anonymous> (http://localhost:8000/app/lib/angular-table/angular-table.js:363:16)
    at Object.applyFunction [as fn] (<anonymous>:778:50)
    at Scope.$digest (http://localhost:8000/app/lib/angular/angular.js:11898:29)
    at Scope.$delegate.__proto__.$digest (<anonymous>:844:31)
    at Scope.$apply (http://localhost:8000/app/lib/angular/angular.js:12151:24)
    at Scope.$delegate.__proto__.$apply (<anonymous>:855:30)
    at done (http://localhost:8000/app/lib/angular/angular.js:7909:45)
    at completeRequest (http://localhost:8000/app/lib/angular/angular.js:8110:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:8000/app/lib/angular/angular.js:8053:11) 

here the diff of my fix:

diff --git a/angular-table.js b/angular-table.js
index b814413..cb57fb7 100644
--- a/angular-table.js
+++ b/angular-table.js
@@ -369,8 +369,13 @@
         return update_stuff();
       });
       $scope.$watch("" + tc.list + ".length", function() {
-        $scope[irk_number_of_pages] = Math.ceil($scope[tc.list].length / w.get_items_per_page());
-        return update_stuff();
+        if ($scope[tc.list]) {
+          $scope[irk_number_of_pages] = Math.ceil($scope[tc.list].length / w.get_items_per_page());
+          return update_stuff();
+        } else {
+          return false;
+        }
+          
       });
       $scope.$watch("predicate", function() {
         return update_stuff();
@@ -495,7 +500,12 @@
     }

     ScopeConfigWrapper.prototype.get_list = function() {
-      return this.scope.$eval(this.config.list);
+      var list = this.scope.$eval(this.config.list);
+      if (list) {
+        return list;
+      } else {
+        return [];
+      }
     };

     ScopeConfigWrapper.prototype.get_items_per_page = function() {

namespaced attributes

Attributes used to configure the table should be namespaced with at- to prohibit ambiguity:

• list
• attribute
• fill-last-page
• items-per-page
• instance
• sortable
• sort-context
• initial-sorting

Please use CSS for proper RTL support

Hi,

The code has this:

ColumnConfiguration.prototype.renderSorting = function(element) {
  ...
  icon = angular.element("<i style='margin-left: 10px;'></i>");
  ...

Which means it doesn't support right-to-left (RTL) layouts for no good reason. :/

There are other embedded styles and icon classes, e.g. glyphicon glyphicon-chevron-down, which (unless I'm missing something) goes against the statement on the project page:

This directive depends on angular only. No jQuery or Bootstrap required! It has been tested on angular 1.2, but it should also work with 1.1 releases.

Since I believe that styling should be decided by the developer, not the library, I'd like to know if you'd be open to a pull request that:

• Adds a CSS file and uses classes instead of embedded styles,
• Adds right-to-left support
• Allows specifying custom icon classes

sort icons on examples page

the sort icons aren't visible on the examples page.

using a table inside a header is not possible

It is not possible to have a table in the header. I assume this is because we search for a body or a tr element in the main element's children. If we have defined a body in the header and one in the main element, this will be ambigious.

Error when data is not present

First Of all Angular-Table is Awesome.

Angular Table works for me the best but there is one issue i am facing.
I am getting the error "j.getList(...) is undefined" whenever there is no data in my object.
My code is working fine its just error which I am facing in my console.

I don't want any error to be printed anywhere in my angular code.

Error details:
Error: j.getList(...) is undefined
c</b.prototype.link/i@http://localhost:8080/RMS/scripts/libraries/angular-table.min.js:9:5961
c</b.prototype.link/<@http://localhost:8080/RMS/scripts/libraries/angular-table.min.js:9:6161
Zd/this.$get</k.prototype.$digest@http://localhost:8080/RMS/scripts/libraries/angular.min.js:109:422
Zd/this.$get</k.prototype.$apply@http://localhost:8080/RMS/scripts/libraries/angular.min.js:112:396
h@http://localhost:8080/RMS/scripts/libraries/angular.min.js:72:452
u@http://localhost:8080/RMS/scripts/libraries/angular.min.js:77:463
ye/</z.onreadystatechange@http://localhost:8080/RMS/scripts/libraries/angular.min.js:79:24

Is the sorting of links within a <td> element supported?

I have a table like this:

 <table at-table at-paginated at-list="filteredList" at-config="config">
    <thead>
    </thead>
    <tbody>
      <tr>
        <td at-title="user"><a ng-href="#" at-attribute="user" at-implicit></a></td>
        <td at-implicit at-attribute="score" at-sortable></td>
        <td at-implicit at-attribute="lastActivity" at-sortable></td>
      </tr>
    </tbody>
  </table>

and all works fine, but I am struggling to make the user column sortable.

This does not work:

<td at-title="user"><a ng-href="#" at-attribute="user" at-implicit at-sortable></a></td>

And this only allows sorting the column once:

<td at-title="user" at-sortable><a ng-href="#" at-attribute="user" at-implicit></a></td>

Is this just not supported or am I doing something wrong? Any help appreciated, thanks.

Make "first" / "last" buttons customizable

I'm building an app with 12 languages and cannot translate the buttons. The buttons should be customizable...

Perhaps I can do it and start a pull request...

Sort fails after one time

Hi,
I am populating a two column table dynamically from data given as:
var jsonarray = [
{ "A" : "a1", "B": "b1" },
{"A" : "a2", "B" :"b2"} ];


I have defined the table correctly, because it is able to sort on click of the column names ONCE.
However, on subsequent clicks, the icon changes from v to ^ and vice-versa, however no sorting takes place.

What could possibly be the reason?

How to get sortedAndPaginatedList information?

I started using this, but I can't figure out how to retrieve sortedAndPaginatedList array within my app? Could you help?

The headers don't shown

I copy your home example, but i cant see the headers!

table not reload filteredList is changed

<div ng-controller="MainCtrl">
  <table at-table at-list="filteredList" at-paginated  at-config="tableConfig"></table>
  . . . 
  <at-pagination at-list="filteredList" at-config="tableConfig"></at-pagination>
</div>

in MainCtrl,

$scope.$on("filterChanged",
     function (event, newFilterStr) {
        $scope.filteredList = $filter("filter")($scope.appdata, newFilterStr);
 });

$scope.$watch("filteredList.length", function(newLen, oldLen, scope){
  console.log("$scope", $scope.$id, "scope: ", scope.$id,
      "scope.filteredList.length", scope.filteredList.length,
      "newLen: ", newLen,"oldLen:", oldLen
  );
})

problem is table didn't reload after change the $scope.filteredList in MainCtrl.
After some debug, I find out that my MainCtrl is been loaded twice. The 1st time it has a $scope.$id of '003'. The 2nd time, it has a $scope.$id of '004'. well, PaginatedSetup and atPagination have the same $scope.$parent.$id of '004'. But when the following line is been executed in MainCtrl, $scope.$id is always '003'!!.

 $scope.filteredList = $filter("filter")($scope.appdata, newFilterStr);

And filteredList in '004' is not been updated at the same time. So the table didn't reload itself.

Row Click

Never mind my mistake

loading in all the data from json

I'm new to angular. I've been messing around with pagination and I've tried different solutions and yours is the most clean that I've seen, I really like it. Easy to set up.

I'm running into an issue. In my controller I set up my list as a blank array. I then fetch all my data via AJAX and set it to the list. My goal is to use your code to then page through it. This is all done on page load in my starting view. I see the entries being created, but they're empty. When I don't load anything I see that your code creates empty rows to fill it out, as per "fillLastPage". So I know it's seeing the data, as the rows are actually set up and aren't fillers. However nothing shows up for text.

Also the items per page gets screwed up. I have itemsPerPage set to 3 and my script pulls in 6, but the number of pages is still 1 and it shows 5 empty rows when I inspect the element.

It's almost like i have to tell your script to refresh it? Do you have any ideas? I'd appreciate any help.

I'd love to be able to pull in a few hundred rows and then use your script to page through them all and yours is the most clean by far

In any case, thanks for the contribution!