Skip Navigation

[Resolved] TablePress integration with Views

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to integrate Views and TablePress so that I can filter with Views and show the results in a TablePress table.

Solution: There is currently no integration between these two plugins, and they produce incompatible output. We have an improvement in the works that will help integrate Views and Datatables.net tables, but that is not quite ready.

It's possible to use a sortable table in Views and apply some style changes to make the clickable headers more friendly:

.js-wpv-sort-trigger.js-wpv-column-header-click {
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
}
This support ticket is created 6 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 15 replies, has 2 voices.

Last updated by Christian Cox 6 years, 10 months ago.

Assisted by: Christian Cox.

Author
Posts
#610417

I created a table using TablePress (very similar to WP DataTables). I'd like to use it to display my search results (Loop Output). I have the shortcode for the TablePress table but when I include it after the <!--wpv-loop-start-->, it doesn't work.

I didn't see anything detailing this on the forum with the exception of one thread relating to DataTables, which didn't offer a solution.

How can I use that table to show the custom fields, types, and loop, that I created with Toolset?

Thank you.

#610499

I'm not all that familiar with the TablePress plugin, but I know Views does not currently offer any built-in integrations with it. Views expects to find its own internal loop structure in Loop Output to generate lists of results. That's why the wpv-loop tags are required, as well as the other formatting tags and comments as provided in the Loop Output editor. A TablePress shortcode does not provide the proper structure for a View to render, so no results will be shown.

We currently have a feature request in place to make integration with Datatables (datatables.net) more straightforward, but that's not quite ready yet. If TablePress can accept JSON data to render a table, I might be able to help you configure a View to output that JSON object correctly. I would need to see the format of the JSON data required. Their support team would be able to provide that if it's possible.

If TablePress can read custom field values, then you can access custom fields created by Types under the key "wpcf-" + (field slug) in the postmeta table. So for example if your field has a slug "location" then the key is "wpcf-location". If the field slug is "first_name" then the key is "wpcf-first_name".

#610823

Great, thank you Christian. The developer told me TablePress does in fact pass JSON data and gave me the following information:

TablePress uses a rather simple JSON format for storing table data:
As a table is just a "matrix", an array of arrays is enough:

[
["row 1, column 1","row 1, column 2","row 1, column 3"],
["row 2, column 1","row 2, column 2","row 2, column 3"],
["row 3, column 1","row 3, column 2","row 3, column 3"]
]

________________________________________________________________________

The table I've created is located at hidden link and I've used the wpcf key (along with come conditional logic) as you suggested. I've pasted it below:

<tr>
<td>[wpv-post-featured-image size="custom" width="160" height="120" crop="true"]</td>
<td>[wpv-conditional if="( $(wpcf-listing-name) ne '' )"][types field='listing-name'][/types][/wpv-conditional]</td>
<td>[wpv-conditional if="( $(wpcf-property-type) ne '' )"][types field='property-type'][/types][/wpv-conditional]</td>
<td>[wpv-conditional if="( $(wpcf-city) ne '' )"][types field='city'][/types][/wpv-conditional]</td>
<td>[wpv-conditional if="( $(wpcf-price) ne '' )"]$ [types field='price'][/types][/wpv-conditional]</td>
<td>[wpv-conditional if="( $(wpcf-size) ne '' )"][types field='size'][/types][/wpv-conditional]</td>
<td>[wpv-conditional if="( $(wpcf-rate) ne '' )"]$ [types field='rate'][/types][/wpv-conditional]</td>
<td>[wpv-conditional if="( $(wpcf-rent) ne '' )"]$ [types field='rent'][/types][/wpv-conditional]</td>
</tr>

I need help using the loop filter to pass these fields into the table template I've created. Thank you.

#610860

The developer told me TablePress does in fact pass JSON data
We don't need to receive cell data from TablePress, we need to send cell data into TablePress. I was thinking I could help you create a JSON-style string of data with Views, then pass that data into TablePress somehow.

I need help using the loop filter to pass these fields into the table template I've created. Thank you.
If I am reading the information correctly, the TablePress team gave you some information about how TablePress stores data, but not how it reads data. If you want to use Views to search and filter results, the data needs to be saved in custom fields on your posts. I can't help you display data from TablePress in a View. I can help you generate data with Views, which can be consumed by TablePress to produce the rows and columns of the table. It sounds like you're trying to go in the opposite direction...do you understand what I'm describing? The data should flow from Views into TablePress, not from TablePress into Views. If I've misunderstood the information you received from their team, please let me know.

#610873

TablePress wouldn't be sending the data, I mistyped that, my bad.
Views would need to write the data to the database in the format I listed above, that's what they told me in response to your question to them.

#610902

