Legs for Craft CMS
Tables & the editor
A table in Legs is a first-class Craft element. That buys the element index, search, permissions, the trash — and reference tags, which is how it gets onto a page.
The library
Legs → Tables is an ordinary element index: search it, sort it, filter it by how the table was built. The Embed column shows each table's reference tag with a copy button, so getting a table into an entry never requires opening it.
Every table has a handle, generated from its name and editable. It is what the embed code and craft.legs.render() refer to, so renaming one means updating the places that use it. Handles must be unique among live tables; a table in the trash releases its handle immediately, and takes it back — or a variation of it — if you restore it.
The grid
| Action | How |
|---|---|
| Move between cells | Tab, Shift+Tab, Enter |
| Add a row at the end | Tab off the last cell |
| Fill the grid from a spreadsheet | Paste a block of cells into any cell |
| Insert or delete rows and columns | The toolbar, relative to the selected cell |
| Select a whole row or column | Click its number or letter |
| Undo / redo | ⌘+Z / ⌘+Shift+Z, or the toolbar |
Pasting is worth calling out: if what is on the clipboard contains tabs or newlines, Legs treats it as a grid rather than as text for one cell, works out the delimiter, and expands the table to fit. That is usually the fastest way to build a table — assemble it in a spreadsheet, then paste it in.
Header and footer rows
A table has a count of header rows and a count of footer rows rather than separate blocks of data. Header row and Footer row in the toolbar toggle them. The renderer turns those counts into <thead> and <tfoot>, and the header row is what labels each cell when the table stacks on a phone — which is why a table without one loses its labels.
HTML in cells
Cells may contain HTML — a link, a <strong>, an image. Content is purified on save and again on render, using Craft's own HTML Purifier configuration, so a cell cannot smuggle a script into a page. If you would rather cells were plain text, turn Allow HTML in cells off in the settings; a cell that looks like markup then shows as text.
Merged cells (Pro)
A merge is recorded once, as a rectangle anchored at its top-left cell, rather than as attributes scattered over the cells it covers. That means the editor and the renderer cannot disagree about which cells are swallowed, and clearing a merge is a single removal. Deleting a row or column that a merge spans drops the merge rather than leaving it describing cells that are no longer beneath it.
Presentation options
Each table carries its own options, set in the sidebar of its edit screen:
| Option | What it does |
|---|---|
| Sortable | Visitors sort by clicking a column heading |
| Sort by default | Which column, and which direction, the table arrives sorted by |
| Searchable (Pro) | Adds a box that filters rows as the visitor types |
| Paginate (Pro) | Pages long tables, with a rows-per-page setting |
| When it is too wide | Scroll sideways, stack each row (Pro), or do nothing |
| Striped, hover, borders, compact, sticky header | Presentation, all independent |
| Evaluate formulas (Pro) | Cells starting with = are calculated at render |
| CSS class | Added to the wrapper, for sites that style tables themselves |
These are the table's own settings and every embed of it inherits them. A single appearance can override them — see embedding — but the defaults live here, in one place, which is the point of a library.
Permissions
- View tables — see the Legs section and use the picker
- Create and edit tables
- Delete tables