Hi, Bendix

Thanks for showing interest in our plugin.

- Regarding custom column width and word wrapping, there is indeed a workaround with custom CSS.

For example, for custom width ( with "limiting the table width to fit the window" disabled), you can add a custom CSS class to a column, ( I named it "customWidth " , just for this example, in the column setting) :

then, in Customize tab of the table settings, you can add Custom CSS ( you can choose to use px for pixels, or you can use %, so 25% would make that column take 25% width of the page; 

Also, you can apply this only to a specific table, by adding table ID into the CSS:

table.wpDataTableID-1 .customWidth {
display:flex
width:100px !important
}

- As for word wrapping, for example, if you need it in every column on the entire table, you can add this custom CSS:

 table.wpDataTable td { 
   white-space: normal !important;
}

2.

- Regarding the sorting on that percentage column of the cryptocurrencies rank example table, you are correct - the reason is, the column got set as a string, it should be float or integer, then sorting would work as it should - 

we did not notice it; thank you for pointing that out, we will fix it.

Hello, Bendix

Thank you for your purchase, and your kind words.

- We took a look and inspected the page;

For the first column "ID", we found the solution ;

there is some custom CSS that you have to change, and it should be OK

Change this to :

.wpDataTableID-1 .cw_ID {
    display: table-cell;
    width: 50px !important;
}

- and it will look like this :

- Now, for the "indicator" column, it is a bit more tricky; we found some custom CSS on that, too, but, our developers are now gonna take a closer look, and advise. I should be able to update you with new information pretty quick; as soon as they give it a go; I will come back to you.

We might have a problem using the text wrapping in the way we need specifically; ( in combination with all the other settings you need), but I will make sure to fully test it out with the developers, before confirming.

Sorry for the wait time.

- Hello again, Bendix

Apologies for the delayed response. Our developers took a closer look and tested every variation out for us.

Basically, at the beginning of the plugin, they allowed for all these settings to be available as built-in, a combination together; such as text wrapping, horizontal scrolling, etc...

 but at some point, they realised there were too many conflicts and undesired behaviours by combining white space wrapping, and horizontal scroll, so they removed certain combinations; 

now we tried to manually force them on the page, and as you can see, doesn't look good.

Unfortunately, seems like we won't be able to provide an ideal solution here.

Could you try this, please? Delete all the previous custom styles that we advised, and try these :

( double-check the correct table ID, and column class names. You will have to add a 'th.column-(column class name)' for each column that you need a custom width. And you can choose to use px for pixels, or % for the percentage of the page)

.wpDataTablesWrapper table.scroll.wpDataTableID-1 {   
   width: max-content !important;      
   table-layout: fixed !important;
}
.wpDataTableID-2671 th.column-id {   
   width:300px !important;
}
.wpDataTableID-2671 th.column-column-goalpolicy-strategy {   
    width:300px !important;
}

- we will do the best we can, and hopefully, find an acceptable solution for the look of your page.

Let me know how this looks when you apply the custom CSS.

Hi, Bendix

First of all, thank you very much for the kind words.

- 1. Could you try to give us more details about what you meant by decreasing the column width to be less than the column name/filter text allows? 

If I understood you correctly, it's possible that it can't be changed, but the devs might try to do something about that, just not sure that we understood fully.

;

2. Regarding making it easier to spot the column class; you can either use the "arrow inspector" tool, for example in Google Chrome, like on this screenshot, and you will see this class start with the word "column", then a "-" hyphen symbol. If you look at the "upper area", the bit where I select with the "arrow selector", you will notice a dot after the column name. So, everything between a hyphen and the dot is the column class. Screenshot here:

- Or, if you look at the HTML of the page itself, you will notice a space, after column class name; so between the hyphen and space; in this case, "space+sorting" comes after the column class.

Hopefully, that helps.