Creating a sortable table from an array of complex objects, with custom column ordering, using pure AngularJS

In a recent project I came across a more complex scenario when needing to create a table (from an array of complex objects as the model). Skip to full sourcecode example.

More specifically, I have a list of items to render.
Each item is an object which contains multiple fields.
Each field is an object that has name, value and order properties.

So for example one item looks like this:

https://gist.github.com/idleworx/57806eba24b6bbce30a6

The Problem (Requirements)

What I need to do is to render a table from an array of items, so multiple items as the one above, in such a way that the field names become the columns (using the order specified in the field.order value), and each column is sortable.

You can assume here that the ordering of all fields in each item is the same, and all items have the same fields. So each item is different only differ in the fields’ value property)

To make this simpler to understand, using the relational table concept, think of the items as records, and the fields for each item as the columns (ordered columns at that).

The final output would look like this given 3 items (with each column header clickable)

So how would you render something like this?


The Solution

1. Write a helper method for sorting an item’s fields

First I need a method that returns a sorted array of fields (that I will call from the partial)

getFieldsSorted(item)

https://gist.github.com/idleworx/5746464915ef206a9327

When run, given the item’s JSON defined before, this method will return a sorted array of fields, based on the field.order property, that looks like this. So for a single item, this method would return:

https://gist.github.com/idleworx/9f843c5a770483faa566

Note here that unlike the unsorted item defined in the beginning, in which the fields were sorted: Link, Name, Notes,Price, after the getFieldsSorted(item) is called, the fields are now sorted as: Link, Name, Price, Notes because that is how the field ordering is defined.

This requirement about ordering fields, is so because in my particular case the user will need to be able to customize the field ordering of the item’s fields.

Now we’ll use Angular’s ng-repeat directive to generate a sortable table from an array of 3 items

2. Render the table columns using the order of the fields

Since an item’s fields are not in ordered by default according to the field.order property, we’ll make use of the getFieldsSorted(item) helper method defined before.

First we’ll use ng-repeat to generate the table header with all the fields in order.

Since all the fields are the same across all items (except for their value property), we’ll just use the first item’s fields to render the table column header.

https://gist.github.com/idleworx/7deb2fcde99705b6123c

3. Render the table data using the order of the fields

We’ll use the same getFieldsSorted(item) method to make sure the field values match up with the column names.

https://gist.github.com/idleworx/31ec4720b3f2d7e62d5a

4. Enable table sorting when clicking on the columns

We’ll use the same getFieldsSorted(item) method to make sure the field values match up with the column names. To enable sorting we’ll use the ng-click directive to set both the column name to sort on and the sort direction.

https://gist.github.com/idleworx/ea7e4445c8d44b376f45

Here when a table column is clicked, we are assigning the name of the column to sort on to the toggles.sort.itemsSort.column variable.

This is the most important part of this, if you've followed so far.

Remember, we are trying to sort the selected field’s values for each item in our $scope.items array.

However the item is not a simple array of strings, it’s a complex object, and so we need to let angular know to sort using a child property of the complex object, in our case, by item.fields[name].value

So you may be tempted to use this as the column name

ng-click=”toggles.sort.itemsSort.column=field.name”

however because we are dealing with an array of complex objects this won’t work, instead we’ll use

toggles.sort.itemsSort.column=’fields.’+field.name+’.value’

so angular knows to use the object’s property properly.

But sorting won’t work yet, because inside the tbody table rows we haven’t enabled it yet.

4. Enable sorting of the data

The final step here is to make sure the data is sorted, and for that we’ll use the order by filter to do so.

Now the orderBy filter will properly sort the data from the list of complex objects (items) because it will attempt to sort by item.fields.name.value , where ‘name’ is automatically changed whenever toggles.sort.itemsSort.column changes

https://gist.github.com/idleworx/2198c96cdb5192bf8563

That’s it. To see the full code example checkout the codepen sourcecode for this.