Series: Tables of Data

Dynamic Toggling of Tables

Published on Apr 12, 2015

When I first coded this I got positively giddy imagining the possibilities.

Give your user crazy amounts of control in what information they see, letting them select which columns of data they see, and save it through the power of query-params.




In episode 28, the last episode, we abstracted away the idea of columns so that we could loop through the columns instead of hard-coding each different column that we wanted to display. The results ended up looking mostly like we had before. Today, we're going to take advantage of that abstraction and use it to toggle the different columns.

Right now, to choose the columns that we display, we just take all the available columns and display all of them. Let's create another property, call it 'columns used', in which we'll list out the columns that we want to use. Then, instead of columns just being an alias for available columns, we'll replace it with another function. In this function, it goes through all the available columns and it filters it so it only uses the ones that are in columns used. It does this through calling contains on the columns used.

Let's see it in action. There, we only have title and author, but that's not much good until we have a way for our user to select which columns they want to display.

Let's add in an option for changing the columns. Here, we're looping through all the available columns because we'll want to be able to select any of them. Then we're feeding it in to a toggleable item component that we're about to make. In the last two options, we avoided using components because the things we would use a component for were pretty simple and could be done just as easily with a sub-expression. Here, as you'll see soon, we gain lots of advantages by using a component. You feed it in the columns used, our query param, as toggle list, and we feed it in that specific column as toggleable item. The component is a button which display the title of the toggleable item. It also, when you click the button, it triggers the toggle item action. If the item is toggled, then it's bold. Otherwise, the text is muted.

So let's dig in to the 'is toggled' property and the toggle light-up action. Is toggled is computed property based off the property of the toggleable item passed in, as well as what's currently in the toggled list which, if you remember, is the columns used array in this instance. It sees if the columns used, or toggled list, contains the toggleable item. Then, toggle item, the action, checks to see if it is toggled, and if it is, it removes that object from the toggled list. If it's not toggled, then it add the object to the toggled list. Basically if it's not there, it adds it. If it is there, it removes it. This is the basic definition of toggling. It's just the implementation is slightly more complicated here.

Now we can add and remove columns as we see fit. This is pretty powerful, and thanks to the power of query params, we can grab our columns, go to a new browser, paste in that URL, and it will be exactly like we left it.

In an upcoming episode, we'll show how to sort the different columns in case you want to show them in a different order than they're given to you. I'll see you then.

Tables of Data

Subscribe to our mailing list