Block of collapsible rows in a table

  • Resolved kingleviathan

    (@kingleviathan)


    5 years, 5 months ago

    I created a table using tablepress. I’m aware there is a collapse row feature but I’m trying to do something more specific. I want to be able to expand and collapse blocks of rows.

    https://ibb.co/27Sxzdy
    So if you look in the image in the link.

    A) I want to click on the heading ‘loan cost and fee’ to expand and collapse the red highlighted rows.
    B) I want to be able to click on Lender qualification to expand and collapse the purple highlighted rows
    C) Same for blue and yellow.

    One important detail is that I am using [table id=166 responsive=scroll/] not collapse. This is because on mobile i want to see columns beyond the screen.

    • This topic was modified 5 years, 5 months ago by James Huff.
    • This topic was modified 5 years, 5 months ago by James Huff.
    • This topic was modified 5 years, 5 months ago by kingleviathan.
    • This topic was modified 5 years, 5 months ago by kingleviathan.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter kingleviathan

    (@kingleviathan)

    5 years, 5 months ago

    Also how can i left align the text in all cells in all tables?

    I found this online
    .tablepress {
    width: auto;
    margin: 0 auto 1em;
    }

    But dont know how to change it to left not center

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Unfortunately, I’m not aware of an easy way to achieve such collapsing of blocks of rows, sorry.
    Your best chance probably is to not create this as one big table, but only a few small ones that are then used inside collapsable containers (e.g. as the content section of an approach like https://tobias.baethge.com/2009/07/expandhide-accordion-feature-explained/

    To left-align the table cell text, please try using

    .tablepress tbody td {
  text-align: left;
}

    The CSS example that you posted is for centering a full table on the page.

    Regards,
    Tobias

    Regards,
    Tobias

    Thread Starter kingleviathan

    (@kingleviathan)

    5 years, 5 months ago

    Thanks Tobias

    1)
    I cut and paste
    .tablepress tbody td {
    text-align: left;
    }
    in tablepress plugin into front end option and styling CSS but it doesn’t seem to have worked. I assume it would work for all tables in the org?

    2.
    The Expand/Hide accordion suggestion would be pretty ugly with multiple tables as when you scroll across (using mobile) each table would not align with the columns in the table above / below. So will have to rethink my tables i guess.

    ON a side note – if you do use the Accordion solution – will you be able use DataTables FixedColumns Extension 1.6 to freeze the first column still?

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    5 years, 5 months ago

    Hi,

    1. It’s hard to tell why this is not working. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    2. Ok, I see. Yes, this would be a drawback, I guess.
    Unfortunately, using the FixedColumns in this situation will probably not work nicely. The main reason is that the calculations for the column widths are not really possible when the tables are collapsed. You could of course simply try it, maybe it works.

    Regards,
    Tobias

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

The topic ‘Block of collapsible rows in a table’ is closed to new replies.