Lattice Grid Buy a licence

demo D82

Row selection

Single and multiple row selection, visible in the grid and on the row

selection: 'multiple'

Building…
Loading a live grid…

The configuration

import * as ng from '@angular/core';
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import createLatticeGrid from '@toclocoinc/lattice-grid/modules/angular';

const { LatticeGridComponent } = createLatticeGrid({ ng, createGrid });

const columns = [
  { field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
  { field: 'team', title: 'Team', filter: { type: 'set' } },
  { field: 'owner', title: 'Owner', filter: { type: 'set' } },
  { field: 'tier', title: 'Tier',
    cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
  { field: 'state', title: 'State',
    cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
  { field: 'region', title: 'Region', filter: { type: 'set' } },
  { field: 'active', title: 'Active', type: 'boolean' },
  { field: 'deprecated', title: 'Deprecated', type: 'boolean' },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LatticeGridComponent],
  template: '<lattice-grid [config]="grid" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent implements AfterViewInit {
  @ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;

  grid = {
    rowKey: 'id',
    selection: 'multiple',
    columns,
    rows: [/* 20,000 service records */],
  };

  // Select rows through the API rather than by clicking, reaching the live grid.
  ngAfterViewInit() {
    const grid = this.gridRef.grid;
    const keys = [2, 3, 4, 9, 10].map((i) => grid.rows.get(i)?.key).filter(Boolean);
    if (keys.length) grid.selection.set(keys);
  }
}

bootstrapApplication(AppComponent);

Selecting single and multiple rows for bulk actions

Row selection marks whole rows as chosen, distinct from a cell range or a single active cell, and is the basis for any workflow that acts on a set of records at once: deleting a batch, exporting chosen rows, or applying an edit across everything currently picked. A developer reaches for it wherever the unit of interest is the row rather than an individual value, for example a task list where items are archived once ticked off, or an admin table where accounts are selected before a bulk status change. Lattice Grid controls this with selection: 'multiple' on the grid configuration, which allows click, shift-click range extension and ctrl or cmd-click toggling to build a set of selected rows; setting it to 'single' restricts the grid to one selected row at a time. As a JavaScript data grid, Lattice Grid tracks selection state separately from the row data, so toggling a row does not re-render the rest of the grid, and selecting thousands of rows in a virtualised view costs the same as selecting one, because only the visible row elements carry the selected styling at any moment. Selected rows carry both a visual highlight and an ARIA aria-selected attribute, so the current selection reaches screen readers as well as any code reading selection state back out of the grid.

How do I let users select multiple rows in a data grid?

Set selection: 'multiple' in the grid configuration. Users then click a row to select it, shift-click to extend the selection to a range, and ctrl or cmd-click to add or remove individual rows without losing the existing selection. Use selection: 'single' where only one row should ever be selected at a time.

Related demos