Data table in angular

A whole new extension from me! Download it, use it, rate it! Any feedback is welcomed!

banner

Have you ever found yourself in need of a fully customisable data table in an angular app?

No? – Than this is not the post you are looking for.

We needed one anyway.

So, first we started to look for a good data table implementation.
After some researching we found a pretty one, which is called DataTables.
It has many cool functions and it is well documented as well. But its best feature is that it is fully customisable. Exactly what we wanted!

How easy is the use the dataTable?
1. Create a <table> HTML tag with an id.
2. Write the following call inside your script.

$(document).ready(function() {
$('#theId').dataTable();
} );

3. Ready.

It looks cool and has a lot of built-in functionalities.

dataTables-original-table

So we had the base implementation but we had a lot of custom requirements for it:

  • We needed it as an angular.js directive.
  • We use Twitter Bootstrap to design our UI and to style the data table as well.
  • Custom header controls for many other filtering options.
  • Custom paging. We had the dodgiest requirement here.
    (To explain this it will be devoted a whole post.)
  • Custom row selection. Row selection and navigation with the arrow keys.
  • Custom controls for rows. Inline delete, edit options to rows.
  • Custom column hiding and sorting.

And we wanted all of this through a friendly API. How we succeeded?

Check the result!

The usage of my implementation in HTML:

&lt;div my-data-table
   my-source=&quot;dataSource&quot;
   refresh=&quot;refresh(data)&quot;
   header=&quot;headerControls&quot; //optional
   page-sizes=&quot;pageSizes&quot; //optional
   sorting-properties=&quot;sortingProperties&quot; //optional
   hiding-properties=&quot;hidingProperties&quot; //optional
   delete-row=&quot;deleteRow(item)&quot; //optional
   edit-row=&quot;editRow(item)&quot; //optional
   select-row=&quot;select(item)&quot; //optional
&gt;
&lt;/div&gt;

And the result looks like this:

dataTables-my-table

This sort blog post series will be about showing the main steps of the implementation.

My implementation with a small sample app is available on github. So you can check it out, download it and try it for yourself!

By reading the upcoming blog post you can get the big picture about the frameworks of the development. You can get the answers of the why?-s and how?-s.

Check the next post in this series!

Advertisements

8 thoughts on “Data table in angular

    • Hi, you are right that the edit button (and the delete button as well) does not work. It is your task to implement the behave of this buttons in the controller. You can find in my sample app only two dummy functions for handling the button clicks. I just wanted to show in this sample that you have the possibility to do that.

      For example we use edit button only just for opening a new details window to edit the selected object. But it is a good idea to improve the sample app with this functionality! : )

  1. Hi,

    Great job.
    The feature we miss the most is defining the columns/properties to display.
    We have nested objects in our JSON and cannot access them so the only workaround for now if to “flatten” the data.

    I think you have this planned, any idea when you can get this out ?

  2. DataTables is a dodgy tool in general when working with angular. It’s kind of an oxymoron. DataTables is a JQuery tool and a very nice at that if your using straight JS and HTML w/ Jquery. But to integrate DataTables into Angular, the directives get tricky and you really have to dig in. I know people have posted dedicated projects online to integrating the two. Just some friendly advice though, if you have a couple of days, you can implement a real angular table that does everything DataTables does and more quite easily due to Angular’s “$filter” for sorting, Bootstrap pagination, searching logic for the dataset (which is very easy), export tool using alasql.min.js and xlsx.core.min.js. As an avid Angular developer, I have found that many people have a hard time getting out of the JQuery mindset and moving to Two-Way binded models, ng-model, etc, etc… it goes on and on. Sure, these JQuery plug-ins save time, but in the end, I have worked in shops where the easy, quick route was taken and 2 months down the road the LOB/Client wants to do something that requires you to dig, dig, dig into the pre-written logic for these plug-ins. Angular makes any features you can imagine easy to write from scratch. At that point, your the creator, you know your code, and implementing new functionality is a breeze. Even styling of the table. DataTables has a couple pre-written skins/themes and you can roll your own, but overall, you can spot one a mile away if you are a UI developer. Skins might change, but not the feel and overall look of DataTables. Try Angular UI Bootstrap components, you will stay more in the Angular realm and not the JQuery id= realm. I only use JQuery for directives and special tasks in my Angular apps, such as drag and drop directive for a table or list. Once developing in Angular, don’t mix JQuery in until it’s called for, like an SVG chart or something.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s