Dropdown Editor

Searchable dropdown editor with multi-select and LRU caching.

The DropdownEditor provides an advanced searchable dropdown with multi-select support, grouped options, and LRU caching for optimal performance.

Basic Usage

const columns: ColumnDef[] = [
  {
    field: 'country',
    header: 'Country',
    editor: 'dropdown',
    editorOptions: {
      options: [
        { value: 'US', label: 'United States' },
        { value: 'CA', label: 'Canada' },
        { value: 'MX', label: 'Mexico' }
      ]
    }
  }
];

Editor Options

interface DropdownEditorOptions {
  options: DropdownOption[];
  searchable?: boolean;
  multiSelect?: boolean;
  allowCustom?: boolean;
  placeholder?: string;
  maxHeight?: number;
  multiSelectDisplay?: 'tags' | 'count';
  caseSensitiveSearch?: boolean;
  maxVisibleOptions?: number;
  required?: boolean;
  className?: string;
  autoFocus?: boolean;
  selectAllOnFocus?: boolean;
  validator?: (value: any) => boolean | string;
  stopOnBlur?: boolean;
}

DropdownOption Interface

interface DropdownOption {
  value: any;
  label: string;
  group?: string; // Optional grouping
}

Enable search to filter large option lists:

{
  field: 'country',
  header: 'Country',
  editor: 'dropdown',
  editorOptions: {
    searchable: true,
    options: [
      { value: 'US', label: 'United States' },
      { value: 'CA', label: 'Canada' },
      { value: 'GB', label: 'United Kingdom' },
      { value: 'DE', label: 'Germany' },
      { value: 'FR', label: 'France' }
      // ... more countries
    ],
    placeholder: 'Search countries...'
  }
}

Case-Sensitive Search

Control search sensitivity:

{
  editor: 'dropdown',
  editorOptions: {
    searchable: true,
    caseSensitiveSearch: false // "usa" matches "USA"
  }
}

{
  editor: 'dropdown',
  editorOptions: {
    searchable: true,
    caseSensitiveSearch: true // "usa" does not match "USA"
  }
}

💡 Tip

Search results are cached using an LRU cache for improved performance when users repeatedly search the same terms.

Multi-Select

Enable selection of multiple values:

{
  field: 'skills',
  header: 'Skills',
  editor: 'dropdown',
  editorOptions: {
    multiSelect: true,
    options: [
      { value: 'js', label: 'JavaScript' },
      { value: 'ts', label: 'TypeScript' },
      { value: 'py', label: 'Python' },
      { value: 'java', label: 'Java' },
      { value: 'go', label: 'Go' }
    ],
    placeholder: 'Select skills...'
  }
}

Multi-Select Display Modes

Control how selected items are displayed:

{
  editor: 'dropdown',
  editorOptions: {
    multiSelect: true,
    multiSelectDisplay: 'tags', // Shows individual tags
    options: [...]
  }
}
// Displays: [JavaScript] [Python] [Go]

{
  editor: 'dropdown',
  editorOptions: {
    multiSelect: true,
    multiSelectDisplay: 'count', // Shows count
    options: [...]
  }
}
// Displays: 3 items selected

ℹ Info

Use multiSelectDisplay: 'count' when space is limited or when many items might be selected.

Grouped Options

Organize options into groups:

{
  field: 'technology',
  header: 'Technology',
  editor: 'dropdown',
  editorOptions: {
    searchable: true,
    options: [
      { value: 'react', label: 'React', group: 'Frontend' },
      { value: 'vue', label: 'Vue', group: 'Frontend' },
      { value: 'angular', label: 'Angular', group: 'Frontend' },
      { value: 'node', label: 'Node.js', group: 'Backend' },
      { value: 'django', label: 'Django', group: 'Backend' },
      { value: 'spring', label: 'Spring', group: 'Backend' },
      { value: 'postgres', label: 'PostgreSQL', group: 'Database' },
      { value: 'mongo', label: 'MongoDB', group: 'Database' }
    ]
  }
}

The dropdown displays groups as section headers.

Custom Values

Allow users to enter custom values not in the option list:

{
  field: 'tags',
  header: 'Tags',
  editor: 'dropdown',
  editorOptions: {
    allowCustom: true,
    multiSelect: true,
    options: [
      { value: 'important', label: 'Important' },
      { value: 'urgent', label: 'Urgent' },
      { value: 'review', label: 'Review' }
    ],
    placeholder: 'Select or type tags...'
  }
}

⚠ Warning

When allowCustom is true, validate the input to ensure it meets your requirements.

Control the dropdown display:

{
  editor: 'dropdown',
  editorOptions: {
    options: [...manyOptions],
    maxHeight: 300, // Pixels
    maxVisibleOptions: 10 // Number of visible options
  }
}

The dropdown editor supports extensive keyboard navigation:

Arrow Up/Down: Navigate through options
Enter: Select highlighted option (or commit if multi-select)
Escape: Close dropdown without selecting
Tab: Commit selection and move to next cell
Type to search: Filter options by typing
Space: Toggle selection (multi-select mode)
Ctrl+A: Select all (multi-select mode)

💡 Tip

In multi-select mode, use Space to toggle individual items and Enter to commit all selections.

Complete Examples

Country Selector

{
  field: 'country',
  header: 'Country',
  editor: 'dropdown',
  editorOptions: {
    searchable: true,
    options: [
      { value: 'US', label: 'United States' },
      { value: 'CA', label: 'Canada' },
      { value: 'MX', label: 'Mexico' },
      { value: 'GB', label: 'United Kingdom' },
      { value: 'DE', label: 'Germany' },
      { value: 'FR', label: 'France' },
      { value: 'JP', label: 'Japan' },
      { value: 'CN', label: 'China' }
      // ... more countries
    ],
    placeholder: 'Search country...',
    required: true,
    maxVisibleOptions: 8
  }
}

