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 implementthis with the help of the RowSelectPlugin.

Selected rows

Source code

TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import { useRandomData, currentTheme } from '../composables/useRandomData';
const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

import {
  AdvanceFilterPlugin,
  ColumnStretchPlugin,
  RowOddPlugin,
  RowSelectPlugin,
} from '@revolist/revogrid-pro';

const grid = document.querySelector('revo-grid');
if (grid) {
  grid.source = createRandomData(100);
  // Define columns
  grid.columns = [
    {
      name: '🍎 Fruit',
      prop: 'name',
      sortable: true,
      rowSelect: true,
      filter: ['selection'],
    },
  ];
  // Define plugin
  grid.plugins = [RowOddPlugin, RowSelectPlugin, AdvanceFilterPlugin, ColumnStretchPlugin];

  grid.additionalData = {
    stretch: 'all'
  };
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  document.getElementById('selected-rows')?.setHTMLUnsafe(`100/0`);
  grid.addEventListener('rowselected', (event) => {
    document.getElementById('selected-rows')?.setHTMLUnsafe(
      `Visible: ${event.detail.visibleRowsCount}/${event.detail.visibleCount}, All: ${event.detail.allRowsCount}/${event.detail.count}`
    );
  });
}

Why it matters

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, drag-and-drop, and sorting, 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.

Key Features

• Row Selection: Allows users to select multiple rows in the grid.
• Column Selection: Enables users to select entire columns.
• 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.

  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.

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()};