Okay
  Public Ticket #3520397
Responsive Table Optio ns
Closed

Comments

  • Dick started the conversation

    I want the table to have a horizontal scrollbar on laptop and larger screens and I want the collapsed stack layout on mobile and tablet. How can I make table do both?

  •  1,689
    Miloš replied

    Hello,

    Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

    -

    1. If you need to use a Simple Table Type for this use-case;

    Then it is not possible at the moment to have the table enabled for the Responsive behaviour;

    while also having a horizontal Scroll at the same time.

    9732547605.png

    Enabling the responsive mode basically pivots columns into rows. If you don’t enable the option to use the first row as table header, each cell will be located in a separate row.

    When column headers are enabled, on tablets and mobiles the table is split into 2 columns and as many rows as there are columns, only repeated for every new row in the table. For example, when Responsive mode and column headers are enabled, the table will look like this on tablets and mobiles.

    -

    So, if you wish to enable the 'Horizontal Scrollbar' in a Simple Table, then the 'Basic responsive' option will become disabled and vice-versa.

    At the moment, we do not have a way to combine having both - or for example, one for Desktops /larger screens, and the other for mobile and Tablet;

    But it is an interesting idea for a future feature.

    Please feel free to search on our suggestions page

     to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there,  and as more people vote, the feature will move higher on the priority list.

    You can certainly follow our changeLog page if you'd like ( it is also available in the plugin dashboard), where we state any changes/new features/bug fixes during updates;

    and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

    -


    2. If you decide to try with another Table type, other than Simple Tables, then you will be able to use the Responsiveness feature, where you can choose to collapse some columns to be hidden on mobile/tablet screens;

    and have them revealed on icon click/row click/ or cell click;

    While also having the Horizontal Scroll at the same time.

    5652674367.png


    Here is my example table, how it looks for Desktop screen with horizontal scroll;

    8047046857.png

    And how it looks on a mobile screen with the Responsiveness/collapsed columns on mobile

    6890577211.png


    2315474860.png
    6636657052.png


    I hope that helps.


    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables