drawTable — interactive playground
sparkles.core_cli.ui.table.drawTable renders a boxed table entirely in terminal cells — it measures every cell with sparkles.base.text (the same width engine documented in the text spec), so CJK, emoji, combining marks, and ANSI-styled content all stay aligned.
The widget below is the real drawTable compiled to WebAssembly by nix build .#table-wasm (full Phobos via the LDC WASI fork) and driven from your browser — not a re-implementation. Tweak the Storybook-style controls and watch the output re-render live.
What the controls map to
Every control corresponds to a field of TableProps (or the table data itself):
| Control | Maps to |
|---|---|
| Grid data | a dense string[][] (tab = column, newline = row) |
Raw cells → Cell[][] | dense cells with colSpan / rowSpan |
Raw cells → Placement[] | sparse, order-independent cells that name their own (row, col) |
| border / columnSeparators / rowSeparators | the frame + interior separator toggles |
| headerRows / headerCols | a distinct heavy rule after N header rows / stub columns |
| preset | stylePresets["rounded" | "square" | "ascii" | "double" | "heavy"] |
| maxWidth | total-width cap (frame included); columns shrink + wrap to fit |
| title / footer | frame title / footer spliced into the top & bottom border (…-truncated when narrow) |
| defaultAlign / per-column align | Align{left,center,right,decimal} horizontal alignment (decimal aligns a numeric column on its dot) |
| defaultVAlign / per-column valign | VAlign{top,middle,bottom} vertical alignment (rowspan / wrap) |
| per-column max width | columnMaxWidths — cap one column; its content wraps |
| Advanced → raw spec | the exact JSON request; custom glyphs overrides go here |
The Samples cover the headline features: styled + CJK/emoji content, column & row spans, sparse placement, width-capped wrapping, and decimal alignment under a framed title/footer. Show D code prints the equivalent drawTable(…, TableProps(…)) call.
NOTE
Alignment in the browser depends on the page's monospace font rendering CJK and emoji at exactly two cells; a terminal is the source of truth. The playground nudges the browser toward full-width metrics, but small visual differences from a real terminal are a font-rendering artifact, not a drawTable bug.
Beyond what the controls expose, Cell/Placement also carry per-cell halign/valign overrides (e.g. a centered colspan banner). The same layout also renders lazily: drawTableLines (a forward range of lines, ready for a LiveRegion frame), drawTableChunks (cell-by-cell pacing), and a writer overload all emit drawTable's exact bytes.
For the full API — spans, alignment, glyph presets, custom glyphs, validation, streaming — see the module libs/core-cli/src/sparkles/core_cli/ui/table/ and the runnable gallery libs/core-cli/examples/table.d.