49.6k Log inGet started
Analytics
Data modeling
Embedding
Administration
Other resources
v0.64
What’s new
These are the docs for Metabase v0.64. Check out the docs for the current stable version, Metabase v0.63.

Browser component reference

Reference material for embedding a collection browser:

For how to set all this up, check out Embed a collection browser.

Web component metabase-browser attributes

These attributes apply to the <metabase-browser> web component.

Property Type Description
collection-entity-types string[] An array of entity types to show in the collection browser: collection, dashboard, question, model.
—
Optional
Possible values: "model", "collection", "dashboard", "question"
collection-page-size number How many items to show per page in the collection browser.
—
Optional
collection-visible-columns string[] An array of columns to show in the collection browser: type, name, description, lastEditedBy, lastEditedAt, archive.
—
Optional
Possible values: "type", "name", "description", "lastEditedBy", "lastEditedAt", "archive"
data-picker-entity-types string[] An array of entity types to show in the question’s data picker: model, table.
—
Optional
Possible values: "model", "table"
enable-entity-navigation boolean Whether to enable internal entity navigation (links to dashboards/questions).
—
Optional
Default: false
initial-collection string | number Which collection to start from. Values: regular ID, entity ID, "root" for the top-level “Our Analytics” collection, "personal" for the viewer’s personal collection, "tenant" for the viewer’s tenant collection, or "all" to show everything the viewer can access: their personal collection plus the shared collections. People who aren’t tenant members get an error for "tenant".
read-only boolean Whether the content manager is in read-only mode. When true, people can interact with items (filter, summarize, drill-through) but can’t save. When false, they can create and edit items.
—
Optional
Default: true
with-new-dashboard boolean Whether to show the “New dashboard” button. Only applies when read-only is false.
—
Optional
Default: true
with-new-question boolean Whether to show the “New question” button.
—
Optional
Default: true

Depending on the framework you’re using, you may need to stringify attributes before passing them to the component. And if you surround an attribute’s value with double quotes, use single quotes inside it:

<metabase-browser
  initial-collection="123"
  collection-entity-types="['collection', 'dashboard']"
  data-picker-entity-types="['model']"
></metabase-browser>

These examples use sequential IDs — the number in the item’s URL. On Pro and Enterprise plans, you can use entity IDs instead; they stay the same when you serialize content from one Metabase to another, like from staging to production.

React SDK CollectionBrowser props

Modular embedding SDK is only available on Pro and Enterprise plans (both self-hosted and on Metabase Cloud).

CollectionBrowser lists the items in a collection and reports clicks. Unlike the web component, it doesn’t open items or offer buttons for creating them. See React SDK collection browser.

Property Type Description
className? string A custom class name to be added to the root element.
collectionId? SdkBrowserCollectionId The collection to show: - a number - the collection ID. You can find it in the URL of a collection in your Metabase instance. For http://localhost:3000/collection/1-my-collection the ID is 1. - an entity ID string, e.g. "nT4gT_MOnU1uJ1zLsGaTV". - "personal" - the user’s personal collection. - "tenant" - the user’s tenant collection. - "root" - the root collection, “Our analytics”. - "all" - a list that contains the root collection, the tenant collections, and the user’s personal collection. Defaults to "personal".
EmptyContentComponent? | ComponentType | null 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.
showDashboardQuestions? boolean Whether to show questions that belong to a dashboard alongside collection saved questions. Set to true to show them. Defaults to false, keeping the list focused on collection content.
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? ("collection" | "dashboard" | "question" | "model")[] The types of entities that should be visible. If not provided, all entities will be shown.

Further reading

Read docs for other versions of Metabase.

Was this helpful?

Thanks for your feedback!
Want to improve these docs? Propose a change.