Function InteractiveQuestion

InteractiveQuestion(props: InteractiveQuestionProps): Element
A component that renders an interactive question.
Parameters
- props: InteractiveQuestionProps
  - OptionalclassName?: string
    A custom class name to be added to the root element.
  - OptionalentityTypes?: EmbeddingEntityType[]
    An array that specifies which entity types are available in the data picker
  - Optionalheight?: Height<string | number>
    A number or string specifying a CSS size value that specifies the height of the component
  - OptionalhiddenParameters?: string[]
    A list of parameters to hide.
  - OptionalinitialSqlParameters?: SqlParameterValues
    Initial values for the SQL parameters.
  - OptionalisSaveEnabled?: boolean
    Whether to show the save button.
  - OptionalonBeforeSave?: (
    question: undefined | MetabaseQuestion,
    context: { isNewQuestion: boolean },
    ) => Promise<void>
    A callback function that triggers before saving. Only relevant when isSaveEnabled = true
  - OptionalonNavigateBack?: () => void
    A callback function that triggers when a user clicks the back button.
  - OptionalonRun?: (question: undefined | MetabaseQuestion) => void
    A callback function that triggers when a question is updated, including when a user clicks the Visualize button in the question editor
  - OptionalonSave?: (
    question: MetabaseQuestion,
    context: { dashboardTabId?: number; isNewQuestion: boolean },
    ) => void
    A callback function that triggers when a user saves the question. Only relevant when isSaveEnabled = true
  - OptionalonVisualizationChange?: (
        display:
            | "object"
            | "table"
            | "bar"
            | "line"
            | "pie"
            | "scalar"
            | "row"
            | "area"
            | "combo"
            | "pivot"
            | "smartscalar"
            | "gauge"
            | "progress"
            | "funnel"
            | "map"
            | "scatter"
            | "waterfall"
            | "sankey"
            | "list",
    ) => void
    A callback function that triggers when the visualization type changes.
  - Optionalplugins?: MetabasePluginsConfig
  - questionId: null | SdkQuestionId
  - Optionalstyle?: CSSProperties
    A custom style object to be added to the root element.
  - OptionaltargetCollection?: SdkCollectionId
    The collection to save the question to. This will hide the collection picker from the save modal. Only applicable to interactive questions.
  - Optionaltitle?: SdkQuestionTitleProps
    Determines whether the question title is displayed, and allows a custom title to be displayed instead of the default question title. Shown by default. Only applicable to interactive questions when using the default layout.
  - Optionalwidth?: Width<string | number>
    A number or string specifying a CSS size value that specifies the width of the component
  - OptionalwithChartTypeSelector?: boolean
    Determines whether the chart type selector and corresponding settings button are shown. Only relevant when using the default layout.
  - OptionalwithDownloads?: boolean
    Enables the ability to download results in the interactive question.
  - OptionalwithResetButton?: boolean
    Determines whether a reset button is displayed. Only relevant when using the default layout.
Returns Element

InteractiveQuestion

BackButton

BackButton: (props: InteractiveQuestionBackButtonProps) => null | Element

Type Declaration

- (props: InteractiveQuestionBackButtonProps): null | Element
- Function
  A navigation button that returns to the previous view. Only visible when rendered within the InteractiveDashboardProps.renderDrillThroughQuestion prop.
  Parameters
  - props: InteractiveQuestionBackButtonProps
  Returns null | Element

Breakout

Breakout: () => null | Element

Type Declaration

- (): null | Element
- Function
  A set of badges for managing data groupings (breakouts). Uses question context for breakout functionality.
  
  Returns null | Element

BreakoutDropdown

BreakoutDropdown: (
props: InteractiveQuestionBreakoutDropdownProps,
) => null | Element

Type Declaration

- (props: InteractiveQuestionBreakoutDropdownProps): null | Element
- Function
  Dropdown button for the Breakout component.
  Parameters
  - props: InteractiveQuestionBreakoutDropdownProps
  Returns null | Element

ChartTypeDropdown

ChartTypeDropdown: (props: MenuProps) => Element

Type Declaration

- (props: MenuProps): Element
- Function
  Dropdown for selecting the visualization type (bar chart, line chart, table, etc.). Automatically updates to show recommended visualization types for the current data.
  Parameters
  - props: MenuProps
  Returns Element

ChartTypeSelector

ChartTypeSelector: (props: StackProps) => Element

Type Declaration

- (props: StackProps): Element
- Function
  Detailed chart type selection interface with recommended visualization options.
  Parameters
  - props: StackProps
  Returns Element

DownloadWidget

