When editing posts or pages, use the “TablePress table” block in the WordPress block editor to insert TablePress tables that you have created or imported.

The Shortcode

[table id=N /]Code language: JSON / JSON with Comments (json)

can be used to display a table in a post, on a page, or in a text widget, in cases where using the “TablePress table” block is not possible or desired.

The Shortcode can have the following parameters. All parameters can be added in arbitrary order, like

[table id=1 alternating_row_colors=false table_head=false /]Code language: JSON / JSON with Comments (json)

If a parameter is added, it overwrites the corresponding Table Option from the “Edit” screen of that table!

For most use cases, it is recommended to change the setting in question by using the corresponding checkbox on the “Edit” screen of the table.

id (string) (required)

The ID of the table to show (can be seen on the “All Tables” or the “Edit” screen).

column_widths (string) (optional)

string with column widths, separated by the |-symbol (pipe)
examples:

column_widths="40px|50px|30px|40px"

or

column_widths="20%|60%|20%"

alternating_row_colors (boolean) (optional)

whether the table shall get alternating row colors (“zebra striping”) (see the CSS classes odd and even)

row_hover (boolean) (optional)

whether table rows shall be highlighted with a different background color, if the mouse hovers over them

table_head (boolean) (optional)

whether the first row will get <th> HTML tags inside a <thead> HTML tag

first_column_th (boolean) (optional)

whether the first column will get <th> HTML tags (there is no checkbox for this on the “Edit” screen!)

table_foot (boolean) (optional)

whether the last row will use <th> HTML tags inside a <tfoot> HTML tag

print_name (boolean) (optional)

whether the name of the table shall be printed above/below the table

print_name_position (string) (optional)

position for printing the table name: can be “above” or “below”

print_description (boolean) (optional)

whether the description of the table shall be printed above/below the table

print_description_position (string) (optional)

position for printing the table description: can be “above” or “below”

use_datatables (boolean) (optional)

whether the DataTables JavaScript library (a jQuery plugin) shall be used with this table (will only work, if the first row gets <th> HTML tags (either by the setting on the table’s “Edit” screen or by the Shortcode parameter)

datatables_sort, datatables_paginate, datatables_lengthchange, datatables_filter, datatables_info (boolean) (optional)

whether the corresponding feature of the DataTables JS library shall be activated for this table (more information in the DataTables section or on the DataTables website)

show_rows, hide_rows, show_columns, hide_columns (string) (optional)

These parameters can be used to overwrite visibility settings in the backend on a per-Shortcode basis.
Example:

hide_columns="1,2,3" show_rows="4,5,6"

will hide the first three columns and show rows 4, 5 and 6, regardless on what visibility setting they have in the backend. Instead of adding each row or column number manually, there’s also a parameter value “all” that will affect all rows/columns. They can also be used at the same time, if needed:

hide_columns="3,4,5" show_columns="8,9"

cellspacing, cellpadding, border (integer) (optional)

Corresponds to the parameters in

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
  <tr>
    <td>...</td>
  </tr>
</tbody>
</table>

By default those are not set as the setting can be better influenced with CSS. In some rare cases they might necessary though.

The Shortcode

[table-info id=N field=<field-name> /]Code language: JSON / JSON with Comments (json)

can be used to display table meta data in a post, page, or text widget.

The Shortcode has three parameters:

id (string) (required)

The ID of the table that has the Custom Data Field

field (string) (required)

The name of a meta field (see below)

format

only possible value: raw. Only applies to the default field last_modified and will return the raw datetime format instead of the pretty string.

Possible values for field are:

name

The name of the table with ID id

description

The description of the table with ID id

last_modified

The time of the last modification of the table with ID id, if the format parameter is set to raw, a datetime string will be returned, otherwise a pretty string. The format human can be used to show a text like “5 hours ago”, the format values date and time show just the date or time of the last modification, respectively.

last_editor

The author who last modified the table with ID id

Example of three Shortcodes in action (i.e. in a post or on a page near a table):

The table [table-info id=2 field=name /] was last modified at [table-info id=2 field=last_modified format=raw /] by [table-info id=2 field=last_editor /].Code language: HTML, XML (xml)

will produce something similar to

The table Demo Table was last modified at 2022-12-20 15:20:21 by TobiasBg.Code language: HTML, XML (xml)

There’s a also a Template Tag Function for this Shortcode available:

<?php tablepress_table_info( 'id=1&field=name' ); ?>Code language: PHP (php)

It works exactly like the Template Tag Function, with the parameters from this section.

To show a table in places not covered by blocks or Shortcodes (e.g. in your page footer or in the sidebar) you can use the Template Tag Function tablepress_print_table( $query );. It can be added to any part of your theme (between PHP brackets: <?php and ?>).

The parameter $query can be a string in the form of a query string in a URL or other WordPress functions like wp_list_pages(), or it can be a an array with the query parameters and values.

If you don’t want to immediately print the table, but just get the output, use tablepress_get_table( $query );, which works the same way.

The possible parameters are the same as for the Shortcode.

Example with $query as a string:

<?php tablepress_print_table( 'id=1&use_datatables=true&print_name=false' ); ?>Code language: PHP (php)

Example with $query as an array (recommended and easier to read):

<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false ) ); ?>Code language: HTML, XML (xml)

