Markdown Table Generator

The Markdown Table Generator is a visual grid editor rather than a text parser: you build the table by editing header inputs and cell inputs directly, set each column's alignment with left/center/right toggle buttons, and reorder rows with up/down arrows (which splice the row to a new index). It enforces a minimum of one column and one row, refusing to delete the last of either with a toast error, and removing a column also strips that column's key from every row's cell map. A 'Load Sample' button fills a three-column Name/Role/Status table (Alice/Bob/Charlie, with Status center-aligned), and a live HTML preview below the output mirrors the alignment classes so you see the rendered table as you type.

Markdown is regenerated on every keystroke from the column and row state. Column alignment is encoded into the separator row using the three standard markers - left is ':---', center is ':---:', and right is '---:' - and every cell is escaped so a literal pipe '|' becomes '\|' and any newline becomes a '<br>' tag, preventing user text from breaking the table structure. Output is controlled by two checkboxes wired to the URL via useUrlStates: 'Prettify' (on by default) and 'Compact'. The current configuration is shareable through ShareConfigButton, so a link reproduces your chosen formatting flags.

In Prettify mode the generator computes a maximum width per column (the longest of the header and all cell strings, with a floor of 3), then pads every cell to that width so the raw Markdown source is column-aligned and readable in a plain text editor - right-aligned columns are right-justified, center columns split the padding between both sides, and the dash count in the separator scales to match. With Prettify off, output is unpadded: the default produces standard spaced rows like '| a | b |', while ticking Compact removes the inner spaces entirely to emit minimal '|a|b|' rows for the smallest possible source. You can copy the result to the clipboard or download it as a 'table.md' file (a text/markdown Blob), and all generation happens locally in the browser.