Okay
  Public Ticket #3412134
Creating stylish list
Closed

Comments

  • Stefan started the conversation

    Hello,


    Is it possible to create a stylish list with checkmarks etc....

    Attached files:  Screen Shot 2023-07-12 at 12.21.02.png

  •  1,689
    Miloš replied


    Hi, Stefan.

    Currently, we don't have a built-in solution to create something like a "to-do" checklist / "mark as complete" without having to edit the table.

    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.

    -

    The closest we can get to a "to-do check list", is to make an editable column, that will have two possible values, with a one value selectbox for editing.

    In this example, we will call values "to do", and "complete".

    We will additionally add custom CSS, to change the look, depending on the value.

    Here is how the table will look :

    4771064961.png

    First, we will set available values manually, for the column, in the Data Tab:

    5877158066.png

    Then, in the Editing Tab, we set Editor Type as Single value selectbox , with a predefined value of "to do".  Then each new row will be set as "to do" by default, until we change to "complete".

    6249004222.png

    ( * The editing can be set in a modal, and as in-line editing. )

    -

    Now, we add some Conditional Rules, to change the content to a green checkbox, if the value is "complete";

    and, for example - change cell to red color if "to do".

    4873687758.png

    This is the custom HTML for "set cell content" of "complete"  :

    <div class="checkmark"></div>
    

    Then we use this custom CSS to make it look like a green checked box  :

    .checkmark {    display: inline-block; 
        transform: rotate(45deg);  
       height: 16px;   
      width: 10px;   
      border-bottom: 7px solid #78b13f; 
        border-right: 7px solid #78b13f;
    }
    

    - We add the custom CSS in the table Customize tab, like so :

    9354970377.png

    -

    I hope this will help. :)

    In the end, since on your example there are no borders,

    you can also remove the borders in our Tables.

    Please check more how you can Customize Tables here.

    And here you can see more basics on adding CSS to our tables.

    -

    And i just wanted to point out that you can try wpDataTables before purchasing

     on our sandbox Demo sites ( you can find links for the main plugin Demo,  

    as well as add-on Demos, in my signature),

    and there is a 15-day money-back guarantee period, 

    so if you purchase the plugin, you can safely fully test it out, and if it doesn't fit your needs you can request and receive a refund in that period. ( same goes for all plugins and add-ons)

    Let me know if you have any additional questions. smile.png



    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

  • Stefan replied

    Thank you Milos!

  •  1,689
    Miloš replied

    Hi, Stefan

    You're welcome.

    Anything else that we could assist with, please don't hesitate to create new tickets.

    Have a great day!smile.png

    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