Preview Updated 2026-05-10

SQL workbench

SQL workbench shell with Editor / Console / History tabs.

Basic usage

3 predefined tabs (ids: editor, console, history). Each tab’s content is filled in by the consumer via the named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). You can also override the default list via the tabs prop.

Source: sql.html.

SELECT id, name FROM users WHERE created_at > now() - interval '1 day';

<CfSqlWorkbench>
<template #panel-editor>...</template>
<template #panel-console>...</template>
</CfSqlWorkbench>

<CfSqlWorkbench slots={{
'panel-editor': <PanelA />,
'panel-console': <PanelB />,
}} />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	First tab id	Active tab
`tabs`	`TemplatePaneTab[]`	preset	Custom tab list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

The preset tab id lists are exported as constants PROTOCOL_TABS / NETWORK_TABS / SQL_TABS, ready to reuse when customizing tabs.

Template components are a thin semantic wrapper over CfTabs. If you don’t need a predefined tab set, use CfTabs directly.