Row Selection

Apply selection to rows in grid.

This is an advanced feature that allows users to select multiple rows in grid and explains how to implement this with the help of the RowSelectPlugin.

Selected rows

Source code

import { defineCustomElements } from '@revolist/revogrid/loader';
import { currentTheme } from '../composables/useRandomData';
import {
  createRowSelectColumns,
  createRowSelectGrouping,
  createRowSelectOptions,
  createRowSelectTree,
  createRowSelectionSummary,
  createRowSelectionSummaryFromEvent,
  createRowSelectRows,
  formatRowSelectionSummary,
  ROW_SELECT_DEFAULT_MODE,
  ROW_SELECT_MODES,
  ROW_SELECT_PLUGINS,
  ROW_SELECT_ROW_ORDER,
  type RowSelectDemoMode,
} from './row-select-demo.shared';

defineCustomElements();

const { isDark } = currentTheme();

function configureRowSelectGrid(
  grid: HTMLRevoGridElement & {
    rowSelect?: ReturnType<typeof createRowSelectOptions>;
    rowOrder?: typeof ROW_SELECT_ROW_ORDER;
    tree?: ReturnType<typeof createRowSelectTree>;
  },
  summary: HTMLElement | null,
  rows?: any[],
  mode: RowSelectDemoMode = ROW_SELECT_DEFAULT_MODE,
) {
  const source = createRowSelectRows(rows, mode);
  if (summary) {
    summary.textContent = formatRowSelectionSummary(createRowSelectionSummary(source.length));
  }

  grid.className = `${grid.className || ''} grow h-full min-h-0 cell-border`.trim();
  grid.style.minHeight = grid.style.minHeight || '420px';
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.columns = createRowSelectColumns(mode);
  grid.plugins = ROW_SELECT_PLUGINS;
  grid.grouping = createRowSelectGrouping(mode);
  grid.rowSelect = createRowSelectOptions(mode);
  grid.tree = createRowSelectTree(mode);
  grid.rowOrder = ROW_SELECT_ROW_ORDER;
  grid.stretch = 'last';
  grid.hideAttribution = true;
  grid.addEventListener('rowselected', (event: CustomEvent<HTMLRevoGridElementEventMap['rowselected']>) => {
    if (summary) {
      summary.textContent = formatRowSelectionSummary(createRowSelectionSummaryFromEvent(event, source.length));
    }
  });
  grid.source = source;
}

export function load(parentSelector: string, rows?: any[]) {
  const parent = document.querySelector(parentSelector);
  if (!parent) {
    return () => {};
  }

  const shell = document.createElement('div');
  shell.className = 'grow h-full flex flex-col gap-3 min-h-0';

  const toolbar = document.createElement('div');
  toolbar.className = 'flex items-center gap-3 flex-wrap';

  const modeSelect = document.createElement('select');
  modeSelect.className = 'rv-input min-w-36';
  ROW_SELECT_MODES.forEach(({ label, value }) => {
    const option = document.createElement('option');
    option.value = value;
    option.textContent = label;
    option.selected = value === ROW_SELECT_DEFAULT_MODE;
    modeSelect.appendChild(option);
  });

  const summary = document.createElement('div');
  summary.className = 'text-sm font-medium';

  const gridHost = document.createElement('div');
  gridHost.className = 'grow h-full min-h-0 flex';

  toolbar.append(modeSelect, summary);
  shell.append(toolbar, gridHost);
  parent.appendChild(shell);

  const renderGrid = () => {
    gridHost.textContent = '';
    const grid = document.createElement('revo-grid') as HTMLRevoGridElement & {
      rowSelect?: ReturnType<typeof createRowSelectOptions>;
      rowOrder?: typeof ROW_SELECT_ROW_ORDER;
      tree?: ReturnType<typeof createRowSelectTree>;
    };
    gridHost.appendChild(grid);
    configureRowSelectGrid(grid, summary, rows, modeSelect.value as RowSelectDemoMode);
  };

  modeSelect.addEventListener('change', renderGrid);
  renderGrid();

  return () => {
    modeSelect.removeEventListener('change', renderGrid);
    shell.remove();
  };
}

