Data Table
The Table component is a flexible, responsive data table built entirely with native Webflow components — perfect for displaying structured content, datasets, or dashboard overviews.
At its core, it consists of:
- Data Table Wrapper – the outer container that defines the full table layout
- Data Table Row – individual horizontal rows inside the table
- Data Table Head – the heading blocks of each row, representing columns
- Data Table Cell – the building blocks of each row, representing columns
Usage
- Drag the Data Table Wrapper onto the canvas.
- Insert Data Table Rows into the wrapper to define each row.
- Add one or more Cells inside each row.
- Customize each Cell by:
- Adding your content (text, buttons, icons, etc.)
- Adjusting its width to control column layout and consistency
- Editing styles and alignment as needed
By controlling the width of each Cell directly, you have full flexibility over the column structure — making it easy to maintain a clean, readable layout across different screen sizes.
Using the Data Table with CMS
You can use the Data Table component with CMS content by simply dropping a Collection List Wrapper into the table's body slot. Inside the Collection List, add a Row component, and place your desired Cell components inside the row — just like in the static example.
Each Cell can then hold dynamic content, like plain text, links, or status badges — all connected to your CMS fields. See this as an example: