Data Table Block
A data-driven table where headers and rows are configured as structured attributes in the sidebar—not typed into cells. Supports density modes, header/cell styling, zebra stripes, and click-to-sort columns on the front end.
TABLE PREVIEW
| Plan | Price | Features |
|---|---|---|
| Starter | $9/mo | 5 projects, email support |
| Pro | $29/mo | Unlimited projects, priority support |
| Enterprise | Custom | Dedicated account manager, SLA |
Shown with dark header, zebra stripes, first-column emphasis
When to use this block
- Pricing comparisons, feature matrices, spec sheets
- Structured data that users may want to sort (leaderboards, schedules)
- Any tabular content that should stay consistent without inner-block editing
Table Data
Headers and rows are managed entirely in the sidebar—you do not type into cells in the editor canvas. Each header has a label, alignment, and cell type (text or image). Rows are arrays of values matching the header order.
Table Data
Sidebar Panel
HEADERS
Column 1
Column 2
Column 3
ROWS
Row 1
Starter, $9/mo, 5 projects...
Row 2
Pro, $29/mo, Unlimited...
Row 3
Enterprise, Custom, Dedicated...
HEADER OBJECT SHAPE
label
— Column heading text
align
— left, center, or right
type
— text or image
Image-type cells render an <img> from the cell value URL. Text cells render plain text.
Density
Control how tightly rows are packed. Three presets affect cell padding and overall table feel.
Normal
Plan
Starter
Pro
Default padding
Compact
Plan
Starter
Pro
Tighter rows
Clean
PLAN
Starter
Pro
No borders, minimal chrome
Header Styling
Customize the header row appearance independently from the data cells.
Header Styling
Sidebar Panel
Background Color
#272727
Text Color
#FFFFFF
Font Size
px
Font Weight
Header Border
bottom
Cell Styling
Style the data cells, including typography, alignment, and optional first-column emphasis.
Cell Styling
Sidebar Panel
Text Color
#3D3D3D
Font Size
px
Font Weight
Line Height
Text Align
First Column Emphasis
Weight
Color
#171717
EMPHASIS EXAMPLE
| Plan | Price |
|---|---|
| Starter | $9/mo |
| Pro | $29/mo |
First column uses bolder weight and darker color to act as a row label.
Font size is responsive: Mobile Tablet Desktop
Borders & Zebra Stripes
Control the table wrapper border and radius, row dividers, and alternate-row shading.
Borders & Stripes
Sidebar Panel
Wrapper Border
1px
Border Radius
Row Dividers
Zebra Stripes
ZEBRA VS FLAT
Zebra on
| Col |
|---|
| Row 1 |
| Row 2 |
| Row 3 |
Zebra off
| Col |
|---|
| Row 1 |
| Row 2 |
| Row 3 |
Sorting
When enabled, visitors can click any column header to sort rows ascending or descending. Sorting is handled on the front end by view.js—no page reload required.
Sorting
Sidebar Panel
Sortable Columns
How it works
- Headers become clickable with a sort indicator arrow
- First click sorts ascending, second click sorts descending
- Text columns sort alphabetically, numeric strings sort numerically
- Sorting is purely client-side via
view.js
Background
Apply a solid color or gradient behind the entire table wrapper.
Background
Sidebar Panel
Color
#FFFFFF
Gradient
Spacing
Padding and margin around the table wrapper. Both use per-breakpoint objects with top/right/bottom/left.
Responsive: Mobile Tablet Desktop
All Available Controls
Table Data Headers array, rows array
tableHeaders: array of objects with label (string), align (left/center/right), type (text/image). tableRows: array of arrays where each inner array matches header order. Add/remove columns and rows from the sidebar.
Density Normal, compact, clean
density: "normal" (default), "compact" (reduced cell padding), "clean" (no borders, minimal visual weight). Affects cell padding and border rendering.
Header Styling Bg/text color, font size/weight, border
headerBgColor, headerTextColor, headerFontSize, headerFontWeight, headerBorderWidth/headerBorderColor. Controls the <thead> row appearance independently from data cells.
Cell Styling Text color, font size/weight/line height, responsive
cellTextColor, cellFontSize (+Md/Lg), cellFontWeight, cellLineHeight. tdTextAlign (left/center/right). Font size is responsive across 3 breakpoints.
First Column Emphasis Weight + color override for column 1
firstColFontWeight, firstColTextColor. Makes the first column stand out as a row label with bolder weight and/or a different color.
Borders & Zebra Wrapper border/radius, row dividers, stripes
wrapperBorder, wrapperBorderRadius. rowDividers (toggle): adds border-bottom between rows. zebraStripes (toggle): alternates row background color.
Sorting Sortable toggle, client-side via view.js
sortableEnabled (boolean): when enabled, view.js attaches click handlers to <th> elements. Toggles ascending/descending sort per column. No server round-trip.
Background Color or gradient
backgroundColor, backgroundGradient. Applied to the outer wrapper behind the table. Gradient takes precedence when both are set.
Spacing Padding & margin, responsive objects
paddingMobile/Tablet/Desktop and marginMobile/Tablet/Desktop: per-breakpoint objects with top/right/bottom/left.