I would like to create a simple website with Webflow, showing a dynamic table that the user can filter and sort, and which would be responsive. What would be the best solution?
For the moment, the best solutions that I’ve seen consist in storing the table contents in a Google Sheets, and embedding a table generated by Awesome Table or Google Data Studio (see this example) which would be connected to this Google Sheets.
Do you have any other nice (and free) suggestions?
Thanks!
Can you articulate what you mean by dynamic table? It could mean different things to different people.
Hello by dynamic I mean that the table contents changes dynamically if the user interacts with it using the filter/sorting controls, or if the data source changes.
First you need to embed the table code, then you can add CSS styles to make your table responsive in custom code. Here is a decent resource on how to make a table responsive.
In order to allow for column sorting and other nice dynamic element features, you would do that with JavaScript. Webflow already loads JQuery for you. Take a look at this JQuery Plugin called DataTables. I have used this many times.
Thank you @webdev, this is really useful! Do you have public sample Webflow projects using jquery.datatables that we can look at? I’m not familiar with javascript but it will be a good occasion to learn if the table has all the functionalities I need (filtering and sorting in column headers). It seems very powerful as one can see there: https://datatables.net/ !
Thanks!
You should review the demos at the site link I shared. IMHO, This is the most comprehensive solution available. There is nothing special about using it on Webflow. I use this tool for backend admin interfaces I build. So no, I can’t share any.
You will probably need to enlist the services of a developer for your project if you are new to building sites/web development.
Thank you @webdev. I would like to generate the table from a CMS collection (one row per collection item, one cell per collection field). Do you know if that is possible?
Not from within webflow, since tables are not supported so you can’t use table rows, cells, and columns as a collection list.
You would need to create the table manually. You could export the collection data and then convert that to an html table ditching fields as needed. You would manually need to create links.
While It is possible to take a csv, convert to json, (or use the api) then render that as a table with javascript, that would typically required advanced skills.
I don’t know what your use case here is. If this is not a hard requirement, I would try to simplify what you are trying to do with existing capabilities and features.
Thank you @webdev for the fast reply! I’m building a website that lists some tools, and I would like to show a card view and a table view for listing these tools. The CMS collection for the tools has some boolean fields defining the tools functionalities. And I would like that the user has the ability to filter the list of tools by the functionalities that interest him.
That’s why it would be great to be able to create a dynamic table with built-in filtering functionality in columns headers.
I think the best way to get close to what I need is to use this method: Filtering CMS content - checkboxes
Hey there,
All of these steps sounds like a decent amount of work to be done to display your data.
You mentioned Awesome Table and by the description of your goal, it seems exactly what Awesome Table is capable of.
Here is a quick template example, one of many, that Awesome Table can do.
It is now also listed as an officially recognised integration tool, meaning that you can easily integrate your Awesome Table application into your Webflow page.
Can I ask what Awesome Table can do more to help you with your project?
Cheers
Awesome I can see that the solution has been significantly improved! Seems powerful, flexible and easy to use!
Before anyone runs down the Awesome Table rabbit hole, understand that the free option only allows for 100 page views. The next tier is $60 per month.
Thanks @webdev indeed it’s a problematic limitation, 100 page views are quickly reached, good to know!