Skip to content
RevoGrid [Pro]

Editor Counter

editorCounter

Section titled “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;