Series: Tables of Data

Rearranging Table Columns

Published on Apr 17, 2015

The stunning conclusion to the Tables of Data series. Watch in awe as the master plan comes together, and we are able to... rearrange the columns of the table!




In the last two episodes we made it so that you could change the columns that are shown just by clicking a button. That's pretty powerful, but what if we want to show them in a different order? What if the created at column is the most important information for your user? For that we're going to need to be able to rearrange how the columns are displayed.

A More Amenable Algorithm

To do this we're first going to have to rearrange how columns is calculated. Currently, we get all the available columns, and then we go through them, and we only return the ones that are contained in columns used.While that definitely gets us everything that's in columns used, it inevitably spits them out as the order that they are in available columns. We'll have to do this a slightly different way.

In this new way, we start with columns used then we map a function onto it that basically goes in to available columns, and finds the available column with the property that matches the sting in columns used. That's what this does, and then it returns the first one in that array. You get the same result, but you get it in the order of columns used instead of the order of available columns.

What this first small change means in practice is that instead of these always being displayed in the same order as here, now it adds them onto the end. This technically accomplishes our goal since we could do as much rearranging as we want, with this really hacky system, but it'll be much better if we had arrows to the left and right of everything that would push them to the side. Let's go ahead and build those.

Left/Right arrows

In the sortable header component we'll place the move left button and the move right button. Those call out to move left and move right, which we're going create, and they also use the show brackets helper, because if you just put a bracket then it's going to think it's a HTML, so we have to use this very simple helper. Let's look at what that looks like. These look pretty good, be better if I had an icon or something, but you can't have it all. Now, let's get to work making these buttons work.

We'll start by passing up the actions through the component, making sure to add on the current sort property. In our declaration of sortable header we'll have to add in the move left and move right actions. Fortunately, we'll only need to do it once since we dried up our column declarations back in episode twenty-eight.

Now we need to add the actions to our posts controller. Fortunately, these are relatively straightforward. We'll start with move left, so it gets the property that we're wanting to move, and then it's going to find the index of that property in the columns used array.

It's going to remove that object, and then if it was already at index zero this is going to keep it where it was. Otherwise, it's going to move it one index less, so that it's moving left in the array. Move right is very similar except it's moving it to the right instead of to the left. We can see that this works. We now have full control over how our columns are displayed. Not only do we have control of how it displays here, but if we copy the URL and go to a new page it will display exactly as we had it before.

End of an Era

This ends, for now, our series on tables of data. We started off with simple sorting, and we went on to do some extremely powerful things. You can extend this even further in your own apps. If, on the other hand, you're not immediately inspired to go rewrite your entire app right now to take advantage of this, you can explore this week’s pro episode, which is showing the data pane on Ember Inspector. It opens up lots of different debugging and information gathering possibilities. I'll see you there.

Tables of Data

Subscribe to our mailing list