Okay
  Public Ticket #1199480
How to create discreet "drop-downs" for each row
Closed

Comments

  • Henry started the conversation

    Please see related URL - ITU "Elite Men" table. See first column with a "burger-menu" button in each row under first column.


    I'd like to be able to create discreet "drop-downs" as featured here - where you click on the burger menu and it produces it's own discreet set of rows that are like "child" rows for that row - these are then able to present further drill-down information - in this case it is called "Scoring Breakdown" listing individual races that support the data in the "parent" row.

    Please see screenshot attached. 

    Please can you tell me if this is possible using WPDatatables!! This would be absolutely brilliant feature if it is doable!!! Much appreciated in advance - thank you for a great product!


  •  1,708
    Miloš replied

    Hi Henry,
    Thank you for your purchase.

    We are glad that you are satisfied with our product.

    Unfortunately something like this is not possible with the plugin build in and it requires some code customization.

    I can give you some workaround so maybe it can help you out.
    For that table check Responsive option in Additional settings. 
    For that columns, that you want to be displayed in the drop down, in Optional column setup choose Hide on mobile option.
    Then go to wpdatatables Settings page and increase the mobile width to, for example, 3000px, 
    In that case you will get the "+" sign and when you click on it the data for that columns will be displayed.

    You can find more about responsive tables here in our documentation.
    Hope this can help you out.

    Also keep in mind that this is just a workaround and that we have some plans for future versions of our plugin to implement feature like this.

    Best regards.

    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

  • Henry replied

    Hey Bogdan - many thanks for the workaround! Works great! (Obviously look forward to this feature in future devs!) Only question: Can I have multiple columns in the "+" sign drop down, ie: if I select the hide on mobile option -- I will give it a go in any case. Also - where can I find the option to "zebra-stripe" each row in the table and choose a shade of grey/blue etc so that its easy to read the table. Thanks again!

  •  1,708
    Miloš replied

    Hi Henry,

    You can hide multiple columns and that columns will be under the one "+" sign.

    About the coloring:
    Please check in wpdatatables settings page options for color and font settings like from the attachment, 

    Best regards.

    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

  •   Henry replied privately
  •  1,708
    Miloš replied

    Hi Henry,


    Can you please provide me a temporary WP-admin login for your site where this happens, so we could log in and take a look ‘from the inside’ as that’s the most efficient way to see and resolve the issue. We do not interfere with any data or anything else except for the plugin (in case that’s a production version of the site), and of course we do not provide login data to third party. You can write credentials here just check Private Reply so nobody can see them except us.

    Also point me to the table ID so I can take a look and try to make some example with "+" sign because as I can see from your link none of the columns are "hidden".

    "Is there any way of taking the relevant JS and CSS from a site like this and copying into the "Custom JS" and "Custom CSS" boxes so that each "row" effectively has its own JS and CSS action that could achieve this effect? Is something like this possible with custom JS/CSS?
    "

    Sorry but something like this is not possible to achieve.

    Best regards.

    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