Creating tables is a great way to display data on your WordPress site. With Gutenberg, there is a table block that will allow for basic tables to be inserted into the page. However, the tables are set to the page they live on and there is no option for importing CSV meaning tables can only be created manually.
The TablePress plugin eliminates these issues. This plugin is used to display tabular data on the page. It allows tables to live on the site’s backend and be embedded onto multiple pages through shortcodes. It also has an option for importing CSV files to prefill tables. These features allow for the easy creation of tables and enable the developers to hold tables in the library for future use.
Getting Started
To get started, download and install TablePress on your WordPress site.
Option 1: Search for TablePress. Click Install Now and Activate.
Begin by navigating to Plugins on the dashboard and click Add New. From here, there are two options for installation.
Option 2: Go to the plugin page, download the zip file, and upload it into the designated section under Upload Plugin.
*Check if the plugin was successfully installed and activated under Installed Plugins.
Create Table
Use one of the following two methods to create a new table.
Option 1: Navigate to TablePress on the sidebar. Hover over and click Add New Table.
Option 2: Click into TablePress from the side bar. Then click Add New from the tabs at the top.
A page will open, prompting the user to fill in the initial details of a table. Here you can add a Table Name, a description ( optional), number of columns, and number of rows.
Click the Add Table button at the bottom.
This will open a new page for table data with the following sections.
Table Information: Displays the table ID, the shortcode (to be used for embedding in pages/posts), table name and description.
Table Content: Displays the table and its information.
Table Manipulation: controls editing cells, rows, and columns.
Table Options: Additional table settings.
Features of the DataTables JavaScript Library.
Add Row, Column
In the Table Manipulation section, define the number of rows you wish to add and click Add. (Note: The row will insert at the bottom of the table.)
Repeat the steps above for adding columns.
Insert Row, Column
Check the box next to the row you wish to insert an additional row. In Table Manipulation, click Insert next to Selected Rows. (Note: If you select Row 2, a blank row will be added into Row 2. The previous content will shift down).
Repeat the steps above for adding columns.
Hide Row, Column
Hiding a Row or Column will maintain the data in the table but without showing it on the frontend. To hide a row, check the box of the row you wish to hide. Then in the Table Manipulation section, click Hide next to Selected Rows.
Repeat this process for hiding columns.
Note: The hidden row/column will display in red under Table Content.
Add Links
Adding links can be a great way to incorporate other content within the table.
Highlight the content you wish to link. In Table Manipulation, click Insert Link. Fill out the information in the popup window.
Paste in an external URL or choose from existing content to prefill the link.
If you highlight content, the Link Text will prefill. Otherwise, choose what text will contain the link. Additionally, you may also choose to open links in a new tab.
Click Add Link at the bottom.
Once a link is created, it will display with HTML code in the selected cell.
Table Options
The Table Options section has the options to make the first row the header as well as the last row the footer. There are also options for alternating row colors, highlighting rows when hovering over it, printing the table’s name and description, and adding personalized CSS for styling purposes.
Datatable Options
Within the last section, there are three beneficial options: Pagination, Sort, and Search/Filter. Pagination can be customized to show a different number of rows per page. All three options can be turned on with the checkbox.
**Remember always to click Save Changes at the bottom. The preview button allows you to see the table from the visitor’s point of view if you choose to make more changes.
Add to Post
Adding a table to a post can be done with a shortcode. Grab the table’s shortcode (from the table information section or Show Shortcode under the Table Name).
Copy the shortcode, then navigate to a Post.
Once the post is opened for editing, click into the spot you wish to include your table and paste the shortcode. (This will automatically insert a shortcode block and prefill your code into the block.)
Want to learn more about the block editor? Check out Getting Started with Gutenberg (Block Editor) in WordPress
Remember to Update the Post at the top. Once published, the table will appear with all the content and additional styling settings.
Import CSV
A useful feature is the option to Import CSV files.
Within the TablePress tab, select Import. There are several options for Import Source but for this tutorial we will choose File Upload. Once you have selected your file, select the Import Format and Add as New Table.
Once imported, the table’s editing page will display with the table prefilled with information from the CSV file.
Plugins: Responsive Tables and DataTables Buttons.
There are additional plugins directly available from the TablePress plugin on https://tablepress.org/extensions/. It is highly recommended to give a donation for the premium plugins, especially those using the plugins on production websites.
We recommend two of the premium plugins: Responsive Tables and DataTables Buttons.
For DataTables Buttons, modify the shortcode to include and display specific buttons.
For Responsive Tables, define the responsive attribute.
The following example shortcode will display additional buttons and make the table responsive on smaller screens.
[table id=3 responsive="collapse" datatables_buttons="colvis,copy,csv,excel,pdf,print" /]Below is what the buttons look like in a DataTable.
Below is how the columns look when resized.
Export
Exporting tables can be done through the Export tab.
You can decide which tables to export and how to export them.
For the format, CSV will only export data out while JSON will export data and table options.
Summary
The TablePress plugin allows you to display tabular data in WordPress. Benefits of this plugin include creating tables from a central location and embed across different points using a shortcode, easy creation of tables through CSV import, and an export option to be used in other programs or a secondary backup.
TablePress utilizes the data tables library (jQuery) — allows you to filter, search, download data, and include plugins to enhance functionality than the standard Gutenberg block. The plugin adds more value to developers and visitors to the site by customizing tables and how they are viewed.
