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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.min.css">
<style>
  #grid > div { height: 540px; }
</style>
<div id="grid"></div>

<script type="module">
  import * as Vue from 'https://esm.sh/vue@3';
  import { createGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/lattice-grid.esm.min.js';
  import createLatticeGrid from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/vue.esm.min.js';

  const LatticeGrid = createLatticeGrid({ vue: Vue, createGrid });

  Vue.createApp({
    components: { LatticeGrid },
    data() {
      return {
        config: {
          rowKey: 'id',
          selection: 'multiple',
          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' },
          ],
          rows,  // 20,000 service records
        },
      };
    },
    mounted() {
      // The component exposes the live grid via a template ref.
      const grid = this.$refs.grid.grid();
      // Select rows through the API rather than by clicking.
      const keys = [2, 3, 4, 9, 10].map((i) => grid.rows.get(i)?.key).filter(Boolean);
      if (keys.length) grid.selection.set(keys);
    },
    template: '<lattice-grid ref="grid" v-bind="config" />',
  }).mount('#grid');
</script>

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