Skip to main content
Version: 6.1.0

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-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.