Analytics Catalog

GoodData.UI provides React components to browse and manage analytics catalog items, including dashboards, insights, measures, attributes, and facts.

Analytics Catalog Component Features

  • Browse and search all workspace analytics objects.
  • Filter objects by type (dashboards, insights, etc.).
  • Detailed view for each catalog item with metadata and actions.
  • Customizable navigation and item opening behavior.
  • Integrated creation of new analytics objects.
  • Theming is supported out of the box through Theme Provider.

Basic integration example

The AnalyticsCatalog component is the main entry point for embedding the full catalog experience.

import { AnalyticsCatalog } from "@gooddata/sdk-ui-catalog";
import { BackendProvider, WorkspaceProvider } from "@gooddata/sdk-ui";

// Import required styles
import "@gooddata/sdk-ui-catalog/styles/css/main.css";

const App = () => {
    return (
        <BackendProvider backend={backend}>
            <WorkspaceProvider workspace="workspace-id">
                <div style={{ height: 600 }}>
                    <AnalyticsCatalog
                        onCatalogItemOpenClick={(e, event) => {
                            console.log("Opening item:", event.id, event.type);
                        }}
                        onCreateObject={(type) => {
                            console.log("Creating new:", type);
                        }}
                    />
                </div>
            </WorkspaceProvider>
        </BackendProvider>
    );
};

Props

NameTypeDefaultDescription
backendIAnalyticalBackend-Analytical backend instance. Falls back to BackendProvider context if not specified.
workspacestring-Workspace ID. Falls back to WorkspaceProvider context if not specified.
localestring-Specifies the locale for internationalization.
openCatalogItemRefICatalogItemRef-Reference to the catalog item to open on initial render.
onCatalogItemOpenClick(e: MouseEvent, event: OpenHandlerEvent) => void-Handler for opening catalog items.
onCatalogItemNavigation(e: MouseEvent, ref: ICatalogItemRef) => void-Handler for navigating to a catalog item. Consumers can use this to handle route changes.
onCatalogDetailOpened(ref: ICatalogItemRef) => void-Handler called when the catalog item detail view is opened.
onCatalogDetailClosed() => void-Handler called when the catalog item detail view is closed.
onCreateObject(type: CatalogCreateObjectType) => void-Handler for creating a new object from the catalog header.

Catalog Detail Components

If you need more granular control, you can use the detail components separately.

AnalyticsCatalogDetail

A ready-to-use overlay/modal that displays details for a specific catalog item.

import { AnalyticsCatalogDetail } from "@gooddata/sdk-ui-catalog";

// Import required styles
import "@gooddata/sdk-ui-catalog/styles/css/detail.css";

const DetailOverlay = ({ objectId, objectType, isOpen, onClose }) => {
    return (
        <AnalyticsCatalogDetail objectId={objectId} objectType={objectType} open={isOpen} onClose={onClose} />
    );
};

Props

NameTypeDefaultDescription
objectIdstring-An object id of the catalog item.
objectTypeObjectType-An object type of the catalog item.
openboolean-Whether the detail overlay is open.
onClose() => void-Handler called when the detail view is closed.
backendIAnalyticalBackend-Analytical backend instance. Falls back to BackendProvider context if not specified.
workspacestring-Workspace ID. Falls back to WorkspaceProvider context if not specified.
localestring-Specifies the locale for internationalization.

AnalyticsCatalogDetailContent

The content part of the detail view, which you can embed into your own layout or side panel.

import { AnalyticsCatalogDetailContent } from "@gooddata/sdk-ui-catalog";

// Import required styles
import "@gooddata/sdk-ui-catalog/styles/css/detail.css";

const SidePanelContent = ({ objectId, objectType }) => {
    return <AnalyticsCatalogDetailContent objectId={objectId} objectType={objectType} />;
};

Props

NameTypeDefaultDescription
objectIdstring-An object id of the catalog item.
objectTypeObjectType-An object type of the catalog item.
backendIAnalyticalBackend-Analytical backend instance. Falls back to BackendProvider context if not specified.
workspacestring-Workspace ID. Falls back to WorkspaceProvider context if not specified.
localestring-Specifies the locale for internationalization.
onOpenClick(e: MouseEvent, event: OpenHandlerEvent) => void-Handler for opening catalog items.

Analytics Catalog Filter

The AnalyticsCatalogFilter component is a reusable UI element for filtering lists of items with support for search and multi-selection.

import { AnalyticsCatalogFilter } from "@gooddata/sdk-ui-catalog";

const MyFilter = () => {
    const [selection, setSelection] = useState([]);
    const [isInverted, setIsInverted] = useState(false);

    return (
        <AnalyticsCatalogFilter
            label="My Filter"
            options={["Option A", "Option B", "Option C"]}
            selection={selection}
            isSelectionInverted={isInverted}
            onSelectionChange={(newSelection, inverted) => {
                setSelection(newSelection);
                setIsInverted(inverted);
            }}
        />
    );
};

Props

NameTypeDefaultDescription
dataTestIdstring-Test id applied to the root element for automation.
labelstring-Label shown on the trigger button and header.
optionsT[]-All selectable options.
selectionT[]-Currently selected options (empty means none when not inverted).
isSelectionInvertedboolean-Whether the selection is inverted.
onSelectionChange(selection: T[], isInverted: boolean) => void-Called when selection changes and user confirms.
getItemKey(item: T) => string-Derives unique key for option items. Defaults to string coercion.
getItemTitle(item: T) => string-Derives display title for option items. Defaults to string coercion.
noDataMessageReactNode-Message rendered when there are no items to display.
statusBarReactNode-Optional status bar content rendered under the list.
actionsReactNode-Optional custom action buttons replacing default Apply/Cancel.