StaticDashboard

Embed lightweight, read-only dashboards without interactive features

The StaticDashboard component renders a lightweight dashboard visualization without editing capabilities or drill-through actions. It’s ideal for displaying dashboard data in a read-only context.

Basic usage

import { StaticDashboard } from '@metabase/embedding-sdk-react';

function Reports() {
  return <StaticDashboard dashboardId={1} />;
}

Using entity ID

Reference dashboards by their entity ID:

<StaticDashboard dashboardId="abc123-entity-id" />

Using signed embed token

For guest embed scenarios:

<StaticDashboard token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." />

When using a token, the dashboardId prop becomes optional.

With initial parameters

Set initial filter values:

<StaticDashboard
  dashboardId={1}
  initialParameters={{
    region: 'North America',
    period: 'Q4 2024',
    status: 'active',
  }}
/>

Hiding parameters

Hide specific dashboard parameters from the UI:

<StaticDashboard
  dashboardId={1}
  hiddenParameters={['internal_filter', 'debug_param']}
/>

With auto-refresh

Automatically refresh the dashboard data:

<StaticDashboard
  dashboardId={1}
  autoRefreshInterval={300} // Refresh every 5 minutes (in seconds)
/>

Customizing visibility

<StaticDashboard
  dashboardId={1}
  withTitle={false}
  withCardTitle={false}
  withDownloads={false}
  withSubscriptions={false}
/>

With event handlers

<StaticDashboard
  dashboardId={1}
  onLoad={(dashboard) => {
    console.log('Dashboard loaded:', dashboard?.name);
  }}
  onLoadWithoutCards={(dashboard) => {
    console.log('Dashboard structure loaded');
  }}
/>

With plugins

Customize click actions for dashboard cards:

const plugins = {
  mapQuestionClickActions: (clickActions, clickedDataPoint) => {
    // Filter out certain actions or add custom ones
    return clickActions.filter(action => 
      action.name !== 'automatic-insights'
    );
  },
  dashboard: {
    dashboardCardMenu: ({ dashcard, result }) => {
      return [
        {
          name: 'View Details',
          icon: 'eye',
          onClick: () => {
            console.log('View details for:', dashcard.card.name);
          },
        },
      ];
    },
  },
};

<StaticDashboard dashboardId={1} plugins={plugins} />

With data picker configuration

<StaticDashboard
  dashboardId={1}
  dataPickerProps={{
    entityTypes: ['questions', 'models'],
  }}
/>

With visualization change handler

<StaticDashboard
  dashboardId={1}
  onVisualizationChange={(question) => {
    console.log('Card visualization changed:', question);
  }}
/>

Complete example

import { StaticDashboard } from '@metabase/embedding-sdk-react';
import { useState } from 'react';

function ExecutiveDashboard() {
  const [refreshInterval, setRefreshInterval] = useState(300);

  return (
    <div className="dashboard-container">
      <div className="dashboard-controls">
        <h1>Executive Summary</h1>
        <div className="refresh-controls">
          <label>
            Auto-refresh:
            <select 
              value={refreshInterval}
              onChange={(e) => setRefreshInterval(Number(e.target.value))}
            >
              <option value={0}>Off</option>
              <option value={60}>1 minute</option>
              <option value={300}>5 minutes</option>
              <option value={900}>15 minutes</option>
            </select>
          </label>
        </div>
      </div>

      <StaticDashboard
        dashboardId={1}
        initialParameters={{
          date_range: 'last-30-days',
        }}
        autoRefreshInterval={refreshInterval}
        withTitle={true}
        withCardTitle={true}
        withDownloads={true}
        withSubscriptions={false}
        onLoad={(dashboard) => {
          console.log('Dashboard loaded:', dashboard?.name);
        }}
        style={{
          border: '1px solid #e5e7eb',
          borderRadius: '8px',
          padding: '16px',
          backgroundColor: '#ffffff',
        }}
      />
    </div>
  );
}

Props

dashboardId · SdkDashboardId

The ID of the dashboard. Can be:

• Numerical ID (e.g., 1)
• Entity ID string (e.g., "abc123")

Optional when using token.

token · string

Signed token for guest embed. When provided, dashboardId becomes optional.

initialParameters · ParameterValues

Initial parameter values for dashboard filters.

hiddenParameters · string[]

List of parameter names to hide from the UI.

withTitle · boolean · default: "true"

Whether to show the dashboard title.

withCardTitle · boolean · default: "true"

Whether to show titles on dashboard cards.

withDownloads · boolean · default: "true"

Whether to enable download functionality for cards.

withSubscriptions · boolean · default: "false"

Whether to enable dashboard subscriptions.

autoRefreshInterval · number

Auto-refresh interval in seconds. Set to 0 to disable.

style · React.CSSProperties

Custom CSS styles.

className · string

Custom CSS class name.

plugins · MetabasePluginsConfig

Plugin configuration for customizing behavior.

Show plugins properties

mapQuestionClickActions · function

Function to filter or modify click actions on visualizations.

dashboard.dashboardCardMenu · function

Function to customize the dashboard card menu.

dataPickerProps · { entityTypes?: EntityTypeFilterKeys[] }

Configuration for data picker dialogs.

onLoad · (dashboard: MetabaseDashboard | null) => void

Callback when the dashboard loads with all cards and their content.

onLoadWithoutCards · (dashboard: MetabaseDashboard | null) => void

Callback when the dashboard structure loads (without card content yet).

onVisualizationChange · (question: MetabaseQuestion) => void

Callback when a card’s visualization type changes.

children · ReactNode

Custom content (for future extensibility).

TypeScript types

import type {
  StaticDashboardProps,
  MetabaseDashboard,
  MetabaseQuestion,
  ParameterValues,
  SdkDashboardId,
} from '@metabase/embedding-sdk-react';

When to use StaticDashboard vs InteractiveDashboard

Use StaticDashboard when:

• You want a lightweight, read-only dashboard
• Users should only view data without interacting
• You don’t need drill-through or click behaviors
• You’re embedding in contexts where interactivity isn’t needed
• Performance is critical (static dashboards are lighter)

Use InteractiveDashboard when:

• Users need to explore data through drill-downs
• Click behaviors and actions are required
• Users should be able to navigate to underlying questions
• Full dashboard interactivity is needed

Features

Parameter support

Static dashboards support dashboard parameters, allowing users to filter data across all cards.

Auto-refresh

Keep dashboard data up-to-date with automatic refreshing at specified intervals.

Download support

Users can download data from individual dashboard cards.

Event handling

Track when dashboards load to integrate with your analytics or UI state.

Performance considerations

StaticDashboard is optimized for display performance:

• Lighter bundle size compared to InteractiveDashboard
• Faster initial render
• Reduced memory footprint
• Ideal for embedding multiple dashboards on a single page

Related

• InteractiveDashboard - Interactive dashboard component
• Event handlers - Working with dashboard events
• Custom styling - Styling dashboards