# Row Selection
URL: https://pro.rv-grid.com/guides/rows/row-select/
Source: src/content/docs/guides/rows/row-select.mdx
Description: Row selection in grid
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`.

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

1. **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.

2. **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.

3. **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.

4. **Bulk Selection Support**: The plugin simplifies bulk operations by enabling **select all** functionality, allowing users to select and manipulate **multiple rows** at once.

5. **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.

6. **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.

7. **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.

8. **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.

- **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:
1. **Using `rowSelect` Prop in Columns**
2. **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.

```typescript
  grid.columns = [
    {
      prop: '_check',
      rowSelect: true,
    },
    ...
  ];
  // Define plugin
  grid.plugins = [RowSelectPlugin];
```

## Option 2: Using columnType with RowSelectColumnType
Alternatively, you can use a custom columnType and the RowSelectColumnType to enable row selection.

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

grid.source = [];
// Define columns
grid.columns = [{
    prop: DEFAULT_SEL_PROP,
    columnType: 'select' // Use columnType 'select'
}, ...];
// Define plugin
grid.plugins = [RowSelectPlugin];
// Define the custom column type for selection
grid.columnTypes = { select: new RowSelectColumnType()};
```

## Grouped Row Selection

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

```typescript
grid.columns = [
  { prop: 'selected', rowSelect: true },
  { prop: 'name', name: 'Name' },
  { prop: 'department', name: 'Department' },
];

grid.grouping = { props: ['department'], expandedAll: true };
grid.rowSelect = {
  grouping: true,
};
grid.plugins = [RowSelectPlugin];
```

You can also use the future-compatible object form:

```typescript
grid.rowSelect = {
  grouping: {
    enabled: true,
  },
};
```

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.

```typescript
import { RowOrderPlugin, RowSelectPlugin } from '@revolist/revogrid-pro';

grid.columns = [
  { prop: 'drag', name: '', rowDrag: true, size: 42 },
  { prop: 'selected', name: '', rowSelect: true, size: 56 },
  { prop: 'name', name: 'Name' },
  { prop: 'team', name: 'Team' },
];

grid.rowSelect = {
  rowOrder: true,
};
grid.rowOrder = {
  prop: 'name',
  preview: 'compact',
};
grid.plugins = [RowSelectPlugin, RowOrderPlugin];
```

You can also use the object form:

```typescript
grid.rowSelect = {
  rowOrder: {
    enabled: true,
  },
};
```

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:

```typescript
grid.grouping = { props: ['team'], expandedAll: true };
grid.rowSelect = {
  grouping: true,
  rowOrder: true,
};
grid.rowOrder = {
  prop: 'name',
  preview: 'compact',
};
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.
