Create Sortable Tables in Wordpress

Why Create Sortable Tables in Wordpress?

WordPress is a powerful website builder, but displaying data from a remote source in a user-friendly, automated way can be challenging. By offering sortable and filterable data tables, you enhance user experience, making it easier for visitors to navigate and analyze information. This improves engagement, accessibility, and the overall presentation of your content. Additionally, it saves time by reducing the need for manual updates, ensuring that your data is always current and accurate.

This guide shows you how to create an iFrame with a sortable table for your Wordpress. Your data can be kept accurate by a remote CSV file, that can be updated any time.

How to Create Sortable Tables in Wordpress

Step 1:

Log into CSV Getter, go to the Home screen and select Create export URL from CSV data.

Step 2:

Select a CSV file you have uploaded already, or use the Upload New button to add some new data. You can also update CSV files by re-uploading a file of the same name and overwriting.

Step 3:

Name your export URL and press Submit.

Step 4:

On the following Screen, copy the URL example titled Access your selected data as an HTML (with search and paging).

TIP: Test this URL in your browser to get a feel for your data table. You will notice that the data table in Sortable and Searchable.

Step 5:

Put the export URL into the iFrame code below, where it says YOUR COPIED URL.

<iframe style="width:100%; height:600px; border:none; overflow:auto;" src="YOUR COPIED URL"></iframe>

Step 6:

In the Wordpress editor, navigate to your desired page and add a block for custom HTML.

Then paste in your iFrame code.

Preview your new data table by changing block setting from HTML to preview.

Your Wordpress table is ready. 🎉

Bonus Steps

If you would also like your page visitors to download this full data, you can use another version of the export URL which downloads all the CSV data, and attach it to a button below.

Step 1:

Copy the All Selected Data URL example. This version of the export URL has no URL parameters added on so simply downloads the uploaded CSV file you started with.

Step 2:

In Wordpress editor, add a button block.

Add the copied URL as a link.

Now, when this button is pressed, the User can save the CSV file.

Remember:

You can control the data made available in export URLs by closing the URL examples screen and refining your data selection. By default, all data in your CSV file is selected for export, but you may wish to limit the columns available. This is ideal if you do not want to share your full data.

It is worth noting that you can also use CSV Getter to power data tables using dynamic data sources Airtable and Notion too, and you can overwrite your uploaded CSV files at any time, to keep your data fresh.

You can also fine tune your data output using other URL parameters like sql, details of which are outlined in the CSV Getter Docs.

You can try our URL export feature with CSV files for free (without signup) below.