https://framer.com/m/TableX-CmtYcu.js
TableX
TableX takes a pasted spreadsheet or a JSON array and renders it as a themed table. Sorting, selection, sticky headers and per-column render types are props, not markup — and every colour below resolves from the project tokens, so the table follows light and dark mode.
Examples
Live specimens for every control the component exposes.
Default
Rows in, table out. The data below is TableX’s own control list, so the page documents itself.
Selection
selectable adds a checkbox column and a select-all box in the header.
Sticky header and scroll
scrollable gives the table its own scroll area; stickyHeader keeps the labels in place while the body moves.
| Prop | Type | Behaviour |
|---|---|---|
| dataSource | string | TSV/CSV paste or a JSON array — the rows themselves. |
| columnsConfig | string | JSON array overriding per-column label, align, sortable and renderType. |
| selectable | boolean | Turns on row selection checkboxes. |
| sortable | boolean | Lets a header click sort that column. |
| animated | boolean | Animates row entry and exit when the data changes. |
| layout | enum | Auto sizes columns to content; Fixed splits width evenly. |
| scrollable | boolean | Wraps the table in its own scroll area. |
| stickyHeader | boolean | Pins the header row while the body scrolls. |
| shadow | shadow | Box shadow on the table container. |
| cellPadding | number | Padding inside every cell, 4–32. |
| fontSize | number | Cell text size, 10–24. |
| headerFontSize | number | Header text size, 10–20. |
| defaultSortKey | string | Column key sorted on first render. |
| defaultSortDirection | enum | None, asc or desc for that initial sort. |
| emptyStateText | string | Message shown when there are no rows. |
| radius | number | Corner radius of the table container. |
| background | color | Table container background. |
| headerBackground | color | Header row background. |
| headerHover | color | Header background while hovered. |
| headerText | color | Header label colour. |
| rowHover | color | Row background while hovered. |
| rowSelected | color | Background of a selected row. |
| rowSelectedHover | color | Background of a selected row while hovered. |
| cellText | color | Cell text colour. |
| border | color | Rules between rows and around the table. |
| sortIcon | color | Sort indicator colour. |
| emptyText | color | Empty-state text colour. |
| badgeBG | color | Default background for badge cells. |
| badgeText | color | Default text colour for badge cells. |
| currencyText | color | Text colour for currency cells. |
| percentageText | color | Text colour for percentage cells. |
Render types
columnsConfig sets a renderType per column. Here the type column renders as a badge.
Density
cellPadding and fontSize carry the whole density change — the same rows, tighter.
cellPadding 16 · fontSize 14
cellPadding 8 · fontSize 13
Empty state
With no rows the table keeps its frame and shows emptyStateText instead of collapsing.
Props
The controls exposed on the instance panel.
Usage
Guidance carried over from the component definition.
Reach for TableX
Structured rows that need sorting or row selection.
The data arrives as pasted CSV/TSV or a JSON array.
Columns need badge, currency or percentage rendering.
A long table needs a sticky header inside its own scroll area.
Reach for something else
Cells need inline editing or input controls.
The content is not really tabular.
You need grouping, tree rows or pagination.
Io — UI Basics
Every table above is a live TableX instance rendering this component’s own control list. Colour, type and radius resolve from the project theme tokens.