WP Table Manager documentation

Introduction

WP Table Manager is a WordPress extension used to manages HTML tables in WordPress with a spreadsheet like interface. It comes as a single package all themes are included.

WP-Table-Manager

Main advantages:

  • Manage tables like in a spreadsheet
  • 6 themes included
  • Fully managed from any editor
  • AJAX automatic saving
  • Sortable data on frontend
  • Cell, line, column style editor
  • Resize line and column with drag'n drop
  • Copy cell with drag'n drop
  • Copy the full table in one click
  • HTML cells format
  • Advanced CSS code editor

 

I. WP TABLE MANAGER INSTALL

1.1 Install

 

In order to install our plugin you should use standard WordPress installer or unzip and put all the folder in /wp-content/plugin.

install-wp-media-folder

 

Then click on activate plugin, to see WP Media Folder menu appear on the WordPress left menu.

WP Table manager  is accessible from a dedicated left menu or in a lightbox from the editor. You also have the parameters under the "Configuration" menu.

 

1.2 Update the plugin

In order to update the WP Media Folder, you can use the WordPress default updater. You can also remove and install the new version from a .zip file downloaded on www.joomunited.com. In any case you won’t lose any content because everything is database stored.

update-notification

 

Be sure to always have the latest version to avoid security and stability problem.

To update the paid version, you need to login to your JoomUnited account from the WordPress settings: Settings > General

 

link-account

 

Then use your JoomUnited account login and password. After a successful login the button turns to blue with a text Disconnect my JoomUnited account

image9

 

Then finally, you can update all the JoomUnited commercial plugins from the WordPress standard updated.

image10

 

II. WP TABLE MANAGER COMMON USE

The main idea of WP Table Manager is to manage all the tables from editor although you have a plugin view. WP Table Manager works on every WordPress WYSIWYG editor, both for frontend and backend. For example you can use it in a custom WordPress module.
 

2.1 Manage tables from article

 

table-manager-button

When WP Table Manager is installed you have an editor button that is displayed bellow your editor. Click on it to open the main WP Table Manager view.

Table manager in a lightbox opened from a post:

image14

 

When you want to insert a table in your editor use the top right button Insert this table to put it in your article. Then, the table will be materialized with a grey area and an Excel like icon.

image15

 

If you click on the area then on the WP Table Manager button again the table previously added will be loaded.

image16

 

2.2 Manage tables and categories

Tables are classified inside categories. You can have as much tables as you want inside categories.

In order to create a table category, click on New category in the left column. To create a new table just click on the link Add new table

table-category

 

Note: a default category and table is already created during plugin install

 

The category can be managed by putting your mouse on it, you’ll be able to edit the name or delete it.

image18

 

To order the categories you can use drag’n drop feature.

image19

Putting your mouse on the table title will make appear icons to edit the table title, copy the table (all the table including data and template) or trash it.

 

2.3 Table edition

To add data in tables you have to act like you are in a spreadsheat. Double click on a cell will bring you the possibility to update content, a single click to select one/some cells (and to apply style for example).

image20

 

To add line or columns, click on the + on the table border, or use the right click!

add-row-line

To copy cells you can use CTRL+C / CTRL+V (or the apple stuff that does the same J) or you can also put your mouse on the bottom right corner of the cell and bring it into the direction you want.

cell-copy

 

Note that all you’re doing is saved automatically with a message on the top right

 

You have an option to undo the latest modification.

image24

 

WP Table Manager keeps a backup of the modification you’ve done and is able to restore it.

image25

 

 

2.4 Advanced content edition

You can add HTML content with a WYSIWYG editor inside each cell. Select a cell, on the right part Format > HTML

image26

Now when you edit the cell, you’ll have HTML editor inside. Image and HTML are available.

html-table-cell

 

The cells can also be merged. Select 2 cells or more then do a right click, a menu will allows you to do the merging.

image28

 

2.5 Excel and spreadsheet import/export

You can import and export spreadsheet in WP Table Manager by using our dedicated tool.

image29

 

The tables can be imported from excel or open office documents. The format will be detected automatically and imported. Note that only the first Excel page will be imported.

The export can be done in Excel 2003 or 2007 format.

image30

 

 

III. STYLING TABLES

3.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.
  • The cell background is about 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.

 

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

 

image34

