Row Select
Module Extensions
Section titled “Module Extensions”ColumnRegular
(Extended from @revolist/revogrid
)
Section titled “ColumnRegular (Extended from @revolist/revogrid)”interface ColumnRegular { /** * Enables checkbox on cells and columns */ rowSelect?: boolean | ((model: CellTemplateProp) => boolean)}
HTMLRevoGridElementEventMap
(Extended from global
)
Section titled “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
Section titled “Plugin API”DEFAULT_SEL_PROP
Section titled “DEFAULT_SEL_PROP”DEFAULT_SEL_PROP: string;
RowSelectPlugin
Section titled “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
Section titled “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
Section titled “RowSelectColumnType”class RowSelectColumnType {}
RowSelectEvent
(Extended from index.ts
)
Section titled “RowSelectEvent (Extended from index.ts)”export type RowSelectEvent = CellTemplateProp & { originalEvent: MouseEvent };
RowSelectAllEvent
(Extended from index.ts
)
Section titled “RowSelectAllEvent (Extended from index.ts)”export type RowSelectAllEvent = ColumnTemplateProp & { selected: boolean; type: DimensionCols;};