## Query Runner (S—276)

A compact SQL scratchpad: saved snippets, run with a keystroke, a result grid with row count and timing, and CSV copy.

- URL: https://sundaeui.dev/components/query-runner
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/query-runner.json`
- Tags: sql, postgres, console, table, query, database

Snippets along the top load a query into the editor. Run executes it through your handler and shows the rows in a small scrolling table.
Errors come back inline with the message in place of the grid. Copy CSV puts the result on the clipboard.

### Usage

```tsx
import { QueryRunner } from '@/components/sundae/query-runner'

<QueryRunner />
```

### Props

- `run` (`(sql: string) => Promise<{ columns: string[]; rows: (string | number | null)[][] }>`, required): Executes SQL.
- `snippets` (`{ name: string; sql: string }[]`): Saved queries.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Admin panels, data tooling, internal dashboards.

### When not to use

- Production write access: guard it with roles.

### Accessibility

- Results are a real table with column headers.
- Run state and row counts are announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ⌘ / Ctrl + Enter: Run