Embedded analytics SDK - collections
Embedded analytics SDK is only available on Pro and Enterprise plans (both self-hosted and on Metabase Cloud). You can, however, play around with the SDK on your local machine without a license by using API keys to authenticate your embeds.
Embedding a collection browser
You can embed Metabase’s collection browser so that people can explore items in your Metabase from your application.
CollectionBrowser
API Reference
Example
import React from "react"; import { CollectionBrowser } from "@metabase/embedding-sdk-react"; export default function App() { const collectionId = 123; // This is the collection ID you want to browse const handleItemClick = item => { console.log("Clicked item:", item); }; return ( <CollectionBrowser collectionId={collectionId} onClick={handleItemClick} pageSize={10} // Define the collection item types you want to be visible visibleEntityTypes={["dashboard", "question", "collection"]} /> ); } Props
| Property | Type | Description |
|---|---|---|
className? | string | A custom class name to be added to the root element. |
collectionId? | SdkCollectionId | The numerical ID of the collection, “personal” for the user’s personal collection, or “root” for the root collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in http://localhost:3000/collection/1-my-collection would be 1. Defaults to “personal” |
EmptyContentComponent? | | null | ComponentType | A component to display when there are no items in the collection. |
onClick? | (item: MetabaseCollectionItem) => void | A function to call when an item is clicked. |
pageSize? | number | The number of items to display per page. The default is 25. |
style? | CSSProperties | A custom style object to be added to the root element. |
visibleColumns? | CollectionBrowserListColumns[] | The columns to display in the collection items table. If not provided, all columns will be shown. |
visibleEntityTypes? | ("model" | "question" | "collection" | "dashboard")[] | The types of entities that should be visible. If not provided, all entities will be shown. |
Hide the collection picker and hard code the collection you want people to save stuff to
With static questions, you set a specific collection as the collection people can save items to, so that they don’t have bother picking a collection. To hard-code a collection:
- Set
isSaveEnabledto true. - Set
targetCollectionto the collection ID you want people to save items to.
For more options, see Question props.
Read docs for other versions of Metabase.