For coloring rows, make sure that you first check how to use conditional formatting (highlighting) in this documentation section.
For changing the general design look and feel of the table elements check the plugin configuration page.
By default each column in wpDataTables has same CSS classes applied and has a same look, but you can always style and color the columns as you need.
Sometimes it is handy to have right-align for numeric columns, especially if you have large numbers in your table. This feature is supported out-of-the-box – to enable it you’d just need to tick the “Align numbers to the right” checkbox in the wpDataTables settings page – then all of the numbers in all tables will be right-aligned.
Individual coloring and styling columnsHow to define specific colors and styles for individual columns
“Coloring columns” is also very simple – there is a color picker in each column settings panel. Just pick the color that you want in the colorpicker, save the table, and you will see the columns colored in the table front-end.
You can see at this table on the left that we applied three different colors for each type of fruit. For “Apple” column we set green color, “Oranges” orange color and for “Bananas” the yellow one.
Sometimes it’s not only the color that you would like to change – it’s necessary to apply some specific styling rules for some of the columns – e.g. different font, margins, etc. For this there is a “CSS class(es)” input for each column. You can define one or more CSS classes there, separated with a space. You can enter column configuration by clicking on “Column settings” button or by clicking “Complete column list” button from where you can open column configuration for each column.
Then you can define any specific CSS rules for the columns, either in theme’s CSS (whether in files or theme settings), page CSS (e.g. if you’re using Visual Constructor), or wpDataTables Custom CSS block in the Settings page.
Then when you insert this table in the front-end you will see the styling applied.
- Creating editable tables and filling the table data manually
- Creating non-editable tables from Excel files
- Creating non-editable tables from Google Spreadsheets
- String columns
- Integer columns
- Float columns
- Date columns
- DateTime columns
- Time columns
- Image columns
- URL link columns
- E-mail link columns
- Currency/price columns
- Formula (calculated) columns
- Hiding columns