# Column Type Progress
URL: https://pro.rv-grid.com/api/column-type-progress/
Source: src/content/docs/api/column-type-progress.md
### `ProgressColumnType`

The `ProgressColumnType` class implements a custom column type for the RevoGrid, designed
to visually display numeric values as progress bars within grid cells. It extends the
functionality of the standard `ColumnType` by providing validation and rendering logic
specific to progress indicators.

 **Features**:
- Validation: Ensures the value is a number between 0 and 100, representing a valid
  percentage for progress visualization.
- Custom cell rendering: Uses a `cellTemplate` function to render the progress bar,
  adapting the visual fill based on the cell value.

How to use:
- Integrate `ProgressColumnType` into your grid's column configuration to enable
  progress bar visualization.
- Assign the `cellTemplate` of this class to the corresponding column definition to
  render the progress bars.

### Example
```typescript
import { ProgressColumnType } from './progress-column-type';

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'progress',
    name: 'Progress',
    cellTemplate: ProgressColumnType.prototype.cellTemplate, // Use progress bar template
  },
];
```

This class enhances user experience by providing a clear visual representation of
progress data directly within the grid interface, making data interpretation more
intuitive and visually appealing.

```ts
class ProgressColumnType {}
```
