Grid select (multi-column)

What this example shows

SvGridSelect - a "grid in a dropdown" single-select: the panel shows options as a compact multi-column table with a header row and search, so you pick by more than a label. Built on its own panel (no embedded SvGrid); standalone or as a grid cell editor.

Imports, features and API used

Imports: @svgrid/grid

Columns: name (Name), email (Email), team (Team)

Source code (336-grid-select.svelte)

<script lang="ts">
  /**
   * SvGridSelect - a "grid in a dropdown" single-select: the panel shows options
   * as a compact multi-column table with a header row and search, so you pick by
   * more than a label. Built on its own panel (no embedded SvGrid); standalone
   * or as a grid cell editor.
   */
  import { SvGridSelect, type GridSelectColumn } from '@svgrid/grid'

  const columns: GridSelectColumn[] = [
    { field: 'name', header: 'Name', width: '1.4fr' },
    { field: 'email', header: 'Email', width: '1.6fr' },
    { field: 'team', header: 'Team', width: '1fr' },
  ]

  const people = [
    { id: 1, name: 'Ada Lovelace', email: '[email protected]', team: 'Research' },
    { id: 2, name: 'Alan Turing', email: '[email protected]', team: 'Crypto' },
    { id: 3, name: 'Grace Hopper', email: '[email protected]', team: 'Compilers' },
    { id: 4, name: 'Katherine Johnson', email: '[email protected]', team: 'Orbits' },
    { id: 5, name: 'Edsger Dijkstra', email: '[email protected]', team: 'Algorithms' },
    { id: 6, name: 'Barbara Liskov', email: '[email protected]', team: 'Types' },
  ]

  let assignee = $state<string | number | null>(3)
  const chosen = $derived(people.find((p) => p.id === assignee) ?? null)
</script>

<div class="wrap">
  <header>
    <h2>Grid select</h2>
    <p>Pick from a multi-column list - name, email and team are all visible and searchable. The panel portals to <code>&lt;body&gt;</code>; arrows navigate, Enter selects.</p>
  </header>

  <div class="row">
    <SvGridSelect
      label="Assignee"
      {columns}
      options={people}
      value={assignee}
      labelField="name"
      onChange={(id) => (assignee = id)}
    />
  </div>

  {#if chosen}
    <p class="muted">Assigned to <strong>{chosen.name}</strong> ({chosen.email}) on team {chosen.team}.</p>
  {:else}
    <p class="muted">No one assigned yet.</p>
  {/if}
</div>

<style>
  .wrap { padding: 20px; max-width: 720px; display: flex; flex-direction: column; gap: 18px; }
  header h2 { margin: 0 0 4px; font-size: 20px; font-weight: 700; }
  header p { margin: 0; color: var(--sg-muted, #64748b); font-size: 13.5px; line-height: 1.5; }
  header code { background: var(--sg-row-hover-bg, #f1f5f9); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
  .row { display: flex; gap: 20px; align-items: center; }
  .muted { color: var(--sg-muted, #64748b); font-size: 13px; }
</style>

View this example on GitHub

Related documentation

• SvGridSelect

Related articles

• Multi-Level (Grouped) Column Headers in SvGrid - Band related columns under a shared parent header using SvGrid's nested column definition - how to nest, pin, combine with sorting and filtering, and when NOT to use grouping.
• A Fill Handle (Drag to Fill) in SvGrid - Build a working spreadsheet-style fill handle on top of SvGrid's cell selection and editing - pointer tracking, range highlighting, series fill, and undo/redo integration all covered.
• Copy a Cell Range to the Clipboard in SvGrid - How SvGrid copies selected cell ranges as tab-separated values that paste cleanly into Excel and Google Sheets, plus headers, programmatic copy, and format control.

More Selection examples

• Selection controls - List and overlay pickers: SvListBox (inline multi-select), SvDropDownList, SvComboBox (type to filter), SvAutoComplete (free text + suggestions), SvTagsInput (chips) and SvCountryInput (searchable, flags). Every popover portals out of the scroll container. Grid cell editors, standalone too.
• List box - SvListBox: an assignee picker - inline multi-select with grouped options (departments), roving keyboard + type-ahead and a live summary.
• Combo box - SvComboBox: a form field - type to filter a grouped, portalled list; the value must come from the list. With label + required validation.
• Drop-down list - SvDropDownList: a status / priority toolbar with grouped options, type-ahead and animated portalled panels driving a live issue list.
• Autocomplete - SvAutoComplete: a free-text search field with live suggestion shortcuts (any value accepted) - city search and a filter-syntax helper.