• Resolved Hockeyguy1925

    (@hockeyguy1925)


    Hi Tobias,
    I am currently using table row order extension along with inverted filter. Once the front end user enters in the data they are searching for (Players name for example) the table shows with goals, points etc. I have this set up as my table short-code
    [table id=22 row_order="sort" row_order_sort_column="G" row_order_sort_direction="DESC" responsive="phone" responsive="tablet"/]

    I am trying to get “column g” header to be a certain color when the table loads so that the user can tell quickly that the table is sorted by that column.

    Would this be any different than normal css for changing header as described in FAQ?

    Just missing something simple Im sure.

    Thanks

    https://wordpress.org/plugins/tablepress/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    Yes, some plain “Custom CSS” like

    .tablepress-id-22 thead th.column-7 {
      background-color: #ff0000;
    }

    should be sufficient here.

    Regards,
    Tobias

    Thread Starter Hockeyguy1925

    (@hockeyguy1925)

    Thanks Tobias,
    I guess I should specified more what I meant. The above css works fine, but would like the header of column 7 not to stay a certain color. So when the table loads, column 7 is sorted and the header is red. When a user clicks on another column to sort that column (column 8 for example) column 7 changes and column 8 changed to red.

    Probably just as simple.

    Morning Java has not kicked in.

    Thanks

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    ah, ok. That’s more tricky, as the CSS/JS can’t know that you have sorted the table beforehand already. For that, you would have to tell the JS library to also perform a sort on the already sorted column. For that, please try adding this to the “Custom Commands” textfield on the “Edit” screen of the table:

    "aaSorting": [[6,'desc']]

    (The 6 indicates 7th column, as counting starts with 0.)

    You won’t need the extra “Custom CSS” then.

    Regards,
    Tobias

    Thread Starter Hockeyguy1925

    (@hockeyguy1925)

    That works! Thank you Tobias!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Best wishes,
    Tobias

    Thread Starter Hockeyguy1925

    (@hockeyguy1925)

    Correct me if I am wrong on this Tobias, but after adding "aaSorting": [[6,'desc']] to custom commands, I then removed row_order="sort" row_order_sort_column="G" row_order_sort_direction="DESC" from the table short code. When I reloaded the table the sorting was still in place. Will I still need row order extension?

    Thanks as always for your quick responses.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    Hi,

    you are totally correct. You could actually turn off the Row Order Extension here.
    Depending on how big the table is and on how close the sorted version of the table is to the unsorted version, it doesn’t hurt to keep it though. That could help reduce the work that the JS library has to perform when doing that initial sort.

    Regards,
    Tobias

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Row Order’ is closed to new replies.