Adding Selection

In this tutorial, you’ll add row selection to your grid. You’ll learn single and multi-select modes, keyboard shortcuts, and how to work with selected rows.

Time: 10 minutes Prerequisites: Completed Getting Started

Step 1: Enable single selection

Start with the grid from the Getting Started tutorial and add selectable:

<script lang="ts">
  import { DataGrid } from 'svelte-datagrid';

  const data = [
    { id: 1, name: 'Alice Johnson', role: 'Engineer' },
    { id: 2, name: 'Bob Smith', role: 'Designer' },
    { id: 3, name: 'Carol White', role: 'Manager' },
    { id: 4, name: 'David Brown', role: 'Engineer' },
    { id: 5, name: 'Eve Davis', role: 'Designer' }
  ];

  const columns = [
    { key: 'id', header: 'ID', width: 60 },
    { key: 'name', header: 'Name', width: 180 },
    { key: 'role', header: 'Role', width: 120 }
  ];
</script>

<div style="height: 300px;">
  <DataGrid
    {data}
    {columns}
    selectable
  />
</div>

Click a row. It highlights to show it’s selected. Click another row. The selection moves to the new row.

Step 2: Add row identification

For stable selection that survives data updates, tell the grid how to identify each row:

<DataGrid
  {data}
  {columns}
  selectable
  getRowId={(row) => row.id}
/>

Without getRowId, selection uses array indices. If data is sorted or filtered, the wrong rows stay selected.

Best practice: Always provide getRowId when using selection.

Step 3: Track selected rows

Listen for selection changes:

<script lang="ts">
  import { DataGrid } from 'svelte-datagrid';

  const data = [/* ... */];
  const columns = [/* ... */];

  let selectedId = $state<number | null>(null);

  function handleSelection(event) {
    const { selected } = event;
    selectedId = selected.size > 0 ? [...selected][0] : null;
  }
</script>

<DataGrid
  {data}
  {columns}
  selectable
  getRowId={(row) => row.id}
  onselectionchange={handleSelection}
/>

{#if selectedId}
  <p>Selected: {data.find(r => r.id === selectedId)?.name}</p>
{:else}
  <p>No selection</p>
{/if}

The selected property is a Set of row IDs.

Step 4: Enable multi-select

Change selectable to "multiple":

<script lang="ts">
  import { DataGrid } from 'svelte-datagrid';

  const data = [
    { id: 1, name: 'Alice Johnson', role: 'Engineer' },
    { id: 2, name: 'Bob Smith', role: 'Designer' },
    { id: 3, name: 'Carol White', role: 'Manager' },
    { id: 4, name: 'David Brown', role: 'Engineer' },
    { id: 5, name: 'Eve Davis', role: 'Designer' }
  ];

  const columns = [
    { key: 'id', header: 'ID', width: 60 },
    { key: 'name', header: 'Name', width: 180 },
    { key: 'role', header: 'Role', width: 120 }
  ];

  let selectedIds = $state(new Set<number>());

  function handleSelection(event) {
    selectedIds = event.selected;
  }
</script>

<div style="height: 300px;">
  <DataGrid
    {data}
    {columns}
    selectable="multiple"
    getRowId={(row) => row.id}
    onselectionchange={handleSelection}
  />
</div>

<p>Selected: {selectedIds.size} rows</p>

Step 5: Use keyboard shortcuts

With multi-select enabled, try these:

Try these in your grid:

1. Click “Alice” to select her
2. Hold Shift, click “David” - selects Alice through David (4 rows)
3. Ctrl+Click “Carol” - deselects just Carol
4. Press Escape - clears all selection

Step 6: Show selected data

Display the actual selected rows:

<script lang="ts">
  import { DataGrid } from 'svelte-datagrid';

  const data = [
    { id: 1, name: 'Alice Johnson', role: 'Engineer' },
    { id: 2, name: 'Bob Smith', role: 'Designer' },
    { id: 3, name: 'Carol White', role: 'Manager' },
    { id: 4, name: 'David Brown', role: 'Engineer' },
    { id: 5, name: 'Eve Davis', role: 'Designer' }
  ];

  const columns = [
    { key: 'id', header: 'ID', width: 60 },
    { key: 'name', header: 'Name', width: 180 },
    { key: 'role', header: 'Role', width: 120 }
  ];

  let selectedIds = $state(new Set<number>());

  function handleSelection(event) {
    selectedIds = event.selected;
  }

  // Derive selected rows from IDs
  const selectedRows = $derived(
    data.filter(row => selectedIds.has(row.id))
  );
</script>

<div style="height: 300px;">
  <DataGrid
    {data}
    {columns}
    selectable="multiple"
    getRowId={(row) => row.id}
    onselectionchange={handleSelection}
  />
</div>

<h3>Selected ({selectedRows.length})</h3>
<ul>
  {#each selectedRows as row}
    <li>{row.name} - {row.role}</li>
  {/each}
</ul>

Complete code

<script lang="ts">
  import { DataGrid } from 'svelte-datagrid';

  const data = [
    { id: 1, name: 'Alice Johnson', role: 'Engineer' },
    { id: 2, name: 'Bob Smith', role: 'Designer' },
    { id: 3, name: 'Carol White', role: 'Manager' },
    { id: 4, name: 'David Brown', role: 'Engineer' },
    { id: 5, name: 'Eve Davis', role: 'Designer' }
  ];

  const columns = [
    { key: 'id', header: 'ID', width: 60 },
    { key: 'name', header: 'Name', width: 180 },
    { key: 'role', header: 'Role', width: 120 }
  ];

  let selectedIds = $state(new Set<number>());

  function handleSelection(event) {
    selectedIds = event.selected;
  }

  const selectedRows = $derived(
    data.filter(row => selectedIds.has(row.id))
  );
</script>

<div style="height: 300px;">
  <DataGrid
    {data}
    {columns}
    selectable="multiple"
    getRowId={(row) => row.id}
    onselectionchange={handleSelection}
  />
</div>

<div style="margin-top: 1rem;">
  <strong>Selected ({selectedRows.length}):</strong>
  {#if selectedRows.length > 0}
    {selectedRows.map(r => r.name).join(', ')}
  {:else}
    None
  {/if}
</div>

What you learned

• Single selection with selectable
• Multi-selection with selectable="multiple"
• Row identification with getRowId
• Selection events with onselectionchange
• Keyboard shortcuts (Ctrl+Click, Shift+Click, arrows, Space)

Next steps

• Server-Side Data - Load data from a backend
• How-to: Filtering - Filter the grid
• Reference: Grid State - Full selection API