These are the docs for the Metabase master branch. Some features documented here may not yet be available in the latest release. Check out the docs for the latest version, Metabase v0.54.
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? |
("question" | "model" | "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
isSaveEnabled
to true. - Set
targetCollection
to the collection ID you want people to save items to.
For more options, see Question props.
Read docs for other versions of Metabase.