shadcn.io is not affiliated with official shadcn/ui
Slow Query Table Block for Svelte
A database console window listing slow queries with clamped monospace SQL, a Show more per query, a Wrap long queries switch for all, a sortable Total head and a Copy button that really copies.
Installation
Overview
Read long SQL without losing the table, with this slow query table for Svelte with Ark UI. A framed window of fixed height has a top bar with the console's name, the period and a Switch labelled "Wrap long queries", over one native table of queries in a scrolling region with a sticky head and a one-line status foot. The point is the long cell: the SQL is set in monospace and clamped to two lines, keywords at medium weight, names at normal weight and literals at 70 per cent strength, and every query that is longer than that has its own "Show more" and "Show less" while the switch opens or closes all of them. The columns are calls, average, total (calls times average) and rows; the Total head sorts slowest first, fastest first or back to the listed order. Each query has a Copy Button that copies the statement to the clipboard. Opening a query grows its row inside the scrolling region, never the window. On a phone Rows goes, and below the small breakpoint the call count moves under the query. It's built from Switch, Button and Guides. For query consoles, slow-log viewers and any table with a long text cell.
FAQ
How does the clamping work, and why not an expanding row?
The cell is a code block with line-clamp-2; opening it removes the clamp, so the text grows in place and the other columns stay put. An expanding row adds a second row of content, which is a different job (see the expandable table). Only queries longer than LONG_FROM characters get the button, so a short statement never shows a control that does nothing.
How are the keywords and literals picked out?
tokensOf splits each statement with one regular expression into strings, parameters, numbers, words, spaces and symbols, once, at module scope. A word in the KEYWORDS set is drawn at medium weight, a string, a number or a $1 parameter at 70 per cent strength, and everything else at normal weight. It is weight and strength, not colour, so it reads in any theme and for colour-blind readers. It is a highlighter for display, not a SQL parser.
How do the switch and the buttons relate?
They share one list of open queries. The switch is on when every long query is open; turning it on opens them all and off closes them all, and a Show more changes one. Pressing the last Show more switches the switch on, and closing one switches it off, because the switch is derived from the list.
Does Copy really copy?
Yes: it writes the statement to the clipboard and the button shows a tick for a moment. If the browser refuses (an insecure page, for example), the status line says it could not copy and to select the query instead. Nothing leaves the page, and the figures are typed in SOURCES; to wire real ones, replace the list with your slow-query view and keep the table.
Is it accessible?
Yes. It's a native table with a caption, a row header holding each statement, a Total head with aria-sort and a real button inside, and Show more buttons that carry aria-expanded and are named for their query. The region scrolls and is focusable, the status foot is a polite live region present from the start, and the switch has its own name.