Hi, Justin

Thanks for reaching out to us.

-

No problem at all, I am happy to help as much as our support can cover.

We can advise you on some basic styling to get you started in the right direction.

Can you send the access to this Google Spreadsheet, or you can make an example Sheet with just the column structure and some "sample data" in the cells,

then send me access, and if you can elaborate a bit more on the styling.

-

Basically, Google Spreadsheets can not pass any style formatting to our tables, they can just pass values and table structure.

But you can add a lot of styling through some built-in options in our plugin,

and you can add custom CSS as well.

Please check this page to see the built-in customization options, such as selecting a preconfigured table skin that already has some colors set,

also check here on some basics how you can add some coloring and styling to columns.

-

Regarding centering table text,

for string columns, you can use this property : ' text-align: center; '

You can use the same method in naming the CSS class for any columns you need,

for example if you add a class of "centreText" to a column, then later you can call this CSS :

.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-10 tbody td.centreText {
    text-align: center;
}

Just change the table ID to your table ID.

If you need the style only for one specific table, add this to the table's Customize/Custom CSS;

or remove this part ".wpDataTableID-10" if you want the same style for all tables,

then you can add the CSS to main column settings/Custom JS and CSS/Custom CSS)

-

For numeric columns, you can go to main plugin settings/Align numbers

This is a "default global setting" where you can choose if the numbers should align left or right.

-

If you need your numeric columns to all have text aligned to center, you can use this CSS:

.wpDataTablesWrapper table.wpDataTable td.numdata, 
.wpDataTablesWrapper table.wpDataTable th.numdata
{
 text-align: center !important; 
}

-

For making text bold, if you want all text in table to be bold :

.wpDataTablesWrapper table.wpDataTable td.numdata, 
.wpDataTablesWrapper table.wpDataTable th.numdata
{ font-weight: bold; 
}

You can use this same logic/method to add any styling you need with CSS.

Here you can see useful tutorials about various CSS styles and how to apply them : https://www.w3schools.com/css/

Let me know if that helps and if you have any additional questions.

Hi, Justin.

You're welcome, i am happy to help.

1. A 1px solid border in #585F80 colour around every cell - header and table contents :

You can use this CSS ( i added it to this table's Customize/Custom CSS now) :

.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-30 > thead > tr > th {
    border: 1px solid #585F80 !important;
}
.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-30 > tbody > tr > td {
    border: 1px solid #585F80 !important;
}

Just to check the table ID, on this page i see a table ID 30 under the Dimensions section, i guess that is the one.

If not, you can just change the Table ID to the right one and it should work.

2. Bold font (weight 600) in #585F80 colour for the Header Row and the text in the first two columns :

Added a CSS class to first two columns named "boldfont", then added this to the table's Customize/Custom CSS :

.boldfont {
font-weight: bold!important;
}

3. The same row height for the Header row as is for the rest of the table rows:

I added a line-height property to the Header row, in the same CSS selector as above,

but i can't get exactly the same height, it seems.

You can manipulate/change that value until it reaches the height as you wish.

.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-30 > thead > tr > th {
    line-height: 2.2 !important;
}

Or alternatively, we can force a fixed "height" value for the entire Header row, it seems that the cells have height of 17, plus padding 15, which is 32 px in total, so we can set this for header :

.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-30 > thead > tr > th {
    height: 49px!important;
}

So, you can "play around" either with the height or with line-height until you reach the desired Header row height.

4. There don't need to be any mouse-over actions, i.e. row highlighting or column ordering :

For the row highlighting on hover, you can add this CSS, and it will not change the background color on rows on hover :

.wpdt-c .wpDataTablesWrapper table.wpDataTable.wpDataTableID-30 > tbody > tr:hover > td {
    background: none !important;
}

5.  We will check about these two points, 

and i will report back about that :

-Search in a Cascade Filter
-Parse Column Filter Values into table from an external URL

Let me know how it goes with the other CSS points in the meantime, check out how the table looks now on the front-end.

Thank you.

Hi, Justin.

I think i just missed one detail.

In #4, when you wrote that there should not be any column ordering,

did you mean like when someone wants to sort the table by any column, for example the "mouse over" the headers allows users to click into it to sort?

I see that you already disabled all sorting on back-end - but i don't currently have a solution to change the cursor pointer to "not look as clickable" while hovering over headers.

That is maybe something we should improve in the future, for this type of use-case.

If  you can confirm that is what you meant by this, and i will pass it as an improvement suggestion for our developers?

Thank you.  ( I will still report back on the last 2 points/questions)