Support » Plugin: TablePress » Can I add a header in the responsive tables stack mode?

  • Resolved best6699

    (@best6699)


    Hi Tobias,

    I am using the responisve tables stack mode and would like to add the table header. When you see the table on the mobile no header is displayed. This complicates the allocation of the content for the reader.
    Is there any solution for that?

    Regards,
    Bernd

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    No, sorry, the stack mode does not support a header at the moment. The header row would be shown in the same way (stacking) as the other rows, but above all of them – which simply doesn’t make sense.

    Regards,
    Tobias

    Hi Tobias,
    thanks for your reply.
    It would even help me when the header row is displayed in the same was as the other rows. By changing the colours (for each column) the user could distinguish the content.
    Would this be possible?
    Regards,
    Bernd

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Bernd,

    you could make the header visible again, by adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    @media (max-width: 767px) {
        .tablepress-id-1 thead {
            display: table-header-group !important;
        }    
        .tablepress-id-1 thead th {
            display: block;
            width: 100% !important;
        }
    }

    Regards,
    Tobias

    Hi Tobias,

    thankk you.
    Regards,
    Bernd

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem!

    Best wishes,
    Tobias

    It would be great if could add a function to add the header in the stack mode. I think @best6699 means that the header row would be shown not above the other rows (with content) but next the (content) rows and repeat for every (content) row.
    Like this:
    Header row – Content row
    Header row – Content row
    Header row – Content row
    So we would create a stack table with 2 columns.
    Is this somehow possible to do with CSS?

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi asurus,

    I see what you mean, but unfortunately, I’m not aware of an easy solution for this that only uses CSS 🙁 Sorry.

    Regards,
    Tobias

    Hi Tobias,
    understand and thank you for your reply.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    sure, no problem! Sorry that I could not help with a solution here.

    Regards,
    Tobias

    Hey Tobias 🙂

    What about the other table-plugins? Does they have solutions with others technics than css?
    E.g. NinjaTables (and many more) have this kind of responsive tables. I’m convinced, that this is this best method to display tables on mobile devices.

    Maybe these example can give you an idea, how it is possible?
    See:
    https://wpmanageninja.com/ninja-tables/use-case/

    • This reply was modified 2 months, 3 weeks ago by nyks-barton.
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link to that example! This does indeed look nice! Unfortunately, it’s also a rather complex approach, with quite a lot of JavaScript code involved. I prefer simple solutions here, as they are usually working much better and more reliable on a wide range of sites and themes. I’ll however take a deeper look into this one, maybe I can extract some approaches and ideas. Thanks!

    Regards,
    Tobias

    Thanks, that would be nice.

    The 1st example-table on that page is nicely stacking (when with gets low).

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, it’s indeed nice! I hope to be able to offer more such options in the future!

    Best wishes,
    Tobias

    Hi Tobias,

    Here’s the solution of what best6699 said: https://deeptownguide.com/Buildings/Details/7/smelting.

    Responsive tables in stack mode take the column header and put it at every row before the content.

    It would be great to see that in future updates.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    unfortunately, this is not yet directly possible, as it requires extra HTML markup. I hope to be able to add this in the future.

    Best wishes,
    Tobias

Viewing 15 replies - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.