fbpx

WP Table Manager: Styling Tables

1. Format

On the toolbar, you can set style for cell such as: font, font size, text style, background color for cell, text color, cell horizontal and vertical aligment, ... It can be applied for a single cell or multi cells

 

style-table

 

The row height and column width can be defined in pixels. Please go to Menu Format > Apply column/line size, then select Resize column / Resize row. On the popup window, you can select range and set px for columns or rows. Click on Done buton to finish.

 

resize-column

 

2. Theme and sorting options

In each table, you can find Theme selection option at Menu Theme. 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 to create your own theme then duplicate your tables.

 

theme-choice

 

On the same Menu Theme > Alternate colors, 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.

 

theme-alter-color

 

The sortable parameter allows you to make AJAX data sorting on frontend. You can see on Menu Format > Sort.

 

sort-table

 

The table align is about align the div that contain the whole table, center all the table for example. You can find at Menu Format > Table align.

 

table-align

 

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

 

table-highlight

 

3. Add tooltip on cells

On each cell on a table, you can see the Add tooltip option when doing a right click on it.

 

add-tooltip

 

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

 

tooltip-editor

 

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

 

tooltip-hover

 

4. Row and column freezing

Column freezing

Column freezing is available in the Menu Format > Responsive options. You can freeze up to 5 columns. It's counted from the first col.

 

freeze-line

 

To make col/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).

 

table-height

 

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

 

fix-line-displaying

Row freezing

You can find it at Menu Format > Table header, from here you can turn on option and set rows to freeze (up to 5 rows).

 

table-header

 

If you want to set the table height, please turn back to Responsive options.

Then the first row will be freezed on frontend following the setting.

 

row-freeze

 

5. Filtering column data

A filtering option is available at Menu Format > Filters. You can activate it by clicking to enable public data filtering fields.

 

filter-column

 

Example of filters:

 

responsive-table-scroll

 

6. Cell padding and border radius

You can find the border icon on toolbar helps adjust padding and border radius on cell.

 

padding-border

 

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

 

7. Custom CSS

Let’s go one step beyond. If you’re a web designer with css skills you’ll be able to add css at Menu Format > Custom CSS. 

 

format-custom-css

 

The CSS code is colored using code mirror and can be written 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

 

8. 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). In order to use Hiding Cols option, you should go to Menu Format > Responsive options.

 

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

 

9. 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

 

10. Pagination

You can find this feature at Menu > Format tab in each table. Use toggle button to enable and pick the number of rows to display in a page.

 

pagination-wptm