Streaming live at 10am (PST)

How to embed a dynamic & responsive HTML table with filters and sorting features?


#1

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!


#2

Can you articulate what you mean by dynamic table? It could mean different things to different people.


#3

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.


#4

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.


#5

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!


#6

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.