Sortable Data Tables

[ UPDATED below ]

When someone asked in a recent thread at the Freewaytalk Forum about ‘sortable tables’ I thought “hey, that sounds cool”. A quick search turned up a link to a script by Joost deValk that looked pretty uncomplicated, so I posted his site link to the thread. It wasn’t till much later, after I was able to play with this little script that I found out how easy it is to implement, and the results are pretty neat.

 

The download includes two versions of the javascript— one each for european or US date conventions. There’s also an example HTML file, and the arrow graphics for the script. He doesn’t include a copy of his online instructions, which, while simple, curiously omit any mention for the need to alter the script to find the arrow graphics locally. In fact, the script uses a link to these images on his website… which makes me wonder how many people are using this script with this default setting. Anyway, some people consider it bad practice to link to assets on other people’s websites, so I’ll cover that part too.

 

Keep It Simple

Rather than note this at the end, let me say up front that this script doesn’t seem to work with complex table structures. If your table has combined cells (rowspan or colspan) it will cancel out whatever magic the script uses. Keep your tables simple and uncomplicated, and this script will love you.

I suppose that I should also confess that I didn’t test this on un-layered tables: that will have to be someone else’s job, although I can’t think of why it wouldn’t work. Anyway, glad to have all that off my chest.

Getting Started

After you download and decompress the script archive, move it to your Media folder for easy access. Using TextEdit, open the .js file that you plan to use (euro or us). Look near the top of the script for the line

var image_path = "http://www.joostdevalk.nl/code/sortable-table/";

and change it to

var image_path = "Resources/";

Hit save and cross that off your list.

To upload the script, I take the lazy man’s way (for now) and use Tim Plumb’s excellent Upload Stuff action and upload the the script and the graphics to the Resources folder. Someday I will have to relent to the idea that the Resources folder is not this big trunk for me to stuff things into willy-nilly. But not today, so this step can be considered done too.

Now we need to put in some code to reference the script. On the page with your table(s), go to menu»Page»HTML Markup… and choose the Before </HEAD> section from the pop-up. Now paste the following code into that window,

<script type="text/javascript" src="Resources/sortable_us.js"></script>

We’re almost finished! So far this has been super easy to accomplish. So far, that is.

The Last Little Steps

To help the script find the table we want to be sortable, we must identify it with a class style. To do this we need to be able to select the table. Seems easy, but there is a small hitch…

When you draw a table with layers on, Freeway automatically encases it in an “invisible” div box. When you move the table around on the page, you’re really moving the div box it's in… when you name it in the Inspector window, you’re really naming the div. If you try to apply a style to the table the normal way, you’ll miss it and end up styling the div instead.

That’s OK, we can always select our div/table and go to menu»Item»Extended… and select the <table> pane. Create a new attribute and name it class then give it the value sortable.

Mission accomplished— our table is now targeted for the script. Now it’s time for our final step.

To toggle the sort order, the script relies on a common table element – table headers… these are special cells that create context for columns or rows of data. So all we need to do is just make some table headers and…

What Do You Mean Freeway Can’t Make %&#! Table Headers!?

Awwww, and we were sailing along so nicely. Okay, I won’t go into another long rant about Freeway’s shortcomings when it comes to data tables, but I sure hope Freeway 5 makes up for these annoying oversights. In the meantime, there another way to finish this last step, and it comes with a little bit of an education.

Reviewing Table Basics

Ordinary table cells or “data” cells are identified by the <td> tag and are containers for (what else?) data information. They are arranged in rows which are identified by the <tr> row tag. Stack these rows up into columns and surround them with the <table> tag and you have yourself a basic Freeway table.

Header cells are identified by a different tag, the <th> tag, and are usually found at the top of data columns or to the side of data rows. If Freeway could add header tags, it would be probably be in these locations. So let’s look and see just what Freeway will let us do with a table.

Select a table cell and look at the Inspector palette, and select the Table Cell Settings icon. You will see options for Table Cell, and above that Current Column and Current Row. If you toggle open the Current Row portion, you see that Freeway allows us to insert some markup. So what we will do is insert the table header manually.

Select the top-left-most cell in your data table, and choose Markup from the Current Row pane of the Inspector. The window that opens is similar to the Page Markup window, with a pop-up selector to choose the position the markup will take in the row structure. We will insert our code in the Before <TR> section, which will put it within the table element but before the data elements.

Don’t Gouge Your Eyes Out Just Yet

I know this project started out with the promise of being simple, and then hit a snag or two on the way… Well, there is one last problem to overcome, but I swear— it is the last.

If you add any markup to the table row, and then alter the table in any way — like increase the width of a column— Freeway deletes the markup that you inserted. Poof, gone like the 80s. I don’t know why it does this, but if you’re like me and likely to fiddle with the design and placement, you will find it super-annoying.

What I did was to type the header code and save a copy with the TextEdit. That way, whenever I fiddled with the table, I could just copy and paste the code back into the markup window. It’s still painful to have to redo this step over again, but I swear this is the last miserable quirk in our simple plan.

Working the Code

Writing this code is not very hard… first, let’s list the header names (one for each column in our table):

Title

Director

Debut

Next we wrap them in header tags like so:

<th>Title</th>

<th>Director</th>

<th>Debut</th>

Like data cells, header cells are contained by a table row, so we wrap the whole thing like this:

<tr>

<th>Title</th>

<th>Director</th>

<th>Debut</th>

</tr>

There we have it! Technically speaking, we have what we need now to make the script work. Finally.

But since we are already here, and have gone through all this trouble, there are a couple of simple things we could do to make our data table more efficient and politically correct.

First, we can title our table so that everyone — man and machine — can get a handle on our table. To do that, we tag our title with the <caption> element:

<caption>Table 2: My Top 5 Favorite Comedies</caption>

<tr>

<th>Title</th>

<th>Director</th>

<th>Debut</th>

</tr>

To cement the contextual relationship between header and data for non-visual users we should use the <scope> element. In fairly simple tables, this element is perfect for connecting each data cell in a row or column with its header. In this case, our headers identify columns and not rows of data, so we code it like this:

<caption>Table 2: My Top 5 Favorite Comedies</caption>

<tr>

<th scope="col">Title</th>

<th scope="col">Director</th>

<th scope="col">Debut</th>

</tr>

That’s it— we now have a simple (?) but elegant, sortable, table. The script also has some options we can add, like limiting the sort-toggle to certain columns or creating a stationary row at the bottom of the table, which I will leave you to work out for yourselves.

Bring on the Styles

Styling data tables with CSS is fairly easy, given all the specific tags we can target.

*** to be continued ***

 

CSS Styles Used Here…

This page was made with Freeway 4 Pro. Download Freeway 4 Pro 4.3.2 File Here