Collapsible rows on front-end

Data Product Generator provides you the feature that is able to create  tables with collapsible rows on front-end.

You have an option to make certain rows collapsible, so that when visitors arrive at a page with a table, they see data table with “table of contents”. If you click on a category, this category expands to show all the rows associated with it. You are able to select any row to make it the main one, and what rows can be associated with it.

If you add collapsed rows, then the first row of the selected rows becomes the “main” one. It is always visible and a “+” sign appears on the left. The other selected rows under it are collapsed by default, and when you click on the “+” – the collapsed rows will unfold.

In addition, you can use not only hidden fields, but the tooltips for cells: convert the cell content into icon with tooltip.  Also, the search option is available for collapsible rows of data tables, making navigation much more convenient for users.


In order to create Data Table with collapsible rows on front-end you need:


  1. On the left navigation menu click “Add new table”.
  2. Enter the name of data table and choose the number of rows and columns.
  3. Click “OK” button.
  4. Open “Editor” tab in the table parameters.
  5. Add data to the WordPress table.
  6. Select row and check this icon. First collapsible row becomes the “main” and it will have a control button. Other collapsible rows will be hidden by default, the user may show / hide them by pressing on control button of “main” row. collapsible rows button First collapsible row become the “main” row with control button. Other collapsible rows will be hidden by default – user might show / hide them by pressing on control button of “main” row.
  7. To convert the cell content into icon with tooltip, select the cell and mark the icon. tooltip button
  8. To enable the searching feature for hidden fields, move to Settings, Feature Tab and mark the necessary option.  When a search term is entered, the collapsed rows will automatically expand to show the lines that contain keywords related to that search criteria.

Create and manage your data tables without any efforts using WordPress Data Table Generator.

Data Table by Supsystic is perfectly capable to extend table functionality to your WordPress site. Take a closer look at all Data Table Examples.



Get plugins bundle today and save over 80%