Views would need to write the data to the database in the format I listed above, that's what they told me in response to your question to them.
Views can generate a list of sorted, filtered results on demand when they are required to be displayed on the site. I can help you use Views to create a list of filtered results and show that list on the front-end of your site. I can help you format that list of results to match most required markup structures. However, Views cannot help you write that list of results to the database, or update those results in the database when post data is modified. It might be possible to automate a process that periodically generates this list and stores it in the database with custom code, but that level of customization is outside the scope of support we provide here in the forums. You may be able to find professional assistance with that kind of automation in our contractors forum: https://toolset.com/contractors/

Is it possible to set up a TablePress table to consume data from a JavaScript object written into the source code of the page at pageload time? This is how I envisioned Views working with TablePress. If they can provide a code sample showing this type of setup I can take a look.

#610911

I have the JSON file (I was able to download it from the plugin). I've shared the link with you below. Thank you for your help.

hidden link

#611048

I have copied the format and cleaned up the formatting here so you can delete the file from dropbox.

{
  "id": "4",
  "name": "Copy of listings upload - Use this Sheet.csv",
  "description": "Copy of listings upload - Use this Sheet.csv",
  "author": "2",
  "last_modified": "2018-01-27 20:58:55",
  "data": [
    [
      "&nbsp;",
      "Listing Name",
      "Property Type",
      "City",
      "Price",
      "Size (sf)",
      "Rate (sf/yr)",
      "Rent"
    ],
    [
      "3 Amigos",
      "Mexican on kildaire farm rd in cary",
      "Business",
      "Wake",
      "149,000",
      "3,200",
      "21.00",
      ""
    ],...(loop repeats previous array for each result)...
  ],
  "options": {
    "last_editor": 2,
    "table_head": true,
    "table_foot": false,
    "alternating_row_colors": true,
    "row_hover": true,
    "print_name": false,
    "print_name_position": "above",
    "print_description": false,
    "print_description_position": "below",
    "extra_css_classes": "",
    "use_datatables": true,
    "datatables_sort": true,
    "datatables_filter": true,
    "datatables_paginate": false,
    "datatables_lengthchange": true,
    "datatables_paginate_entries": 10,
    "datatables_info": false,
    "datatables_scrollx": true,
    "datatables_custom_commands": ""
  },
  "visibility": {
    "rows": [
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1
    ],
    "columns": [
      1,
      1,
      1,
      1,
      1,
      1,
      1,
      1
    ]
  }
}

I will take a look and see what we can do in Views, then give you an update shortly.

#611061

It looks like the "visibility" block includes an array with a "1" representing each row, if I'm reading their data structure correctly. In order to build this, I need to loop over the data twice - once for the custom fields of each post, and again separately to add a row in the visibility section. This is not possible in a single View. Only one loop is possible in each View, and we would use the first loop to build out each item in the data block like this:

[
      "3 Amigos",
      "Mexican on kildaire farm rd in cary",
      "Business",
      "Wake",
      "149,000",
      "3,200",
      "21.00",
      ""
    ]

We can try to create the full structure with two Views instead, and combine their results to produce the entire output. If any filters are in place on the first View, they must be identical in the second View. They must respond to the same URL parameters if you allow your Users to filter using a parametric search. So those are the two potential roadblocks I can predict, but there may be others I cannot anticipate.

First, you need output formatted to work in the "data" block of the JSON object you provided. This will be View 1. Create a View of posts with the following Loop Output code structure:

[wpv-layout-start][wpv-items-found]<!-- wpv-loop-start --><wpv-loop>,"[wpv-post-featured-image size="custom" width="160" height="120" crop="true"]","[wpv-conditional if="( $(wpcf-listing-name) ne '' )"][types field='listing-name'][/types][/wpv-conditional]","[wpv-conditional if="( $(wpcf-property-type) ne '' )"][types field='property-type'][/types][/wpv-conditional]","[wpv-conditional if="( $(wpcf-city) ne '' )"][types field='city'][/types][/wpv-conditional]","[wpv-conditional if="( $(wpcf-price) ne '' )"]$ [types field='price'][/types][/wpv-conditional]","[wpv-conditional if="( $(wpcf-size) ne '' )"][types field='size'][/types][/wpv-conditional]","[wpv-conditional if="( $(wpcf-rate) ne '' )"]$ [types field='rate'][/types][/wpv-conditional]","[wpv-conditional if="( $(wpcf-rent) ne '' )"]$ [types field='rent'][/types][/wpv-conditional]"]</wpv-loop><!-- wpv-loop-end -->[/wpv-items-found][wpv-no-items-found][/wpv-no-items-found][wpv-layout-end]

It may be required to add the output="raw" attribute to some of these Types field shortcodes to prevent formatting from breaking your data structure.

