Skip to main content
Version: Next

MetadataBar

MetadataBar displays a row of metadata items (SQL info, editors, last modified, tags, dashboards, etc.) that collapse responsively based on available width.

Live Example​

Loading component...

Try It​

Edit the code below to experiment with the component:

Live Editor
function Demo() {
  const items = [
    { type: 'sql', title: 'Click to view query' },
    {
      type: 'editor',
      createdBy: 'Jane Smith',
      editors: ['John Doe', 'Mary Wilson'],
      createdOn: 'a week ago',
    },
    {
      type: 'lastModified',
      value: 'a week ago',
      modifiedBy: 'Jane Smith',
    },
    { type: 'tags', values: ['management', 'research', 'poc'] },
  ];
  return <MetadataBar items={items} />;
}
Result
Loading...

Minimal Metadata​

Live Editor
function MinimalMetadata() {
  const items = [
    { type: 'editor', createdBy: 'Admin', editors: ['Admin'], createdOn: 'yesterday' },
    { type: 'lastModified', value: '2 hours ago', modifiedBy: 'Admin' },
  ];
  return <MetadataBar items={items} />;
}
Result
Loading...

Full Metadata​

Live Editor
function FullMetadata() {
  const items = [
    { type: 'sql', title: 'SELECT * FROM ...' },
    { type: 'editor', createdBy: 'Jane Smith', editors: ['Jane Smith', 'John Doe', 'Bob Wilson'], createdOn: '2 weeks ago' },
    { type: 'lastModified', value: '3 days ago', modifiedBy: 'John Doe' },
    { type: 'tags', values: ['production', 'finance', 'quarterly'] },
    { type: 'dashboards', title: 'Used in 12 dashboards' },
    { type: 'description', value: 'This chart shows quarterly revenue breakdown by region and product line.' },
    { type: 'rows', title: '1.2M rows' },
    { type: 'table', title: 'public.revenue_data' },
  ];
  return <MetadataBar items={items} />;
}
Result
Loading...

Props​

PropTypeDefaultDescription
titlestring"Added to 3 dashboards"-
createdBystring"Jane Smith"-
modifiedBystring"Jane Smith"-
descriptionstring"To preview the list of dashboards go to More settings."-
itemsany[{"type":"sql","title":"Click to view query"},{"type":"editor","createdBy":"Jane Smith","editors":["John Doe","Mary Wilson"],"createdOn":"a week ago"},{"type":"lastModified","value":"a week ago","modifiedBy":"Jane Smith"},{"type":"tags","values":["management","research","poc"]},{"type":"dashboards","title":"Added to 3 dashboards","description":"To preview the list of dashboards go to More settings."}]-

Import​

import { MetadataBar } from '@superset-ui/core/components';
Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.