The 2 frame parameter is here to define the color of alternative lines (line1, line2, line1, line2...)

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

 

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

image40

 

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

image41

 

 

3.4 Line and column freezing

Line or column freezing are available in the Table tab. You can freeze up to 5 line or rows

image42

 

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

image43

 

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.

image44

 

3.5 Filtering column data

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

image45

Example of filters

responsive-table-scroll

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

image49

 

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

 

IV. CHART FROM TABLES

4.1 Create a table with data

 

Since the version 2.0 you have now the possibility to add charts inside your content. First create a table with data to generate chart.

image50

Then make you selection in order to generate chart, here all the table is selected, click on Add a new chart.

image51

 

A chart will be generated, respecting the data range you’ve selected. On the right part you can select the table type. You can generate as graph as you need from a data set.

image52

 

The graph will be dynamically updated regarding the data change in the table.

 

4.2 Graph parameters

Once your graph is added you have some options on the right column.

image53

 

The “switch row/column” is only available is you have selected only numbers in the dataset. You’ll be allowed to switch data from col to row.

The “Use first row/column as labels” param allows you to add label to your graph

image54

 

Then you have options to set width/height, align, color to your chart.

 

V. EXCEL AND GOOGLE SHEETS SYNC

5.1 Sync a table with an Excel file data

It is possible to run a synchronization between a table you've created and an Excel file located on your server (anywhere). From the right tab named "Table", at the bottom you got a block to link an Excel file to the table.

link-to-Excel


If you click on the Browse button, you'll be able to select an Excel anywhere on your server, here it's a file uploaded through the media manager (/uploads folder).

link-excel-file-table

 

Once your Excel file is linked to the table, you can hit the Fetch data button to import data from the Excel file.

Note: Only the data will be taken from Excel, not the styles, so the global style of your table will remain untouched on import.

fetch-excel-data

 

Warning: depending of your memory available on your server, you won't be able to import very large Excel files (more than 1000 rows for example)

Then here is the result of a data import.

Excel-Google-sheets-synchronization

 

5.2 Synchronization with Google Sheets

WP Table Manager also offers some Google Sheets synchronization possibility. Your Google sheet has to be published to be synchronized. So first, open your sheet fromm Google Drive and publish it as web page using the File menu.

publish-web-google-sheets

 

Then you'll get access to the Google Sheets file link, copy this link.

link-sheet

 

And paste into WP Table manager "Table" tab

link-to-Excel

You're done! you can now fetch data from your Google Sheet.

 

5.3 Automatic Excel and Google Sheets sync

Above the file link you can also activate an automatic synchronization. WP Table Manager will fetch the data automatically at a regular interval.

Once it's activated a notification is displayed after the table title.

google-sheet-sync-notice

 

The synchronization delay can be set in the WP Table global configuration

sync-period

 

 

VI. WP TABLE MANAGER PARAMETERS

6.1 Parameters

To access the WP Table Manager, go in WP Table Manager > Configuration

As option you can define:

  • Enable Import/Export buttons
  • Setup importation format
  • Enable the cell tooltip option
  • Enable the auto save or activate a manual saving button

 

image55

 

VII. WP TABLE MANAGER TIPS ANS TRICKS

7.1 Calculation

You have a basic calculation implementation in WP Table Manager. Elements available are:

  • SUM
  • COUNT
  • CONCAT
  • MIN
  • MAX
  • AVG      

 

To make a sum, type like this: =SUM(A1;B2) or =SUM(A1:B2)

sum-calculation

 

VIII. TABLES FROM DATABASE

WP Table Manager allows you create tables from your database tables.

From the admin, click on WP Table Manager > Database tables

2016-07-19-112124-

 

Then you'll be able to select tables and columns from your database. By hiting control you can select several tables, columns.

database-selection

 

On column selection you can define a custom title and a default order for your data in the table, when displayed on public side.

column-titleandordering

 

Then you got some options and filter to apply to your tables:

  • A pagination default level (to be used with a large amount of data)
  • Number of rows for the pagination
  • Apply some filter to your data ie. a column can be equal, different... from a defined value
  • The possibility to group some values in the columns

 

database-table-options

 

Finally you can preview and generate your table like any other table.

The only difference is that themes cannot be applied on tables but you can customize all the display like in any other table.

 

When your table is generated you will still have access to the table Database source and you can for example add a column in your table.

database-table-generated