There’s a also a Template Tag Function for the Shortcode

[table-info id=N field="<field-name>" /]Code language: JSON / JSON with Comments (json)

available:

<?php tablepress_print_table_info( "id=1&field=name" ); ?>Code language: PHP (php)

or

<?php tablepress_print_table_info( array( 'id' => '1', 'field' => 'name' ) ); ?>Code language: PHP (php)

It works exactly as the Template Tag Function described above, with the parameters from the section about the [table-info /] Shortcode.

Each table has individual options that only concern that table. They can be changed on the table’s “Edit” screen. All of them may be overwritten by the corresponding configuration parameter of the “TablePress table” block in the block editor.

The following options are available:

Alternating row colors

If enabled, every odd row will get the additional CSS class odd, every even row will get the class even. (Those classes have a different background color applied to them by the default CSS. There’s an example on how to change these colors in the FAQ.)

Row Highlighting

If enabled, the background color of all cells of the row that is currently hovered with the mouse cursor is changed to highlight the row. (There’s an example on how to change the color in the FAQ.)

Table Head Row

If this is activated, all cells in the first displayed row will be encapsuled by the <th> instead of the <td> HTML tag and the row will be put inside a <thead> HTML tag. This is mandatory for using any of the JS libraries functions!

Table Foot Row

If this is activated, all cells in the last displayed row will be encapsuled by the <th> instead of the <td> HTML tag and the row will be put inside a <tfoot> HTML tag.

Table Name

If enabled, the Name of the Table will be printed above/below the table inside a <h2> HTML tag, which has the CSS class tablepress-table-name. The position can be selected from “above” or “below”.

Table Description

If activated, the Description of the Table will be printed above/below the table inside a <span> HTML tag, which has the CSS class tablepress-table-description. The position can be selected from “above” or “below”.

The plugin has the following general “Plugin Options”. They affect the global plugin behavior in different areas.

Custom CSS

If you want to change the style of tables, you can enter those additional commands into the “Custom CSS” textarea. There are examples on how to change certain style aspects on the FAQ page.

Admin menu entry

Use this setting to move the menu entry “TablePress” (by default in the middle of the menu) to another place in the admin menu of the Dashboard of your site.

Every table gets certain CSS classes and an HTML ID that can be used for styling. Add your styling commands to the “Custom CSS” textarea on the “Plugin Options” screen.

There are examples for common styling tasks on the FAQ page.

CSS classes are attached as <element class="class-name">...</element> to an <element>, IDs are attached as <element id="html-id">...</element>.

CSS classes

.class {
	/* your CSS */ 
}Code language: CSS (css)

tablepress (class of <table>)

Every table has this class.

tablepress-id-<ID> (class of <table>)

Every table has this class (with its ID for <ID>).

row-<number> (class of <tr>)

Every row gets this. <number> is the number of the row displayed, no matter if it is a heading row or data row. Counting always starts at 1.

column-<number> (class of every <th> or <td>)

<number> is the number of the column the cell belongs to. It will be a class of every <th> and <td> element.
Use this for styling column widths!
Example:

.tablepress .column-2 { 
	width: 200px; 
}

There’s another example in the FAQ. Important: If you use both the .column-X and the .row-X selectors at the same time, the .row-X has to stand before the .column-X (because it is given to the <tr> which encloses the <td>).

odd and even (classes of every <tr>)

