Directory Table Responsive

  • Resolved tallonenx

    (@tallonenx)


    8 years, 6 months ago

    Great plugin.

    I’m having one problem though.
    I simply want to replicate a table very similar to the “Responsive table with the collapse mode” example table on your extension example-
    https://tablepress.org/extensions/responsive-tables/

    You say it is useful for making a directory table, and it appears you were able to do it, but I can’t get my excel data to show multiple rows under one column header like the example.

    Can anyone give me an example of what the table looks like for the example on that page so I can figure this out? Or can someone show me other “directory table” examples?

    Thanks!

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

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    thanks for your question, and sorry for the trouble.

    I’m not sure what you mean. You would just have to create a regular rectangular table. Each column contains the same data/information, and the rows are the different entries.

    The collapse functionality will then be added by the JavaScript code.

    Regards,
    Tobias

    Thread Starter tallonenx

    (@tallonenx)

    8 years, 6 months ago

    Thanks for the quick response.

    I see now that the example table simply puts rows into the collapsed area if they don’t fit at a certain size of screen.

    What we are looking for is to have one Category collapsible, with multiple rows under it. I made a mock up, but it just is a result of putting all the data in one column.

    http://www.mycivilservant.com/california/california-counties/butte-county/

    Maybe raising the cutoff (view size) for the collapse code could allow us
    to get a similar -but actual multi columns in the table- effect?

    • This reply was modified 8 years, 6 months ago by tallonenx.
    • This reply was modified 8 years, 6 months ago by tallonenx.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    if you just want to have a row to be expandable, you could use the very similar solution that is described at https://ww.wp.xz.cn/support/topic/how-to-expand-tablepress-row/#post-3741566

    Regards,
    Tobias

    Thread Starter tallonenx

    (@tallonenx)

    8 years, 6 months ago

    Thank you.

    That code did put the rows as expandable details,
    but the formatting it outputs is off-
    not every row of data has the same number of rows.

    IE the “Population” details are scrambled vs. the “Age and Sex” details are uniform.

    http://www.mycivilservant.com/california/california-counties/butte-county/

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    to maybe correct the layout, try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-ButteCountyStats2.tablepress-row-details tbody tr .row-details-right {
  float: none;
}
.tablepress-id-ButteCountyStats2.tablepress-row-details tbody tr .row-details-left {
  display: none;
}

    Regards,
    Tobias

    Thread Starter tallonenx

    (@tallonenx)

    8 years, 6 months ago

    Amazing!

    Thank you so much Tobias.

    Is there a way we can get that to just apply to all the tables on the site?

    • This reply was modified 8 years, 6 months ago by tallonenx.
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    8 years, 6 months ago

    Hi,

    yes, for that, change the CSS code to

    .tablepress.tablepress-row-details tbody tr .row-details-right {
  float: none;
}
.tablepress.tablepress-row-details tbody tr .row-details-left {
  display: none;
}

    Regards,
    Tobias

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

The topic ‘Directory Table Responsive’ is closed to new replies.