WP Table Manager documentation
- I. WP TABLE MANAGER INSTALL
- II. WP TABLE MANAGER COMMON USE
- III. STYLING TABLES
- IV. CHART FROM TABLES
- V. EXCEL AND GOOGLE SHEETS SYNC
- VI. WP TABLE MANAGER PARAMETERS
- VII. WP TABLE MANAGER TIPS ANS TRICKS
- VIII. TABLES FROM DATABASE
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.
- 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
In order to install our plugin you should use standard WordPress installer or unzip and put all the folder in /wp-content/plugin.
Then click on activate plugin, to see WP Media Folder menu appear on the WordPress left 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.
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
Then use your JoomUnited account login and password. After a successful login the button turns to blue with a text Disconnect my JoomUnited account
Then finally, you can update all the JoomUnited commercial plugins from the WordPress standard updated.
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
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:
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.
If you click on the area then on the WP Table Manager button again the table previously added will be loaded.
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
The category can be managed by putting your mouse on it, you’ll be able to edit the name or delete it.
To order the categories you can use drag’n drop feature.
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).
To add line or columns, click on the + on the table border, or use the right click!
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.
You have an option to undo the latest modification.
WP Table Manager keeps a backup of the modification you’ve done and is able to restore it.
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
Now when you edit the cell, you’ll have HTML editor inside. Image and HTML are available.
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.
2.5 Excel and spreadsheet import/export
You can import and export spreadsheet in WP Table Manager by using our dedicated tool.
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.
III. STYLING TABLES
The format tab is available at the right of your screen by default. It contains different parameters.
- 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
Borders and font options can be applied on single or multiple cells
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.
The 2 frame parameter is here to define the color of alternative lines (line1, line2, line1, line2...)
The sortable parameter allows you to make AJAX data sorting on frontend.
The table align is about align the div that contain the whole table, center all the table for example.
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
You can for a width in pixels. The edit tooltip will bring you to a tooltip with an editor to edit the tooltip.
Add content and save, you’re done, the tooltip will be displayed on public side on mouse hover.
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
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).
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.
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.
Example of filters
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.
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!
Cells, line, columns have coordinates to identify each one and apply custom css on it. R is row, C is column.
3.7 Responsive WordPress Tables
Are my tables responsive or use the scroll on small devices?
Droptables 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).
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)
Table with column hidden (better for a big amount of columns)
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.
Then make you selection in order to generate chart, here all the table is selected, click on Add a new chart.
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.
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.
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
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.
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).
Once your Excel file is linked to the table, you can hit the Fetch data button to import data from the Excel file.
Then here is the result of a data import.
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.
Then you'll get access to the Google Sheets file link, copy this link.
And paste into WP Table manager "Table" tab
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.
The synchronization delay can be set in the WP Table global configuration
VI. WP TABLE MANAGER 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
VII. WP TABLE MANAGER TIPS ANS TRICKS
You have a basic calculation implementation in WP Table Manager. Elements available are:
To make a sum, type like this: =SUM(A1;B2) or =SUM(A1:B2)
VIII. TABLES FROM DATABASE
WP Table Manager allows you create tables from your database tables (not only the WordPress tables but all databases).
From the admin, click on WP Table Manager > Database tables
Then you'll be able to select tables and columns from your database. By hiting control you can select several tables, columns.
On column selection you can define a custom title and a default order for your data in the table, when displayed on public side.
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
Finally you can preview and generate your table like 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.