# Editor Counter
URL: https://pro.rv-grid.com/api/editor-counter/
Source: src/content/docs/api/editor-counter.md
### `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**:
```typescript
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

```ts
editorCounter: CellTemplate<DataType<any, ColumnProp>> | undefined;
```