Then, you must create View 2, which outputs a "1" for each row of results. It should use the same filters as View 1, but have a different Loop Output:

[wpv-layout-start][wpv-items-found]<!-- wpv-loop-start --><wpv-loop>[wpv-item index=1]1[wpv-item index=other],1</wpv-loop><!-- wpv-loop-end -->[/wpv-items-found][wpv-no-items-found][/wpv-no-items-found][wpv-layout-end]

In your child theme's functions.php file, you must insert the following code to remove all extra formatting and markup from the output of these Views:

add_filter( 'wpv_filter_wpv_view_shortcode_output', 'prefix_clean_view_output', 5, 2 );

function prefix_clean_view_output( $out, $id ) {
  $ids = array( 12345,67890 );
  if ( in_array( $id, $ids )) {
    $start = strpos( $out, '<!-- wpv-loop-start -->' );
    if (
      $start !== false
      && strrpos( $out, '<!-- wpv-loop-end -->', $start ) !== false
    ) {
      $start = $start + strlen( '<!-- wpv-loop-start -->' );
      $out = substr( $out , $start );
      $end = strrpos( $out, '<!-- wpv-loop-end -->' );
      $out = substr( $out, 0, $end );
    } else {
      $start = strpos( $out, '>' );
      if ( $start !== false) {
        $out = substr( $out, $start + 1 );
        $end = strpos( $out, '<' );
        $out = trim(substr( $out, 0, $end ));
      }
    }
  }
  return $out;

Replace 12345,67890 with a comma-separated list of both View IDs. Insert both Views on the same page so we can verify the output, then we can try to combine their results to produce the full JSON data structure. Let me know if you get stuck and I can take a quick look.

#611116

Wow, thank you for this. The two main reasons I decided to use TablesPress instead of writing the tables myself was that I didn't know how to:

1. Style (code) a table making it possible to sort by clicking anywhere within the header cell rather than by clicking on either the arrow or cell title themselves
2. Create a table where I could specify which columns I wanted sorting ability rather than enabling it on every single column

TablePress made it possible for a hacker like myself to easily make that possible. As I now look at what I have to do to make all this work and even then, hoping it does, seems a bit unnecessary and improbable.

Would you be able to help me style/code my existing table with the above two options, instead of doing all this JSON/multiple views syncing?

Thank you for the support you've given me.
Dave

#611213

1. Style (code) a table making it possible to sort by clicking anywhere within the header cell rather than by clicking on either the arrow or cell title themselves
I can help you expand the clickable area of the link element to fill up more horizontal and vertical space in the cell, but I can't help you respond to clicks outside of the link element. See the table here for an example, the red bordered links fill up more space in the header cells: https://christiancox-22119-bm-1.discover-wp.com/sortable-table/
Compare to this table without the expanded links: https://christiancox-22119-bm-1.discover-wp.com/sortable-table-view-2/

2. Create a table where I could specify which columns I wanted sorting ability rather than enabling it on every single column
To some degree, yes. You can remove the "wpv-heading" shortcode from any header cell to disable sorting on that column. However, some types of data are just not sortable in our system (a group of checkboxes for example), so I cannot help you enable sortable header cells for those data types.

I recommend you review the information here before you jump into tables, then let me know when you get stuck:
https://toolset.com/documentation/user-guides/view-layouts-101/#table

#611235

Thanks much. I'm going to work on it this evening and let you know how it goes. Much appreciated!

#611283

I removed the wpv-heading and it did remove the sorting for that particular column. Thank you.

Regarding the head cell sorting option, yes, the box with the red border is exactly what im trying to do. And there's no shortage of awesome table examples out there showing this functionality. But like I indicated, the very reason I switched to TablePress was that, after countless hours of me trying to recreate that, I flat out do not know how to make it happen.

I am stuck here. The table I'm trying to use, that already has the Toolset loop is located at hidden link

What do I need to do to make this possible?

Thank you.

#611478

You need to do a few things.
- Set the header link elements to be display: block; This will force the clickable area to expand horizontally to the edges of the cell.
- Apply top and bottom padding to the links. This will increase the size of the clickable area of each link by adding space above and below the text.
- Make small adjustments to the padding if necessary.

Here is the exact CSS code I used on the table I showed you:

.js-wpv-sort-trigger.js-wpv-column-header-click {
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    border: 1px solid red;
}

You can add this code to your View using the CSS panel underneath the Loop Output editor. Remove the border definition line if you don't want to show the red borders I added for explanation. Adjust the padding-top and padding-bottom values as needed. I recommend using 'px' as shown here to designate 'pixels' as the units.

#611832

Thank you Christian. Everything works great!

One more thing, what css code would allow the sorting arrow to always display rather just upon hover?

Thank you.