If the Table Option “Alternating row colors” (or the Shortcode parameter) is enabled, every row will get one of these classes, depending on whether it is an odd or even row. Use the classes to actually style the alternating background colors. There’s an example to do this in the FAQ

tablepress-table-name (classes of <h2>)

If the Table Option “Print Table Name” is enabled, the Name of the Table will be printed above or below the table inside a <h2> HTML tag, which has this class.

tablepress-table-description (classes of <span>)

If the Table Option “Print Table Description” is enabled, the Description of the Table will be printed above or below the table inside a <span> HTML tag, which has this class.

CSS/HTML IDs

#html-id {
	/* your CSS */ 
}Code language: CSS (css)

tablepress-<ID>-no-<number> (ID of <table>)

Every table gets an ID like this. <ID> stands for the ID used in the “All Tables” list of TablePress. <number> is the count/occurrence of that table on the page up to this point. (For example, if you display the same table (with the same <ID>) twice on your site (e.g. once in a post and the second time in the sidebar), the first one will have no -no-... and the second one will have <number> = 2. This means, that these HTML IDs are not very reliable to be used for styling, as they might change depending on the occurrence of the same table on the page again. These IDs are used to invoke the JavaScript library’s calls (if activated for this occurrence of the table).

TablePress can add features like sorting, pagination (with length change feature), scrolling, and filtering/searching to a table. To enable those, check the corresponding checkboxes on the table’s “Edit” screen.

Even more features for your site’s visitors are available in the Premium features that come with a TablePress Premium plan.

You may decide for each table individually whether you want to use the “Table Features for Site Visitors” for it (see the Table Options page for more), and you can select the desired features individually.

You can add custom commands or configuration parameters into the “Custom Commands” text field. These need to follow the DataTables Documentation. You can also use certain Plugin Hooks in a custom plugin to add your own commands.

TablePress has a large number of WordPress Plugin Hooks (Actions and Filters) in its source code. These provide easy and well established methods to add new features and enhancements to the plugin, or to alter plugin behavior. A more detailed explanation can be found in the WordPress Developer Handbook.

There are some examples on how to use these hooks on the Extensions page.

The advantage of using these hooks in contrast to modifying the plugin’s source files is that the changes will still work after upgrading the plugin, and that they can be maintained separately.

TablePress understands a variety of common spreadsheet formats and can use them for importing and exporting tables. In addition, TablePress supports multiple import sources and can either add new tables from imported files or replace or append to existing tables.

Import Formats

The major import formats that TablePress automatically recognizes are described below. In addition, less common formats like ODS (OpenDocument Spreadsheet), Gnumeric, and SYLK are supported. Files from Apple Numbers are not supported at this time, so that it is recommended to save such a file to one of the supported formats before trying to import them.

CSV (Character-separated Values)

Every row is in a new line, every column is separated by a character (like “;” (semicolon), “,” (comma), or “\tab” (tabulator)). The plugin will try to determine the used separation character automatically. See the Wikipedia article for more information on the CSV format.

XLS/XLSX (Microsoft Excel)

TablePress also supports Microsoft Excel data formats for import (but not export!) of table data. Note that this support is not complete, and not all data features, like data types, are supported or available. Also, TablePress can only import the first worksheet of the Excel file. If you have problems importing tables from XLS or XLSX files, it’s recommend to save these tables in Excel as CSV files and try importing those.

HTML (Hypertext Markup Language)

The plugin will import the first occurrence of an HTML table (enclosed in <table></table>) from an HTML file. It is not possible to import multiple tables from the same file or URL, but only the first one.

JSON (JavaScript Object Notation)

TablePress can import tables from JSON that represents a plain two-dimensional array of strings, where each string represents the content of a cell. It can also import its custom and more advanced JSON format, as created during the export. See the Wikipedia article for more information on the JSON format.

Export Formats

From the Import Formats that are described above, these are available as the target format for an exported table:

• CSV (Character-separated Values)
• HTML (Hypertext Markup Language)
• JSON (JavaScript Object Notation)

If multiple tables are exported at the same time, these will be stored in a ZIP archive.

Import Sources

TablePress can import files from four different sources, which can be selected on its “Import” screen:

• File Upload, by selecting or dragging and dropping files from your local computer
• URL (link address) of a file on a website
• Server (path of a file stored on the site’s server)
• Manual Input

The File Upload, URL, and Server import sources also support working with ZIP archives that contain multiple supported files. In addition, the File Upload import source allows to directly upload multiple files, even in different supported formats.

It is also possible to import tables form common online services like Google Sheets, Google Drive, Microsoft Excel Online, Microsoft OneDrive, and Dropbox. Beginner-friendly step-by-step tutorials are available to guide you through the process of finding the necessary URL for that.

These manual imports are one-time imports. Using the Automatic Periodic Table Import feature module of the TablePress Max premium license plan, it’s possible to fully automate the import of a table file. This saves time and allows updating tables without having to log into your WordPress site!

The source code of TablePress Free is available in the ZIP file that can be downloaded from the plugin’s page in the WordPress Plugin Repository. It is Open Source and licensed as Free Software under GNU General Public License 2 (GNU GPL 2).

Development takes place in a git repository on GitHub.

If you are still using the outdated and discontinued plugin WP-Table Reloaded on your website, it is strongly recommend to switch to its official successor TablePress. WP-Table Reloaded has been discontinued in 2013 and will no longer receive any updates or support.

Please follow the migration guide to switch from WP-Table Reloaded to TablePress.

To add CSS commands (Cascading Style Sheets), just go to the “Custom CSS” text area on the “Plugin Options” screen of TablePress and enter them there. They will override the default styling, so that you do not have to change any files directly (such modifications would be lost after each TablePress update).

Please note that you must not add the CSS code to the “Custom Commands” text field on the table’s “Edit” screen. That field is used for a different type of code.

Changing the text and the background color of a single row, e.g. to highlight it, can be done with some CSS like this:

.tablepress-id-N .row-X td {
	background-color: #ff0000;
	color: #00ff00;
}Code language: CSS (css)

where N (the table’s ID), and X (the number of the row) need to be adjusted to your table! #ff0000 is the HEX color code of the desired color, in this case red. You can change both the text color (via the color property) and the background color (via the background-color property).

This CSS code needs to be entered into the “Custom CSS” text field on the “Plugin Options” page of TablePress.

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
	--head-text-color: #111111;
	--head-bg-color: #d9edf7;
	--head-active-text-color: #111111;
	--head-active-bg-color: #049cdb;
}Code language: CSS (css)

