Embedded analytics SDK - collections
⚠️ This feature is in beta. Feel free to play around with it, but be aware that things might change (and may not work as expected).
Embedded analytics SDK is only available on Pro and Enterprise plans (both self-hosted and on Metabase Cloud).
You can embed Metabase’s collection browser so that people can explore items in your Metabase from your application.
CollectionBrowser props
| Prop | Type | Description |
|---|---|---|
| collectionId | number |
The numerical ID of the 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. If no ID is provided, the collection browser will start at the root Our analytics collection, which is ID = 0. |
| onClick | (item: CollectionItem) => void |
An optional click handler that emits the clicked entity. |
| pageSize | number |
The number of items to display per page. The default is 25. |
| visibleEntityTypes | ["question", "model", "dashboard", "collection"] |
The types of entities that should be visible. If not provided, all entities will be shown. |
Example embedding code with CollectionBrowser
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);
};
// Define the collection item types you want to be visible
const visibleEntityTypes = ["dashboard", "question", "collection"];
return (
<CollectionBrowser
collectionId={collectionId}
onClick={handleItemClick}
pageSize={10}
visibleEntityTypes={visibleEntityTypes}
/>
);
}
Read docs for other versions of Metabase.