const existingGrid = document.querySelector('revo-grid') as (HTMLRevoGridElement & {
  rowSelect?: ReturnType<typeof createRowSelectOptions>;
  rowOrder?: typeof ROW_SELECT_ROW_ORDER;
  tree?: ReturnType<typeof createRowSelectTree>;
}) | null;
const existingSummary = document.getElementById('selected-rows');
if (existingGrid && existingSummary) {
  configureRowSelectGrid(existingGrid, existingSummary);
}

It is an extremely powerful and flexible feature, despite its straightforward functionality.

Handles Complex Edge Cases: The selection plugin is built to support extreme edge case scenarios, ensuring it remains reliable and performant in even the most challenging use cases.
Efficient Redraw Management: Plugin provides better control over the selection updates, boosting performance and responsiveness for large datasets. Also it doesn't modify original data set.
Visual Feedback with Highlighted Rows: The plugin highlights selected rows and applies relevant CSS classes, providing instant visual feedback to users, making the grid more interactive and intuitive.
Bulk Selection Support: The plugin simplifies bulk operations by enabling select all functionality, allowing users to select and manipulate multiple rows at once.
Event-Driven Row Selection: The plugin emits a rowselected event whenever a row is selected, enabling easy collection of selected rows and providing flexibility for further actions.
Interaction with Other Features: The plugin works smoothly with filtering, sorting, grouping, tree data, and drag-and-drop, allowing users to select rows while still interacting with other grid features without interference.
Advanced Plugin Example: The RowSelectPlugin serves as an advanced example of how to create sophisticated, flexible grid plugins, demonstrating how to implement custom solutions for specific needs.
Foundation for Future Plugins: The plugin sets a strong foundation for building more advanced system features, providing a reusable and extensible pattern for other interactive grid-based plugins.

Key Features

Row Selection: Allows users to select multiple rows in the grid.
Column Selection: Enables users to select entire columns.
Grouped Row Selection: Can render optional group-level checkboxes that select all descendant data rows.
Checkbox-Based Row Reorder: Can hand checkbox-selected rows to RowOrderPlugin so checked rows drag as one compact block.
Automatic Theme Support: The plugin adapts to light or dark themes based on user settings.
Flexible and Extensible: This plugin demonstrates the potential for creating custom plugins, encouraging developers to expand the grid's functionality further.

To enable the RowSelectPlugin in your RevoGrid setup, you have two options:

Using rowSelect Prop in Columns
Using columnType with RowSelectColumnType

Option 1: Using `rowSelect` Prop in Columns

In this approach, the rowSelect property in the column definition enables checkbox-based row selection for the specific column.

1
  grid.columns = [
2
    {
3
      prop: '_check',
4
      rowSelect: true,
5
    },
6
    ...
7
  ];
8
  // Define plugin
9
  grid.plugins = [RowSelectPlugin];

Option 2: Using columnType with RowSelectColumnType

Alternatively, you can use a custom columnType and the RowSelectColumnType to enable row selection.

1
import { RowSelectColumnType, RowSelectPlugin, DEFAULT_SEL_PROP } from '@revolist/revogrid-pro';
2

3
grid.source = [];
4
// Define columns
5
grid.columns = [{
6
    prop: DEFAULT_SEL_PROP,
7
    columnType: 'select' // Use columnType 'select'
8
}, ...];
9
// Define plugin
10
grid.plugins = [RowSelectPlugin];
11
// Define the custom column type for selection
12
grid.columnTypes = { select: new RowSelectColumnType()};

Grouped Row Selection

Grouped row checkboxes are opt-in so existing grouped grids keep their current rendering.

1
grid.columns = [
2
  { prop: 'selected', rowSelect: true },
3
  { prop: 'name', name: 'Name' },
4
  { prop: 'department', name: 'Department' },
5
];
6

7
grid.grouping = { props: ['department'], expandedAll: true };
8
grid.rowSelect = {
9
  grouping: true,
10
};
11
grid.plugins = [RowSelectPlugin];

You can also use the future-compatible object form:

1
grid.rowSelect = {
2
  grouping: {
3
    enabled: true,
4
  },
5
};

When enabled, selecting a group checkbox selects all descendant data rows. Selecting only part of a group reflects an indeterminate state on the group checkbox. Synthetic grouping rows are not included in selected row counts.

Checkbox-Based Row Reorder

