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.
 

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

 

However, Gutenberg is the default editor in WordPress now, so you can take a look at 2.7 Blocks in Gutenberg

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 table category button on the dashboard header. To create a new table just click on Create table button.

 

table-categories

 

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.

 

table-name

 

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

 

table-move

 

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.

 

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 lines 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

 

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.

 

merge-cells

 

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

 

 

6. Shortcode

Each table has its shortcode, you can find at More tab on the right panel. Then you can share the table easily using the shortcode, e.g: [wptm id=8]

 

shortcode

 

7. Blocks in Gutenberg

You can show your tables or charts in Gutenberg editor now. These two WP Table Manager blocks are WP Table Manager and WP Table Manager Chart.

In order to display a table in Gutenberg editor, clicking the WP Table Manager button in the Widgets category. There will be a dropdown menu appears, then you select the table you want to show in frontend.

 

add-table-block

 

It's similar to a chart, clicking the WP Table Manager Chart button in the Widgets category. Then you pick one chart on dropdown menu.

 

add-chart-block