Function InteractiveQuestion

InteractiveQuestion(props: InteractiveQuestionProps): null | Element
A component that renders an interactive question.
Parameters
- props: InteractiveQuestionProps
  - Optionalchildren?: ReactNode
    The children of the MetabaseProvider component.s
  - OptionalclassName?: string
    A custom class name to be added to the root element.
  - OptionalentityTypeFilter?: EntityTypeFilterKeys[]
    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
  - 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
  - OptionalonSave?: (
    question: undefined | MetabaseQuestion,
    context: { isNewQuestion: boolean },
    ) => void
    A callback function that triggers when a user saves the question. Only relevant when isSaveEnabled = true
  - Optionalplugins?: MetabasePluginsConfig
  - questionId: null | SdkQuestionId
    The ID of the question.
    This is either:
    
    The numerical ID when accessing a question link, e.g., http://localhost:3000/question/1-my-question where the ID is 1
    
    The entity_id key of the question object. You can find a question's Entity ID in the info panel when viewing a question
    
    new to show the notebook editor for creating new questions. isSaveEnabled must be true to allow saving the question
  - 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 null | 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
    - 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
    - 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 InteractiveQuestionProps.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

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)
  - "New question" as fallback or for new/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

Function InteractiveQuestion

Parameters

Optionalchildren?: ReactNode

OptionalclassName?: string

OptionalentityTypeFilter?: EntityTypeFilterKeys[]

Optionalheight?: Height<string | number>

OptionalinitialSqlParameters?: SqlParameterValues

OptionalisSaveEnabled?: boolean

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

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

Optionalplugins?: MetabasePluginsConfig

questionId: null | SdkQuestionId

Optionalstyle?: CSSProperties

OptionaltargetCollection?: SdkCollectionId

Optionaltitle?: SdkQuestionTitleProps

Optionalwidth?: Width<string | number>

OptionalwithChartTypeSelector?: boolean

OptionalwithDownloads?: boolean

OptionalwithResetButton?: boolean

Returns null | 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

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

OptionalonApply?: () => void

Returns undefined | Element

Deprecated

NotebookButton

Type declaration

`Optional`children?: ReactNode

`Optional`className?: string

`Optional`entityTypeFilter?: EntityTypeFilterKeys[]

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

`Optional`initialSqlParameters?: SqlParameterValues

`Optional`isSaveEnabled?: boolean

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

`Optional`onSave?: (
question: undefined | MetabaseQuestion,
context: { isNewQuestion: boolean },
) => 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`onApply?: () => void

`Optional`isOpen?: boolean

`Optional`onClick?: MouseEventHandler<HTMLButtonElement>

`Optional`withColumnItemIcon?: boolean

`Optional`withColumnItemIcon?: 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