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.
How
Lets 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. Lets 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>
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 theangular-table
directive to extend our tableat-list
point to the data source in our scopeat-attribute
the attribute in each object the respective columns are dedicated toat-implicit
implicitly render the content of each object's attribute defined inat-attribute
Our table looks kind of unspectacular by now, so lets use some css, assuming we have twitter bootstrap in our sources:
<table class="table table-striped" ...>...</table>
Now that looks better! Next, lets 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>
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!
Hacking on angular-table
Coffee Script
This directive is written in Coffee Script. If you want to contribute, please make sure to work on the coffee sources only. If you are familiar with Javascript and aren't with Coffee Script, i highly recommend to take look at it and try it out. It has a powerful and beautiful syntax and is easy to learn. You'll probably need no more than ~2 hours to learn about all the basic concepts.
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.