Webflow sync, pageviews & more.
NEW

What are some free alternatives to using Google Sheets and Google Data Studio to create a responsive, filterable, and sortable dynamic table on a simple website built with Webflow?

TL;DR
  • Webflow CMS + Jetboost: Use CMS Collections for table data and integrate Jetboost for filtering and sorting.
  • Airtable + Table2Site/Softr: Set up an Airtable Base and embed it in Webflow for interactive tables.
  • DataTables.js: Embed an HTML table and apply DataTables.js for sorting, filtering, and pagination.
  • Glide/Google Apps Script: Use Glide for a no-code table or Google Apps Script to fetch data from Google Sheets.

For creating a responsive, filterable, and sortable dynamic table in Webflow without using Google Sheets or Google Data Studio, consider these free alternatives:

1. Webflow CMS with Jetboost (Limited Free Option)

  • Webflow CMS allows dynamic collections, which you can structure as a table.
  • Jetboost (a third-party tool) offers real-time filtering and sorting, with a free tier that supports limited functionality.
  • Steps:
  • Create a CMS Collection for your table data.
  • Use Collection Lists to structure the table layout.
  • Integrate Jetboost for interactive filtering and sorting.

2. Airtable with Table2Site or Softr

  • Airtable provides an easy-to-use database with API support.
  • Use Table2Site or Softr (free versions have limitations) to embed an interactive table.
  • Steps:
  • Set up an Airtable Base with structured table data.
  • Embed the table in Webflow using Table2Site (iframe) or Softr.

3. DataTables.js (JavaScript-Based)

  • DataTables.js is a free jQuery plugin that enables sorting, filtering, and pagination.
  • Requires custom JavaScript in Webflow’s Embed element.
  • Steps:
  • Create a static HTML table in Webflow.
  • Add the DataTables.js script using an Embed block.

4. Glide or Google Apps Script (Automation-Based)

  • Glide allows data-driven tables powered by an Airtable-like backend.
  • Google Apps Script can turn a Google Sheet into a JSON API, which you can then load into Webflow using JavaScript.
  • Steps:
  • Import your data into Glide or Google Apps Script.
  • Embed the table using a public link or JavaScript fetch requests.

Summary

For Webflow-native solutions, use Webflow CMS + Jetboost (for simple filtering) or DataTables.js (for advanced control). If you prefer external data sources, Airtable with Table2Site or Softr is a solid choice. Need a no-code interactive table? Glide or Google Apps Script can help.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I add next and previous buttons to my Webflow blog page template to provide a similar pagination feature as my non-templated blog page? I have read some Forum Entries discussing tutorials by Webflow's guide.
How can I get my Webflow site's sitemap to show up in Google Search Console and have my pages appear in Google searches? I have tried various solutions, including updating the robots.txt section and encountering an issue with fetching the sitemap. Please assist.
How can I use the Webflow API Key to upload a media file in CURL format into the assets folder?
Can I add a footer to all previously published pages in Webflow if I decide I need one?
How can I fix the issue with Zapier not adding 'https://' to URLs in Webflow collection items when the link field is missing it, causing Webflow to publish it as a subdirectory?
Does Webflow provide green hosting options to reduce CO2 emissions for websites?
Can you assist with an issue on our Webflow site involving the "Jobs" button on the jobs page?
Is it possible to duplicate a scroll interaction on a navbar/logo from one page to another in Webflow?
Are other Webflow SSL add-on users experiencing similar issues with their site being down due to an SSL issue?
Do all links in my Webflow website need to be in the format of https:// for them to work properly, or do I have any settings configured incorrectly?
How can I make two CMS images in a slide responsive to different screen sizes in Webflow, while preserving the 16:9 aspect ratio of the images?
How can I properly set the logo to 'Difference' blend mode in Webflow on mobile while also maintaining a black background for a fullscreen takeover with navigation?
How can I create a step-by-step guide for making a Horizontal Scrolling Website with functional scroll-wheel using Webflow?
Can someone help me troubleshoot the issue with my Flexbox justify: space between not working in Webflow? Please take a look in the tablet viewport.
Is it possible to have full-height sections and a fixed arrows navigation in the lower right corner in Webflow without custom code, potentially using Interactions? How can I create something like this?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?