I’m thinking about adding a sortable table to a new website I’m working on. It’ll have approximately 6 columns and 8 rows. What’s the easiest way to implement a sortable table in FWP?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here you go: TableKit - ActionsForge
Walter
On Apr 1, 2013, at 11:57 PM, RavenManiac wrote:
I’m thinking about adding a sortable table to a new website I’m working on. It’ll have approximately 6 columns and 8 rows. What’s the easiest way to implement a sortable table in FWP?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 2 Apr 2013, 4:06 am, waltd wrote:
Here you go: TableKit - ActionsForge
Walter
Very cool. Thanks!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Has anyone used the Table Kit action? I would love to see an an example of it in use before I add it to my site.
One big question I have is what happens if you click the same column header a second time? Does it switch from an ascending to a descending sort order?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
One big question I have is what happens if you click the same column header a second time? Does it switch from an ascending to a descending sort order?
Yes
http://www.deltadesign.co/fw_examples/walts_scripts/tablekit.html
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Tablekit looks like a solution to my efforts to create a sortable table. The problem is that, once I’ve added the action, the actions panel/ inspector comes up blank.
Likewise I know that somehow I have to create a table header and body to set the sorting ‘parameters’ but again nowhere to get basic guidance.
There seem to be a lot videos/ tutorials for other actions, but not for Tablekit, which leaves a newbie like myself in the dark. I’m sure it must be straight forward when you know, it’s finding it.
Can anyone cast any light?
Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sure. I wrote this a while back, and it’s actually provided in two separate Actions: TableKit itself (which you apply to the table) and TableKit Header, which you apply to the individual header columns to set their sort type. You don’t have to apply this latter Action to every header, only the ones you wish to make into specific types of sort controls.
Applying TableKit to the table will automatically create the thead and tbody elements, convert all td tags in the first row of the table into th elements, and set each of those th elements to be sortable controls.
Applying TableKit Header to a particular cell in the first row will add an additional classname to that header indicating which sort type should be used for that column.
PLEASE NOTE! I have not tested this with Freeway 6, and looking through the code to give you these hints, I cannot be certain that it will not fail there. I can’t recall if FW6 adds the tbody and thead automatically (I am pretty sure there are checkboxes in the Inspector to do so), but the result will be duplicate thead and tbody tags, because the Action doesn’t check to see if they exist already. It should work if you don’t enable that feature directly in Freeway.
But then further fun, it probably won’t do another thing it’s meant to do – remove the height from a surrounding DIV so the table can flex vertically – because it hasn’t been updated to use the new Freeway 6 style methods. Add that to my list of things to do…
Let me know how this goes for you. It should work, modulo the possible issues with 6 noted above. It is normal for you not to see anything in the Action interface, because there’s no user-level controls.
Walter
On Apr 25, 2013, at 10:25 AM, Tim wrote:
Tablekit looks like a solution to my efforts to create a sortable table. The problem is that, once I’ve added the action, the actions panel/ inspector comes up blank.
Likewise I know that somehow I have to create a table header and body to set the sorting ‘parameters’ but again nowhere to get basic guidance.
There seem to be a lot videos/ tutorials for other actions, but not for Tablekit, which leaves a newbie like myself in the dark. I’m sure it must be straight forward when you know, it’s finding it.
Can anyone cast any light?
Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I think the penny may be staring to drop with me, but very slowly.
I’ve cobbled together a table to test, as follows:
Column 1 - a restaurant, b restaurant, c restaurant, etc.
Column 2 - Indian, Italian, Chinese, etc.
Column 3 - Just at random put a, b, c, etc.
Whilst it sorts the first column neatly into alphabetical order, when I go to sort the second and third columns all they do is sort the table order according to column 1.
So whichever column I tick it simply sorts column one all over again and ignores any search criteria for columns 2 and three.
Obviously when I sort column 2 (for example) I want it to resort the table by types of cuisine.
I have applied the table kit action to the table and the table header actions to each of the columns, but alas no options come up in an inspector. Only the table inspector.
Trust this makes sense. Feel sure I’m making a rudimentary mistake somewhere.
Thank again.
PS I’m using Freeway Pro 6.0.7
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Could you post a link to your page? In all cases, TableKit always sorts the entire table, row by row, based on the criterion you choose in the header. You’re sorting the table itself, not the individual columns. So if you sort the table by column 1, you will see each row in order of the individual elements in each row within column 1. It doesn’t matter how you had previously sorted things – you will always see just that one column used as the sort “key” for the entire table.
Walter
On Apr 25, 2013, at 11:51 AM, Tim wrote:
I think the penny may be staring to drop with me, but very slowly.
I’ve cobbled together a table to test, as follows:
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That may be the problem. I don’t know how to create a sort criteria. Logic tells me I should be able to, but nothing that I can see comes up to do so after I’ve first applied the action.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
When you preview the page in a browser, click on one of the table headers. The column below that will sort, and drag the rest of the table along with it. Is that what you mean? Or do you need to change the way that the sort is calculated? What sort of content are you really sorting? I had no trouble making a demo of this in Freeway 6 using the description you gave previously.
Walter
On Apr 25, 2013, at 12:24 PM, Tim wrote:
That may be the problem. I don’t know how to create a sort criteria. Logic tells me I should be able to, but nothing that I can see comes up to do so after I’ve first applied the action.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
“When you preview the page in a browser, click on one of the table headers. The column below that will sort, and drag the rest of the table along with it.”
Yes. When I click column 1 it sorts either alphabetically a-z or z-a ( “a restaurant”, “b restaurant”, “c restaurant”, etc.) The information in the other columns follows accordingly. So wherever “a restaurant” appears in the table it will always be denoted as “Indian” cuisine in column 2. Obviously that’s correct and as I would want it. So yes, it drags the rest of table along with it.
However. If I then click on Column 2 to sort the table by type of cuisine (Indian, Italian, Chinese, etc.) it just re-sorts the table according to column 1. In other words it does exactly the same as if I’d clicked column 1.
The objective is that anyone reading the table should be able to sort and view the table of restaurants:
It seems to me that I need to apply separate sort criteria to each column, but I don’t know how to do this.
Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I can’t duplicate this behavior here. Take a look at this example:
http://scripty.walterdavisstudio.com/sort
and download the FW6 file here:
http://scripty.walterdavisstudio.com/sort/sortable.freeway.zip
See if you can spot the differences between what I did and you did. I am guessing that you’re trying too hard, doing too many things. It should Just Work™.
Walter
On Apr 25, 2013, at 1:23 PM, Tim wrote:
However. If I then click on Column 2 to sort the table by type of cuisine (Indian, Italian, Chinese, etc.) it just re-sorts the table according to column 1. In other words it does exactly the same as if I’d clicked column 1.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 25 Apr 2013, 5:44 pm, waltd wrote:
I can’t duplicate this behavior here. Take a look at this example:
and download the FW6 file here:
http://scripty.walterdavisstudio.com/sort/sortable.freeway.zip
See if you can spot the differences between what I did and you did. I am guessing that you’re trying too hard, doing too many things. It should Just Work.
Walter
That’s awesome Walter! I’m going to be using this soon. Are the arrows part of the action?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes. They are hosted at my CDN. You can use local versions, and override the CSS I provide, if you want a different look.
Walter
On Apr 25, 2013, at 2:45 PM, RavenManiac wrote:
On 25 Apr 2013, 5:44 pm, waltd wrote:
I can’t duplicate this behavior here. Take a look at this example:
and download the FW6 file here:
http://scripty.walterdavisstudio.com/sort/sortable.freeway.zip
See if you can spot the differences between what I did and you did. I am guessing that you’re trying too hard, doing too many things. It should Just Work.
Walter
That’s awesome Walter! I’m going to be using this soon. Are the arrows part of the action?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Many thanks Walter. My effort now works.
One difference appears to be that I applied tablekit AND tablekit headers to each column. When I re-did the table without the tablekit headers it worked.
In which case I can’t see where the use of tablekit header comes in and therefore can’t judge whether it would be of any use to me. I’m assuming it allows for more sophisticated sorting processes. I notice that there’s meant to be a tablekit header interface but for the life of me I can’t find it. Must be in one of the drop down menus?
As an aside, is it possible to change the border colours of these particular tables, or indeed remove the border altogether?
Once again. Many thanks for your help.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Well let’s see it. 
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On Apr 26, 2013, at 9:23 AM, Tim wrote:
Many thanks Walter. My effort now works.
One difference appears to be that I applied tablekit AND tablekit headers to each column. When I re-did the table without the tablekit headers it worked.
I’m amazed that worked at all.
In which case I can’t see where the use of tablekit header comes in and therefore can’t judge whether it would be of any use to me. I’m assuming it allows for more sophisticated sorting processes. I notice that there’s meant to be a tablekit header interface but for the life of me I can’t find it. Must be in one of the drop down menus?
Click on the table header cell where you wish to adjust the sort algorithm. Make sure that you see a pale blue border around the cell, indicating that the cell itself is selected, not its contents. From the main menu, apply TableKit Header to the cell. Now, while that cell is still selected, look in the Actions palette. You should see the interface. I didn’t do this in my example.
As an aside, is it possible to change the border colours of these particular tables, or indeed remove the border altogether?
Yes, you can override the CSS I provide by creating your own stylesheet or head style block on that page. Look at the source of the stylesheet, and you should see how it is constructed. You can “surgically” modify only certain aspects of it, or the entire collection of styles, just by creating styles with the exact same selector (the part of the rule outside of the curly-braces) and having that style load after the one the Action provides.
If you just wanted to change the border color, and nothing else, you could make a style like this in the head of your page (or in an external stylesheet that you link to the page):
.sortable th, .sortable td {
border-bottom-color: chartreuse;
}
That will reach in with tweezers and leave everything else alone.
Walter
Once again. Many thanks for your help.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Re: I’m amazed that worked at all.
I can only guess that without applying the tablekit header it applies a default. I’m assuming that if works in the browser preview it will work when site is on-line. Otherwise you have me worried!
Re: Click on the table header cell where you wish to adjust the sort algorithm.
Yes, I think I understand that now. Thanks.
Re: Yes, you can override the CSS I provide by creating your own stylesheet …
I looked at source in the preview browser, no problem. Otherwise I’m a bit lost. Just, say, to remove the table border which specific code am I looking at? And what do I change it to?
I’m guessing but only guessing that when I’ve done this modification I copy the html and apply/ add it to the page by pasting the code using the HTML MARKUP?
Tim
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On Apr 26, 2013, at 10:32 AM, Tim wrote:
Re: I’m amazed that worked at all.
I can only guess that without applying the tablekit header it applies a default. I’m assuming that if works in the browser preview it will work when site is on-line. Otherwise you have me worried!
Just applying the TableKit Action to the table will apply the default sort behavior to each header, which is alphabetical, case-insensitive. If you want something besides that, then you also apply the TableKit Header to the relevant header (but you only need to apply TableKit itself to the table, once).
Re: Click on the table header cell where you wish to adjust the sort algorithm.
Yes, I think I understand that now. Thanks.
Re: Yes, you can override the CSS I provide by creating your own stylesheet …
I looked at source in the preview browser, no problem. Otherwise I’m a bit lost. Just, say, to remove the table border which specific code am I looking at? And what do I change it to?
If you want to remove it altogether, then your CSS would look like this:
.sortable th, .sortable td {
border-bottom: none;
}
The default also includes the zebra-striping, which you can override by providing new background-color options to
.sortable tr.rowodd
and
.sortable tr.roweven
To add these to the page, you would open up the Page / HTML Markup / Before (before end head) dialog and enter something like this:
<style type="text/css">
.sortable th, .sortable td {
border-bottom: none;
}
.sortable tr.rowodd { background-color: black; color: white; }
.sortable tr.roweven { background-color: red; color: white; }
</style>
Obviously, adjust these lurid colors to match your design.
Walter
I’m guessing but only guessing that when I’ve done this modification I copy the html and apply/ add it to the page by pasting the code using the HTML MARKUP?
Tim
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options