Display CSV data NOT in CMS

Hi folks.

I am struggling to find a solution for this problem I have. I need to display CSV data in the form of a table on a site but not connected through the CMS. The data will change weekly or even daily in some cases and all I really want to do is copy and paste the table into a div but I can’t find a way to do this quickly or elegantly.

Here is some sample data - Dropbox - Social Test 2.csv - Simplify your life

I want it to look something like this:

Here is my site Read-Only: Webflow - VRC

You could create an HTML table from the CSV and then use the code embed to display it within a page. This would work for embeds that are less than 10K characters (a WF limit).

If you need a solution that dynamically displays the data from a remote source then you would need to use something like papa parse or datatables for example, which requires you to handle some coding as well as potentially deal with external hosting of the data and CORS restrictions to overcome.

Thanks I will have a look into it.

Adding to Jeff’s suggestions, a couple more things that might help you in your build.

First, I’d really want to be outside of that data flow pipe. The best way to automate that is usually to have an automation (e.g. make.com) detect the new file in dropbox, and then pull the raw data into the CMS, where your site can access it easily and without CORS issues.

As long as your CSV sets remain small like the example you gave, you should be able to store your data raw in the CMS.

In your page, you can then use script to parse the CSV, render an HTML table, and display the most recent data set. Jeff’s recommendation of DataTable is probably your best approach for the rendering.

Using the CMS to store that data gives you an added bonus, which is that you can keep the historical data sets as well if it’s useful to have that history.

Alternatively, if you have the option of using Google Sheets to store your data, and you either update them manually or have a CSV → Google Sheet process setup, you may be able to use this;

View source to see how the scripts are setup, but you just provide your public sheet ID, and the library does the work of retrieving the CSV, converting it to JSON and then to clean HTML tables for Webflow.

However, it doesn’t provide any real styling or theming support, so you’ll need to write custom CSS to style the table.

Oh nice I will look into this too. One thing I want to do is avoid any extra costs as this is just a hobby project. If I can make one of these solutions work for next to nothing then that will be brilliant.

Thanks for your help folks. I have decided the best way in the end is to use the CMS. It works very well. It takes about 30 seconds longer to import the CSV Vs copy paste the table, plus looks exactly how I want.

Yea, that’s really your best bet.

Now you can take advantage of tools like PowerImporter from @JudoHacker to automate that if you store your data in Airtable, or use Make (Integromat) / Zapier to auto-import that from another source by tapping into Webhooks.

Those 30-seconds may not seem like much now, but we are in a world of automation these days and removing error prone manual tasks is becoming trivial to setup.

1 Like