Here, the lines starting with -- indicate variables for the colors, with text being the text color and bg denoting the background color, of the table head and footer rows. The lines of code with active in the variable name indicate the colors of hovered header cells and the colors of header cells that are currently sorted. Just change the HEX color values as desired. You only need to specify the lines that you want to change.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

If the CSS code from above does not work, you can also try this alternative CSS code:

.tablepress thead th,
.tablepress tfoot th {
	background-color: #ff0000;
	color: #00ff00;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #00ff00;
	color: #00ff00;
}Code language: CSS (css)

You can change both the text color (via the color property) and the background color (via the background-color property).

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
	--odd-text-color: #111111;
	--odd-bg-color: #f9f9f9;
	--even-text-color: #111111;
	--even-bg-color: #ffffff;
}Code language: CSS (css)

Here, the lines starting with -- indicate variables for the colors, with text being the text color and bg denoting the background color, either for odd or even rows. Just change the HEX color values as desired. You only need to specify the lines that you want to change.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

If the CSS code from above does not work, you can also try this alternative CSS code:

.tablepress .odd td {
	background-color: #ff0000;
	color: #00ff00;
}
.tablepress .even td {
	background-color: #00ff00;
	color: #0000ff;
}Code language: CSS (css)

You can change both the text colors (via the color property) and the background colors (via the background-color property) of odd and even rows.

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
	--hover-text-color: #111111;
	--hover-bg-color: #f3f3f3;
}Code language: CSS (css)

Here, the lines starting with -- indicate variables for the colors, with text being the text color and bg denoting the background color, for the currently hovered row. Just change the HEX color values as desired. You only need to specify the lines that you want to change.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

If the CSS code from above does not work, you can also try this alternative CSS code:

.tablepress .row-hover tr:hover td {
	background-color: #ff0000;
	color: #00ff00;
}Code language: CSS (css)

You can change both the text color (via the color property) and the background color (via the background-color property).

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N tbody td {
	font-family: Tahoma;
	font-size: 14px;
	font-weight: bold;
	color: #ff0000;
}Code language: CSS (css)

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector to have this code apply to all TablePress tables on the site). The values for font-family, font-size, font-weight and color can of course be adjusted or removed, if they are not needed.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you know the row and column numbers of the value in question, you could use CSS code in the “Custom CSS” textarea on the “Plugin Options” screen of TablePress like

