shadcn.io is not affiliated with official shadcn/ui
Table Insert Dialog Block for Svelte
A team wiki's table picker shown open under its toolbar: an eight by eight grid of buttons that grows with hover and the arrow keys, the size said in words, a header-row switch, and a drawn table landing at the cursor.
Installation
Overview
Let people choose a table's size without typing numbers, with this size picker for Svelte with Ark UI. It opens from the Team handbook page of Wikiwren, a team wiki: the page's header holds an outline Insert table Button, and the page itself, a page tree, a toolbar whose Table tool is lit, a title, paragraphs and a caret at the cursor, is drawn in a hairline frame with a plus mark on each corner and no scrim, because the picker isn't modal. The picker is a small Popover under the toolbar button: an eight by eight grid of 64 buttons, each named for its place, "Row 3, column 5", that selects as you hover or focus, a line that says the size in words, "5 columns x 3 rows", a Switch for a header row, and the only Shine Button, "Insert 5 x 3 table". The arrow keys move the selection one cell, so Right and Down grow it and Left and Up shrink it, and Enter or a press on a cell inserts that size. The drawn page gets a table at the cursor, with its first row styled when the header is on. For preview the picker is drawn open in place when the page loads; the header button opens the real Popover, with the same grid. For wikis, notes, editors and any page that holds a table.
FAQ
Why is the picker already open, and what do I keep?
So you can see it without a click. On load the picker is a copy drawn in place under the drawn Table tool: a native dialog element with no scrim, so nothing is trapped or focused and the page beside it keeps working. The Insert table button opens the real picker as a non-modal Popover that hangs from the button (Escape closes it and focus goes back to the button), and the copy stays closed until a reload. Both show the same SizePicker component and share the block's state. In your app anchor the Popover to your editor's own Table button and drop the copy: the "in-place" state and the dialog element beside the toolbar.
How does the grid work from the keyboard?
The grid has one tab stop, the cell at the corner of the selection. Right and Down move the focus, and the selection with it, one cell further out, so the table grows; Left and Up bring it back; Home and End go to the first and last column of the row. The size is said in a polite message each time, "5 columns x 3 rows", and Enter on a cell inserts that size. The grid is never mirrored in a right-to-left layout: columns are counted from the start of the row as the arrows show them.
Why 64 buttons and not a canvas?
Every cell is a real button with a name, so a screen reader hears "Row 3, column 5" and a switch device can press any size. The selected rectangle is tinted and its corner is solid, so the size reads by shape and by the words under the grid, never by colour alone. On a phone the cells are about thirty-six pixels wide and the picker docks to the foot of the frame.
What does Insert do?
It draws a table with the chosen number of columns and rows at the cursor in the page behind, with a styled first row when Header row is on, says so in a polite message and closes the picker. Inserting again replaces the drawn table. Nothing is inserted anywhere else: the table lives in this tab, and the last size you chose is the next one the picker opens on.
How do I wire it up for real?
Call your editor's own command from place, with the columns, the rows and whether the first row is a header, and let the editor draw the table. Keep the grid, its keys and the words as they are; change MAX if your editor allows more than eight.
Is it accessible from the keyboard?
Yes. The picker is named Insert a table, focus starts on the selected cell, and Escape closes it and returns focus to the header button. The trigger is the button wrapped in PopoverTrigger with asChild, and the popover is controlled with open and onOpenChange and is not modal. The copy shown on load moves no focus; Escape inside it closes it and puts focus on the header button.