| title | summary |
|---|---|
Modular embedding SDK - dashboards |
Embed static or interactive Metabase dashboards using the Modular embedding SDK. Customize dashboard layout, drill-through, and add custom actions. |
{% include plans-blockquote.html feature="Modular embedding SDK" sdk=true %}
You can embed an interactive, editable, or static dashboard.
Keep in mind that embedding multiple instances of dashboards on the same page is not yet supported.
You can embed a dashboard using the one of the dashboard components:
A lightweight dashboard component. Use this component when you want to display results without letting people interact with the data.
{% include_file "{{ dirname }}/api/snippets/StaticDashboardProps.md" snippet="properties" %}
A dashboard component with drill downs, click behaviors, and the ability to view and click into questions. Use this component when you want to allow people to explore their data.
{% include_file "{{ dirname }}/api/snippets/InteractiveDashboardProps.md" snippet="properties" %}
A dashboard component with the features available in the InteractiveDashboard component, as well as the ability to add and update questions, layout, and content within your dashboard. Use this component when you want to give people the ability to modify your dashboards, for example in an admin panel in your app.
{% include_file "{{ dirname }}/api/snippets/EditableDashboardProps.md" snippet="properties" %}
{% include_file "{{ dirname }}/snippets/dashboards/interactive-dashboard.tsx" %}By default, dashboard components take full page height (100vh). You can override this with custom styles passed via style or className props.
{% include_file "{{ dirname }}/snippets/dashboards/custom-height.tsx" snippet="example" %}When drilling through or clicking on a question card in the dashboard, you will be taken to the question view. By default, the question is shown in the default layout for interactive questions.
To customize the question layout, pass a renderDrillThroughQuestion prop to the InteractiveDashboard component, with the custom view as the child component.
{% include_file "{{ dirname }}/snippets/dashboards/custom-drill-through-question-layout.tsx" snippet="example-1" %}
{% include_file "{{ dirname }}/snippets/dashboards/custom-drill-through-question-layout.tsx" snippet="example-2" %}The questionView prop accepts a React component that will be rendered in the question view, which you can build with namespaced components within the InteractiveQuestion component. See customizing interactive questions for an example layout.
This plugin allows you to add, remove, and modify the custom actions on the overflow menu of dashboard cards. The plugin appears as a dropdown menu on the top right corner of the card.
The plugin's default configuration looks like this:
{% include_file "{{ dirname }}/snippets/dashboards/plugins.tsx" snippet="example-base-1" %}dashboardCardMenu: can be used in the InteractiveDashboard like this:
{% include_file "{{ dirname }}/snippets/dashboards/plugins.tsx" snippet="example-base-2" %}To remove the download button from the dashcard menu, set withDownloads to false. To remove the edit link from the dashcard menu, set withEditLink to false.
{% include_file "{{ dirname }}/snippets/dashboards/plugins.tsx" snippet="example-default-actions" %}You can add custom actions to the dashcard menu by adding an object to the customItems array. Each element can either be an object or a function that takes in the dashcard's question, and outputs a list of custom items in the form of:
{% include_file "{{ dirname }}/snippets/dashboards/plugins.tsx" snippet="example-custom-action-type" %}Here's an example:
{% include_file "{{ dirname }}/snippets/dashboards/plugins.tsx" snippet="example-custom-actions" %}If you want to replace the existing menu with your own component, you can do so by providing a function that returns a React component. This function also can receive the question as an argument.
{% include_file "{{ dirname }}/snippets/dashboards/plugins.tsx" snippet="example-custom-actions-menu" %}You can customize what happens when people click on a data point on a dashboard with the mapQuestionClickActions plugin. See mapQuestionClickActions.
Creating a dashboard could be done with useCreateDashboardApi hook or CreateDashboardModal component.
Use this hook if you'd like to have total control over the UI and settings.
Until the SDK is fully loaded and initialized, the hook returns null.
{% include_file "{{ dirname }}/snippets/dashboards/create-dashboard.tsx" snippet="example-hook" %}{% include_file "{{ dirname }}/api/snippets/CreateDashboardValues.md" snippet="properties" %}
{% include_file "{{ dirname }}/snippets/dashboards/create-dashboard.tsx" snippet="example-component" %}{% include_file "{{ dirname }}/api/snippets/CreateDashboardModalProps.md" snippet="properties" %}