Column Type Progress

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

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.

class ProgressColumnType {}