# Counter Editor
URL: https://pro.rv-grid.com/guides/editors/editor-counter/
Source: src/content/docs/guides/editors/editor-counter.mdx
Description: A plus/minus counter editor for numeric values
The `editorCounter` is a custom cell editor for RevoGrid that provides plus and 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 the `editorCounter` and assign it to the `cellTemplate` property of a column in the RevoGrid:

```typescript
import { editorCounter } from '@revolist/revogrid-pro'
grid.columns = [
  {
    prop: 'quantity',
    name: 'Quantity',
    cellTemplate: editorCounter,
    min: 0,        // Minimum value (default: 0)
    max: 100,      // Maximum value (default: 100)
    step: 5,       // Step size for increments/decrements (default: 1)
    hideValue: false, // Set to true to hide the value display
  },
];
```

## Configuration Options

The counter editor supports several configuration options through column properties:

- `min` (number): The minimum allowed value (default: 0)
- `max` (number): The maximum allowed value (default: 100)
- `step` (number): The increment/decrement step size (default: 1)
- `hideValue` (boolean): Whether to hide the numeric value display (default: false)

## Event Handling

The counter editor dispatches a `celledit` event whenever the value changes. The event detail contains:
- `rgCol`: The column index of the edited cell
- `rgRow`: The row index of the edited cell
- `type`: The type of the cell
- `prop`: The property of the cell being edited
- `val`: The new numeric value after the change
- `preventFocus`: A flag to control grid focus behavior (default: true)

## Best Practices

1. **Step Size**: Choose a step size that makes sense for your data. For example:
   - Use 1 for integer values like quantities
   - Use 0.1 or 0.01 for decimal values like prices
   - Use 5 or 10 for larger ranges

2. **Value Range**: Set appropriate min and max values to prevent invalid data:
   - For quantities: min = 0, max = maximum stock level
   - For percentages: min = 0, max = 100
   - For ratings: min = 1, max = 5 (or your rating scale)

3. **Visual Feedback**: The editor provides visual feedback through:
   - Disabled buttons when at min/max values
   - Hover effects on buttons
   - Clear value display (unless hidden)

4. **Accessibility**: The editor supports keyboard interaction:
   - Tab navigation between buttons
   - Button states clearly indicated through styling
   - Numeric value visible by default