DownloadWidget: (props: StackProps) => null | Element

Type Declaration

- (props: StackProps): null | Element
- Function
  Provides a UI widget for downloading data in different formats (CSV, XLSX, JSON, and PNG depending on the visualization).
  Parameters
  - props: StackProps
  Returns null | Element

DownloadWidgetDropdown

DownloadWidgetDropdown: (props: PopoverProps) => Element

Type Declaration

- (props: PopoverProps): Element
- Function
  Provides a button that contains a dropdown that shows the DownloadWidget.
  Parameters
  - props: PopoverProps
  Returns Element

Editor

Editor: (props: InteractiveQuestionEditorProps) => undefined | Element

Type Declaration

- (props: InteractiveQuestionEditorProps): undefined | Element
- Function
  Advanced query editor that provides full access to question configuration. Includes filtering, aggregation, custom expressions, and joins.
  Parameters
  - props: InteractiveQuestionEditorProps
    - OptionalhasVisualizeButton?: boolean
    - OptionalonApply?: () => void
      Callback function executed when changes are applied
  Returns undefined | Element

EditorButton

EditorButton: (
props: InteractiveQuestionEditorButtonProps,
) => undefined | false | Element

Type Declaration

- (props: InteractiveQuestionEditorButtonProps): undefined | false | Element
- Function
  Toggle button for showing/hiding the Editor interface. In custom layouts, the EditorButton must have an InteractiveQuestionEditorButtonProps.onClick` handler or the button won't do anything when clicked.
  Parameters
  - props: InteractiveQuestionEditorButtonProps
    - OptionalisOpen?: boolean
      Whether the editor is currently open
      
      Default Value
      false
    - OptionalonClick?: MouseEventHandler<HTMLButtonElement>
      Callback function to be called when the button is clicked
  Returns undefined | false | Element

Filter

Filter: (props: InteractiveQuestionFilterProps) => Element

Type Declaration

- (props: InteractiveQuestionFilterProps): Element
- Function
  A set of interactive filter badges that allow adding, editing, and removing filters. Displays current filters as badges with an "Add another filter" option.
  Parameters
  - props: InteractiveQuestionFilterProps
    - OptionalwithColumnItemIcon?: boolean
      Whether to show the icon for the column item
  Returns Element

FilterDropdown

FilterDropdown: (
props: InteractiveQuestionFilterDropdownProps,
) => null | Element

Type Declaration

- (props: InteractiveQuestionFilterDropdownProps): null | Element
- Function
  A dropdown button for the Filter component.
  Parameters
  - props: InteractiveQuestionFilterDropdownProps
    - OptionalwithColumnItemIcon?: boolean
      Whether to show the icon for the column item
  Returns null | Element

Notebook

Notebook: (props: InteractiveQuestionEditorProps) => undefined | Element

Type Declaration

- (props: InteractiveQuestionEditorProps): undefined | Element
- Function
  Advanced query editor that provides full access to question configuration. Includes filtering, aggregation, custom expressions, and joins.
  Parameters
  - props: InteractiveQuestionEditorProps
    - OptionalhasVisualizeButton?: boolean
    - OptionalonApply?: () => void
      Callback function executed when changes are applied
  Returns undefined | Element

Deprecated

Use InteractiveQuestion.Editor instead

NotebookButton

NotebookButton: (
props: InteractiveQuestionEditorButtonProps,
) => undefined | false | Element

Type Declaration

- (props: InteractiveQuestionEditorButtonProps): undefined | false | Element
- Function
  Toggle button for showing/hiding the Editor interface. In custom layouts, the EditorButton must have an InteractiveQuestionEditorButtonProps.onClick` handler or the button won't do anything when clicked.
  Parameters
  - props: InteractiveQuestionEditorButtonProps
    - OptionalisOpen?: boolean
      Whether the editor is currently open
      
      Default Value
      false
    - OptionalonClick?: MouseEventHandler<HTMLButtonElement>
      Callback function to be called when the button is clicked
  Returns undefined | false | Element

Deprecated

Use InteractiveQuestion.EditorButton instead

QuestionSettings

QuestionSettings: (props: StackProps) => null | Element

Type Declaration

- (props: StackProps): null | Element
- Function
  Settings panel for configuring visualization options like axes, colors, and formatting. Uses question context for settings.
  Parameters
  - props: StackProps
  Returns null | Element

QuestionSettingsDropdown

QuestionSettingsDropdown: (
props?: InteractiveQuestionQuestionSettingsDropdownProps,
) => Element

Type Declaration

