Hi Celeste,

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. I would like to Remove “ :” after the responsive header, is there a Setting for it? Or is it possible to add a class to it in the next update so at least it can be targeted?

For the time being, the only solution would be to edit this file :

../wp-content/plugins/wpdatatables/assets/js/responsive/datatables.responsive.js

around line 126 find this :

this.rowLiTemplate = '<li><span class="columnTitle"><!--column title--></span>: <span class="columnValue"><!--column value--></span></li>';

In the middle of the code, after the first </span>  there is a colon ( : )

Delete the colon,  so now the line should look like this :

this.rowLiTemplate = '<li><span class="columnTitle"><!--column title--></span> <span class="columnValue"><!--column value--></span></li>';

and save this file.

Then in plugin settings/Custom JS and CSS  tad  ,  disable "Use minified wpDataTables Javascript" and then the colon ( : ) will get removed.

Here is a screenshot from one of my test Tables :

Just note, this will be affected during updates,

each time the plugin updates it will override what you've done here, so you would have to repeat the process, until our devs come up with a better solution in the future.

You can add a development suggestion to add a built-in option like this in the future, but we can't say a realistic ETA for it.

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.

Let me know if that might work, for the time being, as a custom workaround. 

2. There is no built-in way to move the expand button to the end of the row;

it is set by default to be all the way to the left side and at the moment we don't have any workaround.

If you have an idea what we could add to improve it, you can add another future improvement suggestion for our developers, the same way as explained above.

-

Right now, you can only try with a completely custom solution if you have coding skills, but our support can not cover that part.

But we will share how you can manipulate the styles of the button.

Here is an example that we generally made for the little  + expander button :

You can use this CSS selector on the page:

table.has-columns-hidden>tbody>tr>td>span.responsiveExpander, table.has-columns-hidden>tbody>tr.detail-show>td span.responsiveExpander {
padding: 10px !important;
}

And it will increase the size of that button.

-

For the background color of this element, try this :

table.has-columns-hidden > tbody > tr > td > span.responsiveExpander{  
  background-color : green !important;
}

This is how my table looks with the CSS :

You can add this to the table custom CSS, in Customize tab, of the table settings, and it should work.

Or if you need the same style in all tables, add the CSS in the main plugin settings/Custom JS and CSS/Custom CSS.

We are not able to change the + icon, but as you see, we can stylize it to a certain extent with CSS.

- Another way, if you wish to try how it looks when you remove the expander icon;

 If you choose the Responsive Action as "Row" in the Display settings of the table;

And also for the time being, to hide the + icon, we need to use CSS ;

You can either use this  :

span.responsiveExpander {
    
    visibility: hidden !important;
}

And this is going to kind of leave that 'room' the icon was taking up in the first column's cells,

and just hide visibility;

Or you can use this other variant to completely disable the element on front-end,

span.responsiveExpander {
    
    display: none !important;
}

You can either add this for one table,

in the table's Customize/Custom CSS,

or for all tables, in main Plugin settings/Custom JS and CSS/Custom CSS.

Let me know if that helps.