Data Table
Answer "which size am I?" next to the product
Size charts, spec sheets and price lists typed straight into the page: a header row and a header column when you need them, figures lined up on the right, and a phone layout that scrolls or turns every row into a block.
A size chart with a header row, a header column and stripes.
The size question answered first
A size chart on the product page or in a popup beside it is read before the purchase, not after the parcel comes back. The sizes stay in bold down the first column, so the eye finds its row.
A table that survives a phone
Below 768 px the table either scrolls sideways inside its own box, with the header column pinned, or turns every row into a block with the column name above each value. The page never scrolls sideways.
Typed, not pasted
Type into the cells straight on the stage and drag a row to reorder it. Switch on "Align Figures Right" and the prices line up on the right by themselves. No HTML to paste, no plugin to install.
Use cases
Where shops put it
A size chart in a size-guide popup
Sizes down the first column, the measurements across, one block per size on a phone, behind a "Size guide" link on the product page.
A spec sheet under the description
Two columns, the property names on the left and the values on the right, in a quiet style without a header row.
Prices and delivery rates
A price list with the header in your brand colour, lines around every cell and the prices aligned right, with a dash where a service is not offered.
- Three appearances
- For the header row: a light grey band, a rule under it, or your own colour with white words.
- Two to six columns.
- Narrowing the table hides the extra columns rather than deleting them.
- A header row and a header column
- Each switched on or off. The header is the first row, so dragging another row to the top makes it the header.
- Alignment
- Left, centred or right, plus columns of figures aligned right automatically, headings included.
- Stripes, lines
- Between rows or around every cell, two sizes, and a sticky header for long tables on desktop.
- The phone layout
- A table that scrolls sideways, or one block per row with the header above every value.
- A caption
- Above the table that screen readers use as its name.
Shown in the demo store
A two-column spec sheet in the Minimal appearance.
A price list with a navy header and the figures aligned right.
Five columns of delivery prices with a dash for "not offered".
On a phone: one block per size, and a wide table that scrolls sideways.
Native and honest
Your content is written in Magento's own format
Every row stores its grid in the page itself. With the module switched off, a table stays a table: the caption, then every row as a line of columns lined up with the rows around it. What goes is the styling: the bold, the header band, the lines and the stripes. A screen reader gets a real table, announced with its size, with every cell read together with its column heading.
Where the promise stops: a cell holds plain text only. No links, no pictures, no bold inside a cell and no merged cells. And the table shows what you type: nothing is read from your catalogue.
Every element saves itself the way native Page Builder saves its own: a plain <div data-content-type="wrizu_…"> with its settings in data-* attributes, stored with the page. There is no proprietary database table, no shortcode, no second editor and nothing that has to be converted later.
That has a practical consequence. Disable the module and the storefront keeps serving those pages: headings, copy, images, links and buttons stay visible and clickable, and the styling you set per element — alignment, colours, spacing — stays with them, because it lives in a <style> block stored with the page rather than in our stylesheets. What you lose is what our CSS draws: the layouts, the borders and shadows, the button variants and the bundled icons.
One honest warning
With the module switched off, do not open and save a page that contains Wrizu elements — Page Builder flattens any page holding a content type it does not know into a single HTML Code block, and that save cannot be undone. It behaves that way with every unknown content type, not only with ours, and the storefront is unaffected either way; the rule is simply to leave those pages alone until the module is back on.
Works with any Luma-based theme
The elements are built on the same front-end stack the native Page Builder uses: jQuery and the libraries Page Builder already loads. They target Luma-based themes — Magento Blank, Luma, and the custom themes shops build on either of them.
Buttons use Luma's own button mixins, so a Wrizu button looks like a button from your theme rather than like a button from a plug-in. All of the module's CSS is scoped to [data-content-type^="wrizu_"], so it styles our elements and nothing else in your theme.
Requirements
- Magento Open Source or Adobe Commerce 2.4.6 or newer, with the
Magento_PageBuildermodule enabled - PHP 8.1 to 8.5 — whichever your Magento version supports
- No other extension, no external icon font, no CDN dependency
Questions about this element
Content blocks
More in Content blocks
Blockquote / Pull Quote
A quotation set apart from the text — beside an accent bar, as a pull quote or on a card.
Flip Box
A card with two sides that turns over on a tap, a click or from the keyboard — and on hover.
Icon List
Rows of icon and text, stacked or in a grid of two, three or four.
Image Box
An icon or an image, a heading, copy and an optional button.
Notice Box
A framed message with an icon, in one of five meanings.
Team Members
The people behind the shop in cards or rows — a photo, a name, a job title, a few sentences.
Timeline
A history with dates or a process with numbered steps, down the page or across it.
Thirty-five conversion elements for the Page Builder you already have
Wrizu Page Builder Extensions adds them to the native Magento 2 Page Builder — no second editor, no proprietary format, no content held hostage.