editorCounter

The editorCounter is a custom cell editor for RevoGrid that provides plus/minus buttons to increment/decrement numeric values within a specified range directly within the grid cells.

Features:

• Renders plus and minus buttons for easy value adjustment
• Supports customizable minimum and maximum values through column properties
• Configurable step size for increments/decrements
• Shows current value with optional display toggle
• Automatically dispatches a celledit event upon change
• Seamless integration with RevoGrid's data model
• Modern, responsive design with customizable theming

Usage:

import { editorCounter } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'quantity',
    name: 'Quantity',
    cellTemplate: editorCounter,
    min: 0,
    max: 100,
    step: 1,
    hideValue: false, // Set to true to hide the value display
  },
];

Event Handling:

• Dispatches a celledit event on value change
• Event detail includes row, column, property, and new value information

Theming: Customizable through CSS variables:

• --counter-button-size: Size of plus/minus buttons (default: 24px)
• --counter-value-size: Font size of the value display (default: 14px)
• --counter-spacing: Spacing between elements (default: 4px)
• --counter-button-bg: Background color of buttons
• --counter-button-color: Color of button icons
• --counter-button-hover-bg: Button background on hover
• --counter-value-color: Color of the value text
• --counter-disabled-opacity: Opacity for disabled buttons

editorCounter: CellTemplate | undefined;