- (props?: InteractiveQuestionQuestionSettingsDropdownProps): Element
- Function
  Dropdown button that contains the QuestionSettings component.
  Parameters
  - Optionalprops: InteractiveQuestionQuestionSettingsDropdownProps
    - Optionalheight?: Height<string | number>
      Height for the dropdown menu
  Returns Element

QuestionVisualization

QuestionVisualization: (
    props: { className?: string; style?: CSSProperties } & {
        height?: Height<string | number>;
        width?: Width<string | number>;
    } & {},
) => Element

Type Declaration

- (
      props: { className?: string; style?: CSSProperties } & {
          height?: Height<string | number>;
          width?: Width<string | number>;
      } & {},
  ): Element
- Function
  The main visualization component that renders the question results as a chart, table, or other visualization type.
  Parameters
  - props: { className?: string; style?: CSSProperties } & {
    height?: Height<string | number>;
    width?: Width<string | number>;
    } & {}
    - OptionalclassName?: string
      A custom class name to be added to the root element.
    - Optionalstyle?: CSSProperties
      A custom style object to be added to the root element.
    - Optionalheight?: Height<string | number>
      A number or string specifying a CSS size value that specifies the height of the component
    - Optionalwidth?: Width<string | number>
      A number or string specifying a CSS size value that specifies the width of the component
  Returns Element

ResetButton

ResetButton: (props?: ButtonProps) => null | Element

Type Declaration

- (props?: ButtonProps): null | Element
- Function
  Button to reset question modifications. Only appears when there are unsaved changes to the question.
  Parameters
  - Optionalprops: ButtonProps
  Returns null | Element

SaveButton

SaveButton: (props?: InteractiveQuestionSaveButtonProps) => Element

Type Declaration

- (props?: InteractiveQuestionSaveButtonProps): Element
- Function
  Button for saving question changes. Only enabled when there are unsaved modifications to the question.
  
  Note: Currently, in custom layouts, the SaveButton must have an onClick handler or the button will not do anything when clicked.
  Parameters
  - Optionalprops: InteractiveQuestionSaveButtonProps
    - OptionalonClick?: MouseEventHandler<HTMLButtonElement>
      A handler function to be called when the button is clicked
  Returns Element

SaveQuestionForm

SaveQuestionForm: (
props: InteractiveQuestionSaveQuestionFormProps,
) => null | Element

Type Declaration

- (props: InteractiveQuestionSaveQuestionFormProps): null | Element
- Function
  Form for saving a question, including title and description. When saved:
  - For existing questions: Calls SdkQuestionProps.onSave
  - Both callbacks receive the updated question object
  - Form can be cancelled via the InteractiveQuestionSaveQuestionFormProps.onCancel
  Parameters
  - props: InteractiveQuestionSaveQuestionFormProps
    - OptionalonCancel?: () => void
      Callback function executed when save is cancelled
  Returns null | Element

SqlParametersList

SqlParametersList: () => null | Element

Type Declaration

- (): null | Element
- Function
  Parameters list for SQL questions
  
  Returns null | Element

Summarize

Summarize: () => Element

Type Declaration

- (): Element
- Function
  Interface for adding and managing data summaries (like counts, sums, averages). Displays as a set of badges. Uses question context for summarization functionality.
  
  Returns Element

SummarizeDropdown

SummarizeDropdown: (props: InteractiveQuestionSummarizeDropdownProps) => Element

Type Declaration

- (props: InteractiveQuestionSummarizeDropdownProps): Element
- Function
  Dropdown button for the Summarize component.
  Parameters
  - props: InteractiveQuestionSummarizeDropdownProps
  Returns Element

Title

Title: (
props: { className?: string; style?: CSSProperties },
) => undefined | Element

Type Declaration

- (props: { className?: string; style?: CSSProperties }): undefined | Element
- Function
  Displays a title based on the question's state. Shows:
  - The question's display name if it's saved
  - An auto-generated description for ad-hoc questions (non-native queries)
  Parameters
  - props: { className?: string; style?: CSSProperties }
    - OptionalclassName?: string
      A custom class name to be added to the root element.
    - Optionalstyle?: CSSProperties
      A custom style object to be added to the root element.
  Returns undefined | Element

VisualizationButton

VisualizationButton: () => null | Element

Type Declaration

- (): null | Element
- Function
  A button that triggers the visualization of the current question.
  
  Returns null | Element

Function InteractiveQuestion

Parameters

OptionalclassName?: string

OptionalentityTypes?: EmbeddingEntityType[]

Optionalheight?: Height<string | number>

OptionalhiddenParameters?: string[]

OptionalinitialSqlParameters?: SqlParameterValues

OptionalisSaveEnabled?: boolean

