WP Table Manager: Styling Tables

1. Format

The format tab is available at the right of your screen by default. It contains different parameters.

 

image31

 

  • Cell type: default or HTML. The default type allows you to make calculation with it the HTML inserting HTML content like images. A WYSIWYG editor for every cell will be implemented in the next version, for the moment you add HTML in the cell.
  • Cell background color: defining background color of course

 

image32

 

Borders and font options can be applied on single or multiple cells

 

image33

 

The row and column width can be defined in pixels. Select column or row anywhere in the table and validate size.

 

2. Theme and sorting options

On the table tab, still on the right part, you have a theme chooser. Just click on a theme to apply it.

Applying a theme will replace all the data and style inside your table. So the way to proceed is to apply a theme then edit data ot create your own theme then duplicate your tables.

 

theme-choice

 

The "Automatic styling feature: helps you color the line on your table with Header styling and Footer styling options. You can select the template styles or make your own at plugin settings.

 

image35

 

The sortable parameter allows you to make AJAX data sorting on frontend.

 

image36

 

The table align is about align the div that contain the whole table, center all the table for example.

 

image37

 

A cell hightlight is also available as an option. You can enable this feature in the configuration. It is disabled by default. You can select highlight rowadjust color and opacity of highlighting.

 

table-highlight

 

3. Add tooltip on cells

Cell tooltips have to be activated from the plugin configuration (Configuration menu). After activation you’ll get a button at the bottom of the Format tab during the table edition.

 

image39

 

You can for a width in pixels. The edit tooltip will bring you to a tooltip with an editor to edit the tooltip.

 

tooltip-editor

 

Add content and save, you’re done, the tooltip will be displayed on public side on mouse hover.

 

tooltip-hover

 

4. Line and column freezing

Line or column freezing are available in the Table tab. You can freeze up to 5 lines or columns. It's counted from the first row/col.

 

freeze-line

 

To make row freezing there’s an additional option that let you fix the height of the table (because your table container may have an infinite height).

 

freeze-row

 

When you have chosen the line or column to freeze, you’ll be able to scroll on your table and always displaying the fixed line/rows.

 

fix-line-displaying

 

5. Filtering column data

A filtering option is available in the table tab again. You can activate it to enable public data filtering fields.

 

filter-column

Example of filters:

 

responsive-table-scroll

 

6. Custom CSS

Let’s go one step beyond. If you’re a webdesigner with css skills you’ll be able to add css in the More tab. You can add padding and border radius on cell.

 

image47

 

Note that if you’ve applied a theme, some custom css will be added automatically. You can still edit it of course.

 

Still on the More tab, click on the custom CSS button to access to css edition. The CSS code is colored using code mirror and can be writed in less CSS, it works too!

 

custom-table-css

 

Cells, line, columns have coordinates to identify each one and apply custom css on it. R is row, C is column.

 

css-displaying

 

7. Responsive WordPress Tables

Are my tables responsive or use the scroll on small devices?

WP Table Manager handle the responsive design with a priority tool, as an option. By default the responsive feature is disabled, there will be an overflow (witch is working great on mobile though).

 

responsive-mode

 

The responsive mode is advanced, you can define a priority for hiding columns on mobile sizes. When columns are hidden, a mobile menu with check box will be displayed to force the display/hide of columns. 
The column size is fixed during the table edition. If the size of all the columns is too large for the container you'll have an overflow and you'll be able to easily scroll on mobile devices.

Table with a scroll (better for a small amount of columns)

 

responsive-table-scroll

 

Table with column hidden (better for a big amount of columns)

 

57bb0cb0ac948

 

8. Download table

In order to share your table to public, you should enable Download button option at Table tab on the right panel. The file type will be  *.xlsx.

 

download-table

 

9. Pagination

You can find this feature at Table tab in each table. Enable and pick the number of rows to display in a page.

 

pagination-wptm