Skip to main content
Version: Next

DropdownContainer

DropdownContainer arranges items horizontally and moves overflowing items into a dropdown popover. Resize the container to see the overflow behavior.

Live Example​

Loading component...

Try It​

Edit the code below to experiment with the component:

Live Editor
function Demo() {
  const items = Array.from({ length: 6 }, (_, i) => ({
    id: 'item-' + i,
    element: React.createElement('div', {
      style: {
        minWidth: 120,
        padding: '4px 12px',
        background: '#e6f4ff',
        border: '1px solid #91caff',
        borderRadius: 4,
      },
    }, 'Filter ' + (i + 1)),
  }));
  return (
    <div style={{ width: 400, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
      <DropdownContainer items={items} />
      <div style={{ marginTop: 8, color: '#999', fontSize: 12 }}>
        Drag the right edge to resize and see items overflow into a dropdown
      </div>
    </div>
  );
}
Result
Loading...

With Select Filters​

Live Editor
function SelectFilters() {
  const items = ['Region', 'Category', 'Date Range', 'Status', 'Owner'].map(
    (label, i) => ({
      id: 'filter-' + i,
      element: React.createElement('div', {
        style: { minWidth: 150, padding: '4px 12px', background: '#f5f5f5', border: '1px solid #d9d9d9', borderRadius: 4 },
      }, label + ': All'),
    })
  );
  return (
    <div style={{ width: 500, resize: 'horizontal', overflow: 'auto', border: '1px solid #e8e8e8', padding: 16 }}>
      <DropdownContainer items={items} />
    </div>
  );
}
Result
Loading...

Import​

import { DropdownContainer } from '@superset/components';
Improve this page

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