Skip to content

Row Select

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
/**
* Enables checkbox on cells and columns
*/
rowSelect?: boolean | ((model: CellTemplateProp) => boolean)
}

HTMLRevoGridElementEventMap (Extended from global)

interface HTMLRevoGridElementEventMap {
/**
* Header cell with checkbox clicked
*/
[ROW_ALL_SELECT_EVENT]: RowSelectAllEvent;
/**
* Cell with checkbox clicked in the row
*/
[ROW_SELECT_EVENT]: RowSelectEvent;
/**
* When row selection happened. Returns selected objects.
*/
[ROW_SELECTED_EVENT]: {
selected: Map<DimensionRows, Set<number>>;
visibleCount: number;
visibleRowsCount: number;
count: number;
allRowsCount: number;
}
}

Plugin API

DEFAULT_SEL_PROP

DEFAULT_SEL_PROP: string;

RowSelectPlugin

The RowSelectPlugin is a plugin for RevoGrid that enables row selection functionality, allowing users to select individual or multiple rows within the grid. This plugin enhances interactivity and data manipulation capabilities by providing visual and programmatic access to row selection states.

Key Features:

  • Row Selection Management: Maintains a map of selected rows across different row types, allowing for comprehensive selection tracking and easy state manipulation.
  • Event-Driven Architecture: Listens to key events such as ROW_SELECT_EVENT, ROW_ALL_SELECT_EVENT, BEFORE_CELL_RENDER_EVENT, BEFORE_ROW_RENDER_EVENT, and BEFORE_HEADER_RENDER_EVENT to manage selection states dynamically and update the grid accordingly.
  • Header and Cell Template Augmentation: Modifies header and cell templates to reflect selection states, supporting features like “select all” functionality and individual row indication.
  • Integration with Data Providers: Works seamlessly with RevoGrid’s data and viewport providers to ensure accurate reflection of selection states in the UI.

Usage:

  • Integrate this plugin into a RevoGrid instance’s plugins array to enable row selection functionality.
  • Customize additional row selection behaviors and integrate with other grid features as needed.

Example

import { RowSelectPlugin } from '@revolist/revogrid-pro'
const grid = document.createElement('revo-grid');
grid.plugins = [RowSelectPlugin];

By using the RowSelectPlugin, developers can enhance their RevoGrid applications with intuitive row selection features, empowering users to interact with grid data more effectively.

class RowSelectPlugin {
/**
* Returns physical selected row indexes
*/
getSelectedIndexes();
}

RowSelectColumnType

class RowSelectColumnType {}

RowSelectEvent (Extended from index.ts)

export type RowSelectEvent = CellTemplateProp & { originalEvent: MouseEvent };

RowSelectAllEvent (Extended from index.ts)

export type RowSelectAllEvent = ColumnTemplateProp & {
selected: boolean;
type: DimensionCols;
};