Okay
  Public Ticket #3068315
Filter to show certain columns before table loads
Closed

Comments

  • Anna started the conversation

    hi- I’m looking at purchasing the premium wpdatatables and the powerful filter add on. However one specification that would be really beneficial is the following, which I would like clarification on. If, for example, I have a table with three columns. The first columns lists product type. The second column list values from country x (call that column x) and the third column lists another set of values from country y (call that column y). Using powerful filters I want the table user to first select (before the table shows on screen) whether they want the values from column x or column y, and then the table populates based on that selection. So in other words a filter where you select whether whole columns are shown or not. I may be missing something but it does not seem possible. Is this correct?

    My other question is in relation to conditional formatting. I can see how to change the whole of the cell to a specific colour based on number value. Is there some way to only change the cell content (ie if it’s a number, to only change the colour of the digits / text and not the actual cell background ?)

    Finally is there a way to format the filtering section of the filters are separate from the table? I know you can change colour of the table, fonts, borders etc. I want to do that to the filtering sectioning. 

    thanks

  •  1,688
    Miloš replied


    Hi, Anna 

    Thanks for reaching out to us

    -

    1.

    You are correct about the first question.

    At this time, this is unfortunately not achievable with any of the functionalities in our plugin.

    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.

    -

    At this time ,we can hide the table with Powerful filters "hide table" feature;

     then a user would have to make certain filter selections, before the table loads;

    but each column can only filter its own values - we can not hide column Y based on column X filter selection.

    -

    For example, on this Documentation we made a classic example of filtering prices depending on the country selected;

    5826725780.png


    If someone selects country "Italy", it is just going to filter the price for that country, like this:

    6475182386.png

    -

    But if you need to hide entire columns, based on filter selection, that is currently not possible. Perhaps in the future, we will work to add a possibility.

    -

    2.


    If you need to change any styles of a column contents, you can set a conditional , to add a CSS custom class, if a condition is met.

    On my example, i will say, if number equals 1, set CSS class of "classGreeen".

    8325622812.png

    Then, if i want to change text color only in the cells that match the condition, this is the CSS i add to the table in Customize tab:

    1329530600.png

    Basically, after this "td"  which selects the table data in a row;  we add the CSS class and set the text color:

    tbody > tr > td.classGreen{
        color:blue !important;
    }
    

    I set it first to green, but it was not very visible, compared to this black color of other text, so changed it to blue, just to see the difference.

    - Let me know if that helps.

    3.

    Not sure if i understood this one.

    If you wish to have separate styling of the filter section, best will be to separate them , and set above table, with this selection:

    4999078012.png

    Then we can use various CSS selectors, depending what you need to style.

    For example, this selector :

    .wpDataTablesFilter .wpDataTableFilterSection:not(#wdt-clear-filters-button-block):not(#wdt-pf-search-filters-button-block) {
        float: left;
        margin-bottom: 10px;
        margin-right: 15px;
        width: 230px;
        min-height: 115px;
    }
    
    3011996412.png


    Here you can change some styles, and add new properties as you need.

    This is selecting all the HTML Divs that hold individual filter boxes;

    .wpDataTablesFilter .wpDataTableFilterSection#wdt-clear-filters-button-block {
        display: inline-block;
        margin-bottom: 0px;
        padding-top: 42px;
    }
    

    That one is for the "clear filters" DIV.

    -

    Let me know if that helped, and if you have any questions. Thank you

    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