.tablepress-id-N .row-X .column-Y {
	background-color: #ff0000;
	color: #ff0000;
}Code language: CSS (css)

where N (the table’s ID), X (the number of the row), and Y (the number of the column) need to be adjusted to your table.

If you don’t know the row and column numbers (or they sometimes change, or you have more than on value to highlight), I recommend creating a new CSS class for a HTML <span> element. You would then wrap the value in the span tag, like

<span class="highlight-1">your first important value</span>
<span class="highlight-2">your second important value</span>Code language: HTML, XML (xml)

and could create approriate CSS like

.tablepress .highlight-1 {
	color: #ff0000;
	text-decoration: underline;
}
.tablepress .highlight-2 {
	color: #00ff00;
	font-weight: bold;
}Code language: CSS (css)

Here, highlight-1 and highlight-2 are just examples for possible CSS class names. You can adjust these to give their names a meaning, but have to be consistent in HTML and CSS code.

If you would like to changing the styling of rows or cells automatically, based on their content, check out the Row Highlighting and Column Highlighting features that are part of the TablePress premium license plans.

Setting column widths for your tables is possible with a short piece CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-7 .column-2 {
	width: 100px;
}Code language: CSS (css)

This example would set the column width of the second column of the table with ID 7 to 100 pixels. Adjust these numbers as needed.

This is the general pattern that I recommend. You can use this as often as needed, changing the column in question to the correct number each time. If you want to set multiple columns to the same width, follow the pattern

.tablepress-id-7 .column-2,
.tablepress-id-7 .column-4,
.tablepress-id-7 .column-8 {
	width: 150px;
}Code language: CSS (css)

Note: In most cases, it is not necessary to set the column widths directly! Instead, you might want to reduce the padding (the white space between the text in a cell and the edges of a cell), with the CSS code

.tablepress-id-7 {
	--padding: 4px;
}Code language: CSS (css)

which again needs to be adjusted as above.

To apply such a change to all tables on your site, use .tablepress as the first part of the selector, instead of .tablepress-id-7.

Please keep in mind that it will not always be possible to reduce the width of a table column, as by default the longest single word or other content in a column defines that column’s minimum width. You might therefore have to employ a solution to make your table “responsive”, e.g. by using the Responsive Tables feature module that is available in TablePress Premium plans, especially on smaller screens, like phones and tables.

When trying to increase the width of a column, you will need slightly extended CSS code, if that table already uses a width that is bigger than the available content area and therefore uses horizontal scrolling:

.tablepress-id-7 .column-2,
.tablepress-id-7 .column-4,
.tablepress-id-7 .column-8 {
	width: 250px;
	min-width: 250px;
}Code language: CSS (css)

By defining the minimum width as well, the browser will make the column wider even though the table already uses horizontal scrolling.

Normally, tables extend to the full width of the container element they are added to. Sometimes, for tables with few columns, it might however look better to reduce the table’s width and center it on the page. This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N {
	width: auto;
	margin: 0 auto 1em;
}Code language: CSS (css)

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector, if you want this to apply to all TablePress tables on your site).

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N thead th,
.tablepress-id-N tfoot th {
	border: none;
}Code language: CSS (css)

In this code, the N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector (five times) to remove the border from all TablePress tables on your site).

If you are still seeing border lines in your table after adding this code, it might be necessary to raise the priority of this command above the commands from e.g. your theme. For that, please change the line with the CSS property to

border: none !important;Code language: CSS (css)

The most important CSS selector is .tablepress as it applies to all TablePress tables on your site. If you don’t want to apply a styling setting to all tables, but just to certain ones, you can use .tablepress-id-N, where N is the ID of the table.

In most cases you’ll want to style table body cells, so the CSS command will look like this:

.tablepress-id-N tbody td {
	property1: value1;
	property2: value2;
}Code language: CSS (css)

Here, N has to be changed to the table’s ID, whereas property1 and property2 are just for demonstration and need to be changed to the CSS properties that you want to change.

You can find a more thorough list of available CSS selectors in the Documentation.

If you can not see the TablePress entry in the left-hand side admin menu of your WordPress Dashboard, there is usually a small problem with the TablePress access rights and capabilities. This can sometimes happen during installation or if user access rights and user roles are edited later, e.g. by another plugin.

To restore the TablePress menu entry, you can try to reset the access capabilities. For that, please:

1. Go to https://example.com/wp-admin/options.php in your browser, with your site’s URL instead of example.com. On this “All Settings” screen, you should see a list of internal WordPress configuration data, the so-called “WordPress Options”, with input fields to change their values. Be advised that this is a powerful tool, so please proceed with caution.
2. Scroll down to the tablepress_plugin_options option. (To reach it quicker, you could also use the browser search function, by typing Ctrl/Cmd+F.)
3. In the text field next to tablepress_plugin_options, find the text "plugin_options_db_version":. Right after that, there should be a number like 86. (The exact number depends on the TablePress version and doesn’t matter here.)
4. Change that number to 0 (zero), but please be very careful to not remove the surrounding quotation marks or other characters!
5. Scroll down to the bottom of the page and click the “Save Changes” button.

This process should reset the internal TablePress access capabilities, and you should be seeing the TablePress entry in the admin menu again.

Note that the number after "plugin_options_db_version": that you changed to 0 will have changed back to its original value again, which is the correct and expected behavior.

If this process did not restore the TablePress menu entry, please contact us directly via email (supportno-spam@mailtablepress.org) with the details to a temporary admin account to your site. We’ll then gladly take a direct look at this issue on your site.

If the “Enable Visitor Features” checkbox is checked on a table’s “Edit” screen, but functions like sorting, search, pagination, or from TablePress Premium modules are not working in your tables, this usually indicates a JavaScript problem.

To check for that, please use the built-in “Developer Tools” of your browser. Right click your page and pick “Inspect Element”. You should then see the “Developer Tools”, where you can switch to the “Console” tab to see JavaScript problems on the page.

Depending on the shown error messages, we can then narrow down the cause. Here’s a list of common possible error messages and their causes:

Error: Uncaught TypeError: Cannot read property 'mData' of undefined

This error message indicates a problem with the table structure. The DataTables JavaScript library requires that the table has a rectangular structure, which means that every row must have the same number of cells. Unfortunately, this means that it is not possible to use both the JavaScript features and cell merging/combining, using the #colspan# or #rowspan# keywords, at the same time. You will have to decide what’s more important for your table: Using the JavaScript features or combining cells. Having both for one table is not possible.

If you are not using the #colspan# or #rowspan# keywords in the affected table, chances are high that the HTML code in your table is broken somewhere. A visual indicator for this can be that content or cells in the table are shifted, e.g. they are shown on the left of the other cells in the same column. Very often, this happens when using HTML code for a link in the table. It is very important that e.g. quotation marks " are used properly around the values of HTML tag attributes, e.g. around the URL after the href= attribute. Please check that this is the case for all HTML tags in your table.

Error: Uncaught ReferenceError: jQuery is not defined

A common reason for this error message is the use of plugins that minify, concatenate, or try to optimize the loading of JavaScript or CSS files on your site. Due to the large variety of plugins, these sometimes can not properly maintain script dependencies or the necessary loading order of files. If you see this error, you should therefore try again after temporarily deactivating any such JavaScript/CSS optimization plugins.

Another reason for this is error could be that an old and outdated version of the jQuery JavaScript library is loaded on your site. There are some themes and plugins that still do this, even though WordPress already ships with the correct and up-to-date version of jQuery. To check for this, please search the generated HTML source code of the page with the table (accessible via the “View Source” feature in your browser) for the string jquery. If there’s more than one result within HTML <script> tags, this means that the library is loaded multiple times. If that is the case, the loading of the old versions should be stopped, so that only the version that comes with WordPress is loaded. This usually means deleting a line similar to

<script src="/js/jquery.js">Code language: HTML, XML (xml)

from the theme’s “header.php” file. Other variants are lines like

wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ... );Code language: PHP (php)

in the “functions.php” file.

No or other error messages

If you don’t see any JavaScript errors, please make sure that the “Enable Visitor Features” checkbox is really checked on the table’s “Edit” screen. Please also check if the JavaScript code that loads and initializes the DataTables JavaScript library is part of the generated HTML source code of the page. To check for this, please search that source code (again accessible via the “View Source” feature in your browser) for e.g. datatable.

If you are seeing other error messages than those from above, or if you are seeing other unexpected behavior of the JavaScript library, please open a new topic in the TablePress support forums, and make sure to include a link to the page with the table where this error happens!