WordPress Wiki

Add New Table

Navigate to Tablepress > Add New Table

Screenshot showing where to access the Tablepress

Enter Table Name, Table Description, Number of Rows and Columns > Add Table

Screenshot showing fields to enter to add a new table.

And a new blank table is created.

Screenshot shows a blank table created

 

Import a Table

Navigate to Tablepress > Import a Table

Screenshot showing where to access the Tablepress and import a new table

Select table file and upload to WordPress. Support format including CSV, XLS and XLSX.

Screenshot shows where to upload table files and options to do with uploaded file

 

Edit Table

Navigate to Tablepress > All Tables

Screenshot shows where to access and edit a table.

Hover mouse to the table file intended to edit > Edit

Screenshot shows how to access and edit a table

To insert a table into a page, post, or text widget, copy its Shortcode

Screenshot shows the structure of shortcode

and paste it at the desired place in the editor. Each table has a unique ID that needs to be adjusted in that Shortcode.

Screenshot shows Table ID and content of table.

 

Insert Table Into a Page

To insert the table into a page, post, or text widget, copy the Shortcode

Screenshot shows the structure of shortcode

and paste it at the desired place in the editor.

Additionally, there is a Insert a Table from Tablepress tool in the editor to help you generate and insert the Shortcode into the page.

 

Use Custom Commands

Order Table – “order” command

Scroll down to the end of Edit Table

Screenshot shows table options.

Set Parameter

“order”: [[0, ‘asc’]]

Using this parameter you can define which column(s) the order is performed upon, and the ordering direction.

The order must be an array of arrays, each inner array comprised of two elements:

• Column index to order upon (‘0’ represents 1st. Column, ‘1’ represents 2nd. Column, and so on)
• Direction so order to apply (asc or desc)

Example 1:

Table of Hawaii Agriculture Food Products – Order by 1st. column (Item)

Custom Command parameter:

Screenshot shows parameter set for Example 1

 

 Example 2:

Table of Hawaii Agriculture Food Products – Order by 2nd. column (Island) then 1st. column (Item)

Custom Command parameter:

Screenshot shows parameter set for Example 2

 

Pagination – “pagingType” command

Scroll down to the end of Edit Table

Screenshot shows table options.

 

Set parameter

“pagingType”: “simple_numbers” [Default]

DataTables has four built-in paging button arrangements:

• simple – ‘Previous’ and ‘Next’ buttons only
• simple_numbers – ‘Previous’ and ‘Next’ buttons, plus page numbers
• full – ‘First’, ‘Previous’, ‘Next’ and ‘Last’ buttons
• full_numbers – ‘First’, ‘Previous’, ‘Next’ and ‘Last’ buttons, plus page numbers

 

Example 1:

Table of Hawaii Agriculture Food Products

“pagingType”: “simple”

Screenshot shows pagingType set as simple

 

Example 2:

Table of Hawaii Agriculture Food Products

“pagingType”: “simple_numbers”

Screenshot shows pagingType set as simple_numbers

 

Example 3:

Table of Hawaii Agriculture Food Products

“pagingType”: “full”

Screenshot shows pagingType set as full

 

Example 4:

Table of Hawaii Agriculture Food Products

“pagingType”: “full_numbers”

Screenshot shows pagingType set as full_numbers

 

Enable Horizontal Scrooll

Scroll down to the end of Edit Table, check on “Enable horizontal scrolling”.

Screenshot shows the option to enable horizontal scroll

 

It also can be done by adding a command on custom command.

Set parameter

“scrollX”: true

Screenshot shows command to enable horizontal scroll bar.

 

Example:

Hawaii Farmers’ Market

 

Enable vertical scrolling

Enable vertical scrolling. Vertical scrolling will constrain the DataTable to the given height, and enable scrolling for any data which overflows the current viewport. This can be used as an alternative to paging to display a lot of data in a small area (although paging and scrolling can both be enabled at the same time if desired).

Scroll down to the end of Edit Table:

Screenshot shows table options.

 

Set Parameter

“scrollY”: “200px”, “scrollCollapse”: true, “paging”: false

Example:

Public Charging Stations

Screenshot shows commands to enable vertical scroll bar

 

Set Column Widths

Column widths can be done with the following CSS code, which can be added to the “Custom CSS” textarea in the “Plugin Options” (TablePress > Plugin Options):

”

.tablepress-id-N .column-2 {
	width: 30%;
}

”

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

Column Filters

TablePress Extension: DataTables ColumnFilterWidgets required.

Read Documentation

Ex. [table id=2 datatables_columnfilterwidgets=true datatables_columnfilterwidgets_exclude_columns=1,2,3,4 /]