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
, andBEFORE_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;};