CMS Table Kit · Documentation · Version 1.0
A table from your CMS, sorted your way.
How to connect a collection with Table Row, the column types, what visitors can do, phones, every setting, and four looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Table Kit on the page. In the canvas it shows demo rows, so you can design right away.
Connect your collection. Put a Collection List of your collection on the same page, with a Table Row inside its item, and connect a field to each column. The next section shows how.
Name the columns. In the kit’s Columns, add one per field, in the same order, with its label and type.
Choose what visitors can do and make it yours. Sorting, search, filter buttons and CSV, then your fonts and colours. Publish, and the table follows the CMS every time you publish.
02
How it works.
Framer’s own tables live inside formatted text, and you type them by hand. CMS Table Kit draws a whole collection as one table instead: rates, price lists, listings, schedules or plan comparisons.
Each Table Row hands its item to the kit with the same Kit name. The kit puts the rows together in the Collection List’s order and draws a real table, with column titles, groups and the tools you turn on.
CMS. Your data lives in a Framer CMS collection. One Table Row per Collection List item hands each row to the kit. The list itself takes no space on the published site.
Manual. No CMS? Type the rows in the panel and switch Source to Manual.
No API keys, no backend, no tracking. The component makes no network requests. Images load from Framer like any image on your site.
| Doubles | |||||
|---|---|---|---|---|---|
| The Almond Room | 2 | 22 m² | €110 | €145 | No |
| The Olive Room | 2 | 24 m² | €120 | €160 | Yes |
| The Cypress RoomMost booked | 2 | 28 m² | €145 | €195 | Yes |
| Family | |||||
| The Barn Room | 4 | 36 m² | €175 | €235 | Yes |
| Suites | |||||
| The Loft | 2 | 38 m² | €190 | €255 | Yes |
| The Well Suite | 4 | 42 m² | €210 | €285 | Yes |
Live component with typed rows. On your site it reads them from the Framer CMS through Table Rows.
03
Connect your collection, step by step.
Use any collection. Text, number, date, option and toggle fields all work, plus an image and a link per item if you have them.
Add a Collection List anywhere on the same page, connected to it.
Put a Table Row inside its item and set Columns to how many you need, up to 8.
Connect each column. Pick the type of the field first (Text, Number, Date or Toggle), then connect it. For an Option field, keep Text and pick Display option when you connect it: the column shows the option’s name.
Add the extras you want. Group puts rows under a title and feeds the filter buttons. Highlight marks a row. Link makes the first column a link, like the item’s own CMS page. Image shows beside the first column.
Use the same Kit name on the kit and on the Table Row. “table” is the default on both. With two tables on one page, give each its own name and its Table Row the matching one.
On the published site, Table Rows show nothing and take no space. Set the Collection List’s gap and padding to 0 so the list itself takes no space either. In the canvas, each Table Row shows a small dashed label with its first values, like “Table Row · The Olive Room · 2 · 24”, so you can check it reads the right fields.
The Collection List decides which items reach the table and in what order: its own filters, sort and limit apply first. Then visitors sort, search and filter what’s there. Leave the list’s limit high enough to include every row.
04
Columns
Add one column in the kit for each column of the Table Row, in the same order: the first column of the kit shows Column 1, and so on.
The column title.
Auto follows the field: numbers line up on the right in the site’s number format, dates show in the site’s language and toggles become a tick or a dash. Or choose Text, Number, Price, Date, Yes / No, Badge or Link.
A number shown as a price, with the Currency code you write, like EUR, USD or GBP: €120 in English, 120 € in Spanish.
For numbers and prices, like “ m²” or “ sq ft” after the number.
The value in a small pill, for a type or a status.
A web address, shown as the Link text you choose.
Auto puts numbers on the right, ticks in the centre and text on the left.
Highlight column tints the whole column, like the plan you recommend.
Values shown in the accent colour, separated by commas, like Sold or Full.
Yes / No columns read yes, true, ✓, x and sí as a tick, and no, false and — as a dash. Anything else shows as written, so a comparison can say “Unlimited” or “10 GB” in the same column.
Values already written with a currency or a unit, like “From €120”, show as written and still sort by their number.
05
What visitors can do.
A click on a column title sorts by it; a second click turns the order around. Numbers, prices and dates sort by value, text alphabetically, and empty cells go last. Sort first by sets the order the table opens with; List order keeps the Collection List’s.
A search box above the table that looks through every column, ignoring accents and capitals.
Buttons with the values of a column, or of Group, plus All.
Rows with a Group show under its title while they keep the list order. Sorting by a column mixes them on purpose.
Per page shows that many rows, then a Show more button adds the same number again.
A button that downloads the rows on screen as a spreadsheet file, with plain numbers and dates.
06
On phones.
Each row becomes a card: the first column is its title and the others show as label and value. Hide on phones leaves a column out of the cards.
The table stays a table and slides sideways. Freeze first keeps the first column in place, and a shade on the right edge shows there’s more.
Below sets the width where the phone layout starts. It’s the table’s own width, not the screen’s, so a table in a narrow column switches too.
07
Highlighted rows, images and links.
Marks a row with the Highlight colour and a tag, like “Most booked”. Bind it to a CMS toggle. Empty Highlight text shows only the colour.
Shows the item’s image beside the first column, at the Image size you choose.
The first column links to it, for example the item’s own CMS page.
08
Customize the look.
Table
Background, Header, Header text, Text, Muted, Lines, Stripe, Highlight, Accent and Accent text.
Border, Shadow, Radius, Stripes and Density: Compact, Regular or Relaxed.
Type
Header font, Cell font, First column font and Controls font, for the search box and the buttons.
Numbers use tabular figures, so columns of prices line up.
Recipes
Room · Guests · Size with suffix m² · Low season and High season as Price · Breakfast from a toggle · Group from the room type · Filter by Group · Row image on
Price as Price, USD · Status as Badge, Accent when Sold · Sort first by Price, Descending · Filter by Type · CSV download on
Source Manual · Feature, then one Yes / No column per plan · Highlight column on the plan you recommend · Sorting and Search off · On phones Scroll
Service · Price as Price · Group by category · Stripes on · Density Compact
09
Settings reference.
Data
CMS or Manual.
CMS only. The same as the Table Rows that feed it.
Manual only. Column 1 to Column 8, Group, Highlight, Link and Image.
Label, Type, Align, Sortable, Hide on phones, Highlight column, Currency, Decimals, Suffix, Link text, Accent when.
Read by screen readers, and the name of the CSV file.
Visitor tools
Sorting, Sort first by, Direction.
Search, Filter by, Group titles, CSV download.
Row image, Image size, Highlight text.
Max rows — up to 500. Per page — rows before a Show more button. 0 shows them all.
Layout
On phones — Cards or Scroll. Below — the width where it starts. Freeze first — Scroll only.
Sticky header and Header offset.
Stripes, Density, When empty.
Style
Background, Header, Header text, Text, Muted, Lines, Stripe, Highlight, Accent, Accent text.
Border, Shadow, Radius.
Header font, Cell font, First column font, Controls font.
Text
Search text, All text, More text, CSV text, Empty text, No match text.
Results text, Yes text, No text, Sort text, Filter text — read by screen readers.
Group text — the column title for Group in the CSV.
Table Row
The same as the kit it feeds.
How many, up to 8.
The field type (Text, Number, Date or Toggle) and the field.
Optional.
10
Languages
Every label is a property, so Framer Localization translates it like any other text.
Numbers, prices and dates follow the page’s language: €1,250 and Oct 16, 2026 in English, 1250 € and 16 oct 2026 in Spanish.
The values show as you wrote them. Translate them with Framer Localization on your CMS fields.
11
Privacy
The component sends nothing anywhere. It makes no network requests, stores nothing in the visitor’s browser and sets no cookies. The CSV file is built in the visitor’s browser.
12
Accessibility
A real table, with column and row headers. A sorted column says so to screen readers.
Column titles that sort are buttons with names, like “Sort by Price”.
Ticks and dashes have names for screen readers: Yes and No.
After a search or a filter, screen readers hear how many rows are left.
Filter buttons say whether they’re pressed. Focus is always visible, in the accent colour.
13
Troubleshooting
The canvas shows demo rows because no Table Row reached the kit. Check that the Collection List is on the same page, that each item holds a Table Row, and that both Kit names match.
The kit’s Columns and the Table Row’s columns go in the same order: the first column of the kit shows Column 1.
Set that column’s field type on the Table Row to Number, Date or Toggle first.
Choose Display option in it: the column then shows the option’s name.
Keep them in a Number field, or set the column’s Type to Number or Price.
A parent frame clips its content (Overflow: Clip or Hidden), or the table is in Scroll on a narrow width. Raise Header offset to clear a sticky site header.
Set the list’s gap and padding to 0.
All its columns are empty, the Collection List’s filters or limit leave it out, or Max rows is lower than your number of rows.
14
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
1.0 · October 2026 — First release: tables from the Framer CMS through Table Row, with typed columns, Price and Badge columns, sorting, search, filter buttons, group titles, highlighted rows and columns, row images and links, cards or scroll on phones, sticky header, CSV download and full documentation.
15
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one designer and unlimited client projects. Reselling or redistributing the component isn’t allowed.