OptionalonBeforeSave?: ( question: undefined | MetabaseQuestion, context: { isNewQuestion: boolean },) => Promise<void>

OptionalonNavigateBack?: () => void

OptionalonRun?: (question: undefined | MetabaseQuestion) => void

OptionalonSave?: ( question: MetabaseQuestion, context: { dashboardTabId?: number; isNewQuestion: boolean },) => void

OptionalonVisualizationChange?: ( display: | "object" | "table" | "bar" | "line" | "pie" | "scalar" | "row" | "area" | "combo" | "pivot" | "smartscalar" | "gauge" | "progress" | "funnel" | "map" | "scatter" | "waterfall" | "sankey" | "list",) => void

Optionalplugins?: MetabasePluginsConfig

questionId: null | SdkQuestionId

Optionalstyle?: CSSProperties

OptionaltargetCollection?: SdkCollectionId

Optionaltitle?: SdkQuestionTitleProps

Optionalwidth?: Width<string | number>

OptionalwithChartTypeSelector?: boolean

OptionalwithDownloads?: boolean

OptionalwithResetButton?: boolean

Returns Element

Index

InteractiveQuestion

InteractiveQuestion

BackButton

Type Declaration

Parameters

Returns null | Element

Breakout

Type Declaration

Returns null | Element

BreakoutDropdown

Type Declaration

Parameters

Returns null | Element

ChartTypeDropdown

Type Declaration

Parameters

Returns Element

ChartTypeSelector

Type Declaration

Parameters

Returns Element

DownloadWidget

Type Declaration

Parameters

Returns null | Element

DownloadWidgetDropdown

Type Declaration

Parameters

Returns Element

Editor

Type Declaration

Parameters

OptionalhasVisualizeButton?: boolean

OptionalonApply?: () => void

Returns undefined | Element

EditorButton

Type Declaration

Parameters

OptionalisOpen?: boolean

Default Value

OptionalonClick?: MouseEventHandler<HTMLButtonElement>

Returns undefined | false | Element

Filter

Type Declaration

Parameters

OptionalwithColumnItemIcon?: boolean

Returns Element

FilterDropdown

Type Declaration

Parameters

OptionalwithColumnItemIcon?: boolean

Returns null | Element

Notebook

Type Declaration

Parameters

OptionalhasVisualizeButton?: boolean

`Optional`className?: string

`Optional`entityTypes?: EmbeddingEntityType[]

`Optional`height?: Height<string | number>

`Optional`hiddenParameters?: string[]

`Optional`initialSqlParameters?: SqlParameterValues

`Optional`isSaveEnabled?: boolean

`Optional`onBeforeSave?: (
question: undefined | MetabaseQuestion,
context: { isNewQuestion: boolean },
) => Promise<void>

`Optional`onNavigateBack?: () => void

`Optional`onRun?: (question: undefined | MetabaseQuestion) => void

`Optional`onSave?: (
question: MetabaseQuestion,
context: { dashboardTabId?: number; isNewQuestion: boolean },
) => void

`Optional`onVisualizationChange?: (
display:
| "object"
| "table"
| "bar"
| "line"
| "pie"
| "scalar"
| "row"
| "area"
| "combo"
| "pivot"
| "smartscalar"
| "gauge"
| "progress"
| "funnel"
| "map"
| "scatter"
| "waterfall"
| "sankey"
| "list",
) => void

`Optional`plugins?: MetabasePluginsConfig

`Optional`style?: CSSProperties

`Optional`targetCollection?: SdkCollectionId

`Optional`title?: SdkQuestionTitleProps

`Optional`width?: Width<string | number>

`Optional`withChartTypeSelector?: boolean

`Optional`withDownloads?: boolean

`Optional`withResetButton?: boolean

`Optional`hasVisualizeButton?: boolean

`Optional`onApply?: () => void

`Optional`isOpen?: boolean

`Optional`onClick?: MouseEventHandler<HTMLButtonElement>

`Optional`withColumnItemIcon?: boolean

`Optional`withColumnItemIcon?: boolean

`Optional`hasVisualizeButton?: boolean

`Optional`onApply?: () => void

`Optional`isOpen?: boolean

`Optional`onClick?: MouseEventHandler<HTMLButtonElement>

`Optional`height?: Height<string | number>

`Optional`className?: string

`Optional`style?: CSSProperties

`Optional`height?: Height<string | number>

`Optional`width?: Width<string | number>

`Optional`onClick?: MouseEventHandler<HTMLButtonElement>

`Optional`onCancel?: () => void

`Optional`className?: string

`Optional`style?: CSSProperties