Skills Multi-Select

{
  field: 'skills',
  header: 'Skills',
  editor: 'dropdown',
  editorOptions: {
    multiSelect: true,
    searchable: true,
    multiSelectDisplay: 'tags',
    options: [
      { value: 'js', label: 'JavaScript', group: 'Programming' },
      { value: 'ts', label: 'TypeScript', group: 'Programming' },
      { value: 'py', label: 'Python', group: 'Programming' },
      { value: 'react', label: 'React', group: 'Frameworks' },
      { value: 'vue', label: 'Vue.js', group: 'Frameworks' },
      { value: 'node', label: 'Node.js', group: 'Frameworks' },
      { value: 'aws', label: 'AWS', group: 'Cloud' },
      { value: 'azure', label: 'Azure', group: 'Cloud' }
    ],
    placeholder: 'Select skills...',
    maxHeight: 400
  }
}

Tag Editor with Custom Values

{
  field: 'tags',
  header: 'Tags',
  editor: 'dropdown',
  editorOptions: {
    multiSelect: true,
    allowCustom: true,
    searchable: true,
    multiSelectDisplay: 'tags',
    options: [
      { value: 'bug', label: 'Bug' },
      { value: 'feature', label: 'Feature' },
      { value: 'enhancement', label: 'Enhancement' },
      { value: 'documentation', label: 'Documentation' }
    ],
    placeholder: 'Select or create tags...',
    validator: (value: string[]) => {
      if (value.length === 0) {
        return 'At least one tag is required';
      }
      return true;
    }
  }
}

Department Assignment

{
  field: 'department',
  header: 'Department',
  editor: 'dropdown',
  editorOptions: {
    searchable: true,
    options: [
      { value: 'ENG', label: 'Engineering', group: 'Technical' },
      { value: 'QA', label: 'Quality Assurance', group: 'Technical' },
      { value: 'SAL', label: 'Sales', group: 'Business' },
      { value: 'MKT', label: 'Marketing', group: 'Business' },
      { value: 'HR', label: 'Human Resources', group: 'Operations' },
      { value: 'FIN', label: 'Finance', group: 'Operations' }
    ],
    placeholder: 'Select department...',
    required: true
  }
}

LRU Cache

The dropdown editor uses an LRU (Least Recently Used) cache for search results:

Improves performance: Caches filtered results
Automatic management: Evicts old entries when cache is full
Transparent: Works automatically without configuration

// First search for "United"
// - Filters all options
// - Caches result

// Second search for "United"
// - Returns cached result (faster)
// - No re-filtering needed

ℹ Info

The LRU cache is particularly beneficial for large option lists with frequent searches.

Validation

Add custom validation for dropdown values:

{
  editor: 'dropdown',
  editorOptions: {
    options: [...],
    required: true,
    validator: (value: any) => {
      if (!value) {
        return 'Selection is required';
      }
      return true;
    }
  }
}

{
  editor: 'dropdown',
  editorOptions: {
    multiSelect: true,
    options: [...],
    validator: (value: any[]) => {
      if (value.length === 0) {
        return 'At least one option must be selected';
      }
      if (value.length > 5) {
        return 'Maximum 5 selections allowed';
      }
      return true;
    }
  }
}

Styling

Customize the dropdown appearance:

{
  editor: 'dropdown',
  editorOptions: {
    options: [...],
    className: 'custom-dropdown'
  }
}

.custom-dropdown {
  font-size: 14px;
}

.custom-dropdown .dropdown-option {
  padding: 10px;
  cursor: pointer;
}

.custom-dropdown .dropdown-option:hover {
  background-color: #f0f0f0;
}

.custom-dropdown .dropdown-option.selected {
  background-color: #007bff;
  color: white;
}

.custom-dropdown .dropdown-tag {
  background-color: #007bff;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 2px;
}

Best Practices

Enable search for long lists: Use searchable: true for > 20 options
Group related options: Use the group property for better organization
Set reasonable limits: Use maxVisibleOptions to control dropdown height
Choose display mode wisely: Use count for many selections, tags for few
Allow custom when needed: Enable allowCustom for flexible user input
Validate multi-select: Check min/max selection counts
Provide clear placeholders: Help users understand the purpose

{
  field: 'assignees',
  header: 'Assignees',
  editor: 'dropdown',
  editorOptions: {
    multiSelect: true,
    searchable: true,
    multiSelectDisplay: 'tags',
    options: getTeamMembers(), // Dynamic options
    placeholder: 'Search team members...',
    maxVisibleOptions: 8,
    maxHeight: 320,
    required: true,
    validator: (value: any[]) => {
      if (value.length === 0) {
        return 'At least one assignee is required';
      }
      if (value.length > 3) {
        return 'Maximum 3 assignees allowed';
      }
      return true;
    }
  }
}

When to Use

Use the Dropdown editor when you need:

Search functionality: Filter through many options
Multi-select: Select multiple values
Grouped options: Organize options by category
Custom values: Allow user-defined entries
Advanced styling: More control than native select

For simple, small lists (< 20 options), consider using the SelectEditor instead for better performance and native mobile behavior.

Dropdown Editor

Basic Usage

Editor Options

DropdownOption Interface

Searchable Dropdown

Case-Sensitive Search

Multi-Select

Multi-Select Display Modes

Grouped Options

Custom Values

Dropdown Size

Keyboard Navigation

Complete Examples

Country Selector

Skills Multi-Select

Tag Editor with Custom Values

Department Assignment

LRU Cache

Validation

Styling

Best Practices

When to Use