DataTable ✅
Features
Generate a table in your Webflow site, using an external data source
e.g. Google doc table
e.g. Google sheet range
Basic styling options in the form of themes
Full or constrained height.
Automatically scrollable with a fixed header when the content does not fit
Properties
Data URL
Link
The URL to your datasource, e.g. Google Doc. Must be publicly accessible ( see Data Sources )
Range
Text
The range of data to use
Header Rows
Number
The number of rows to use as the table header
Header Cols
Number
The number of columns to use as header columns
Height
Text
Optional. If specified, constrains the table height, fixes the header and makes the row content scrollable.
Theme
Variant
Pre-defined table themes.
Placeholder
Variant
Design-only placeholder content to assist with layout decisions.
Debug
Boolean
Used for debugging only.
Data Sources
Automatic source type identification
Google Doc
Specify doc, and table index
The index of the table to use- 1, 2, 3, etc.
Great for text chunks, paragraphs, and bulleted lists Must be shared to "Anyone with the link can read"
Google Sheet
Specify sheet and range
Great for simpler tables, can do dynamic calcs, smart formatting? Must be shared to "Anyone with the link can read"
Future
More data sources
Placeholder data options for designer preview
Fixed header w/ scrollbar
Height, full v. fixed
More styling approaches
Responsiveness
Sortable columns
Column-specific formatting
Horizontal alignment
Vertical alignment
Format e.g. currency, decimals
Ideally, table-within-richtext and table-within-CMS-richtext support
Technical Notes
Component type: Standard
Support data source adapters for convenient source parsing
Automate based on URL characteristics
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables
Last updated