RowSelectPlugin can opt into RowOrderPlugin integration. When enabled, dragging a checked row moves all visible checked data rows in the current row viewport as a compact block.

This feature is disabled by default. Existing row-order behavior is unchanged unless rowSelect.rowOrder is enabled.

1
import { RowOrderPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';
2

3
grid.columns = [
4
  { prop: 'drag', name: '', rowDrag: true, size: 42 },
5
  { prop: 'selected', name: '', rowSelect: true, size: 56 },
6
  { prop: 'name', name: 'Name' },
7
  { prop: 'team', name: 'Team' },
8
];
9

10
grid.rowSelect = {
11
  rowOrder: true,
12
};
13
grid.rowOrder = {
14
  prop: 'name',
15
  preview: 'compact',
16
};
17
grid.plugins = [RowSelectPlugin, RowOrderPlugin];

You can also use the object form:

1
grid.rowSelect = {
2
  rowOrder: {
3
    enabled: true,
4
  },
5
};

Checkbox selection takes priority over range selection only when the dragged row is checked. If the dragged row is not checked, RowOrderPlugin falls back to its current range-selection or single-row behavior.

Only visible checked data rows move during the drag. Rows hidden by filtering, collapsed grouping, or collapsed tree branches remain selected but are not part of that drag operation. Synthetic grouping rows are never moved as selected data rows.

Grouping And Row Reorder Together

Grouped row checkboxes and checkbox-based row reorder can be enabled together:

1
grid.grouping = { props: ['team'], expandedAll: true };
2
grid.rowSelect = {
3
  grouping: true,
4
  rowOrder: true,
5
};
6
grid.rowOrder = {
7
  prop: 'name',
8
  preview: 'compact',
9
};
10
grid.plugins = [RowSelectPlugin, RowOrderPlugin];

With this setup:

Group checkboxes select or clear all descendant data rows.
Dragging a checked child row moves visible checked child rows as a compact block.
Parent and ancestor group checkboxes reflect child selection with checked or indeterminate state.
Group headers are excluded from select-all counts and row-order moved items.
Row-order grouping validation still applies, so invalid cross-group drops remain blocked unless your row-order configuration explicitly allows applying target group values.

Filtering, Sorting, Row Drag, And Tree Data

Row selection is stored against real data row indexes, not the rendered row position. This keeps checkbox state stable when the visible row topology changes.

| Case | Behavior | | --- | --- | | Filtering | Selected hidden rows remain selected. The rowselected event is re-emitted so visibleCount and visibleRowsCount reflect the filtered view. | | Sorting | Checkbox state follows the same data rows after sort order changes. | | Row drag | Checkbox state follows moved data rows after row order changes. | | Checkbox row-order | When rowSelect.rowOrder is enabled, visible checked rows are moved as a compact block before range selection is considered. | | Grouping | Group checkboxes are opt-in through rowSelect.grouping; synthetic group rows are not counted as selected rows. | | Tree data | When TreeDataPlugin is registered, selecting a tree parent toggles the parent and descendants. Dragging a checkbox-selected tree parent with descendants preserves the subtree relationship. |

API Quick Reference

| API | Default | Meaning | | --- | --- | --- | | ColumnRegular.rowSelect | false | Renders row-selection checkboxes in normal data cells for that column. A predicate can hide checkboxes for specific cells. | | grid.rowSelect.grouping | false | Enables group-level row-selection checkboxes. Accepts true or { enabled: true }. | | grid.rowSelect.rowOrder | false | Enables checkbox-selected row drag integration with RowOrderPlugin. Accepts true or { enabled: true }. | | additionalData.rowSelect | none | Legacy alias for grid.rowSelect. Prefer direct grid.rowSelect. |

The rowselected event exposes totals for both all selectable rows and the currently visible selectable rows:

| Event field | Meaning | | --- | --- | | count | Selected real data rows across the full dataset. | | allRowsCount | Selectable real data rows across the full dataset. | | visibleCount | Selected real data rows currently visible. | | visibleRowsCount | Selectable real data rows currently visible. |

Bulk Row Selection Demo

The live demo on this page is the common Bulk Row Selection example. It includes flat, grouped, and tree modes, a row checkbox column, row drag handles, group checkbox selection, filtering, sorting, selected/visible totals, and opt-in checkbox-based row reorder.