Implementation:Apache Druid SqlInput

Knowledge Sources	Apache_Druid
Domains	Web_Console, Data_Exploration
Last Updated	2026-02-10 10:00 GMT

Overview

SqlInput is a forwardRef React component that wraps the Ace editor to provide a SQL expression editing experience with autocomplete support for Druid SQL functions and column names.

Description

The component renders an AceEditor configured with the "dsql" mode and the solarized_dark theme. It provides live autocompletion powered by a custom Ace completer that integrates with the getSqlCompletions utility, offering suggestions for available SQL functions (from the SqlFunctionsContext) and column names. The editor supports configurable height, gutter visibility, placeholder text, and read-only mode. An imperative goToPosition method is exposed via the forwarded ref for programmatic cursor positioning.

Usage

Used throughout the Explore view as the SQL expression editor component, including in ExpressionMenu, ColumnDialog, and MeasureDialog. It provides consistent SQL editing capabilities wherever users need to enter or modify SQL expressions.

Code Reference

Source Location

• Repository: Apache Druid
• File: web-console/src/views/explore-view/components/sql-input/sql-input.tsx
• Lines: 1-137

Signature

export interface SqlInputProps {
  value: string;
  onValueChange?: (newValue: string) => void;
  placeholder?: string;
  editorHeight?: number;
  columns?: readonly Column[];
  autoFocus?: boolean;
  showGutter?: boolean;
  includeAggregates?: boolean;
}

export const SqlInput = React.forwardRef<
  { goToPosition: (rowColumn: RowColumn) => void } | undefined,
  SqlInputProps
>(function SqlInput(props, ref): JSX.Element);

Import

import { SqlInput } from './views/explore-view/components/sql-input/sql-input';

I/O Contract

Inputs

Name	Type	Required	Description
value	string	Yes	The current SQL expression string displayed in the editor
onValueChange	(newValue: string) => void	No	Callback invoked when the editor content changes; editor is read-only when omitted
placeholder	string	No	Placeholder text shown when the editor is empty; defaults to "SQL filter"
editorHeight	number	No	Editor height in pixels; uses 100% height when not specified
columns	readonly Column[]	No	Column names provided to the autocomplete completer for suggestions
autoFocus	boolean	No	Whether the editor should receive focus on mount
showGutter	boolean	No	Whether to show the line number gutter
includeAggregates	boolean	No	When true, includes aggregate function suggestions in autocomplete

Outputs

Name	Type	Description
JSX.Element	ReactElement	An Ace-based SQL editor with live autocomplete and syntax highlighting
ref.goToPosition	(rowColumn: RowColumn) => void	Imperative method to move the cursor to a specific row and column position

Usage Examples

SQL Expression Editor

<SqlInput
  value={formula}
  onValueChange={setFormula}
  columns={querySource.columns}
  placeholder="SQL expression"
  autoFocus
/>

Read-Only SQL Display with Custom Height

<SqlInput
  value={queryString}
  editorHeight={400}
  showGutter
  placeholder="No query"
/>

Related Pages

• Environment:Apache_Druid_Web_Console_Development