RevoGrid

Appearance

Module Extensions ​

ColumnRegular (Extended from @revolist/revogrid) ​

ts
interface ColumnRegular {
  /**
      * The position of the bars in the chart.
      */
      barPosition?: 'top' | 'bottom';
  /**
       * Define badge styles for the cell.
       */
      badgeStyles?: Record<string, { backgroundColor: string; color: string }>;
  /**
       * Whether to render the shape as a rectangular.
       */
      rectangular?: boolean;
  /**
       * Maximum number of stars in the rating. Default is 5.
       */
      maxStars?: number;
  /**
       * Minimum value for the progress line. Default is 0.
       */
      minValue?: number;
  /**
       * Maximum value for the progress line. Default is 100.
       */
      maxValue?: number;
  /**
       * Define thresholds for the cell.
       */
      thresholds?: ThresholdConfig[];
  /**
       * Format the value of the cell.
       */
      formatValue?: (value: number, column: ColumnRegular) => string;
  /**
       * Function to calculate progress based on row data.
       * This allows connecting multiple fields to determine progress.
       * @param config Configuration object containing model, data, and prop
       * @returns A number between 0 and 100 representing progress
       */
      progress?: (config: { model: DataType; data: DataType[]; prop: ColumnProp }) => number
}

Plugin API ​

progressLineRenderer ​

The progressLineRenderer is a custom cell renderer for RevoGrid that provides a visual representation of progress as a horizontal line within grid cells. This renderer effectively communicates the completion level of a numeric value relative to a defined range.

Features:

  • Displays a progress line that visually indicates the percentage completion within specified minimum and maximum values.
  • Shows a percentage label beside the progress bar, formatted to one decimal place for precision.
  • Automatically normalizes values to ensure accurate representation within the defined range.
  • Configurable through column properties such as minValue and maxValue.
  • Supports a custom progress function to calculate progress based on row data.

Usage:

  • Import progressLineRenderer and use it as the cellTemplate in your RevoGrid's column configuration.
  • Specify minValue and maxValue for each column to define the range for progress calculation.
  • Optionally provide a progress function to calculate progress based on row data.

Example ​

typescript
import { progressLineRenderer } from './charts/progress-line.renderer';

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'score',
    name: 'Completion Rate',
    minValue: 0,
    maxValue: 100,
    cellTemplate: progressLineRenderer,
    // Optional: Custom progress calculation
    progress: (config) => {
      // Calculate progress based on multiple fields
      const completed = config.model.completedTasks || 0;
      const total = config.model.totalTasks || 1;
      return (completed / total) * 100;
    }
  },
];

This renderer is suitable for applications where tracking progression or percentage completion is necessary, such as performance dashboards, goal tracking systems, or any scenario where a visual progress indicator is beneficial.

ts
progressLineRenderer: CellTemplate;

progressLineWithValueRenderer ​

ts
progressLineWithValueRenderer: CellTemplate;

sparklineRenderer ​

ts
sparklineRenderer: CellTemplate | undefined;

barChartRenderer ​

RevoGrid Renderer Generates a bar chart visualization based on the provided data values and column configuration.

ts
barChartRenderer: (h: HyperFunc<VNode>, { value, column, }: { value?: any; column: Partial<ColumnRegular>; }) => VNode;

heatmapRenderer ​

ts
heatmapRenderer: CellTemplate | undefined;

badgeRenderer ​

RevoGrid Renderer Renderers a badge cell with custom background color, text Supports both badgeStyles and thresholds for styling

ts
badgeRenderer: CellTemplate | undefined;

ratingStarRenderer ​

ts
ratingStarRenderer: CellTemplate;

timelineRenderer ​

ts
timelineRenderer: CellTemplate | undefined;

changeRenderer ​

RevoGrid Renderer Formats a numeric cell value with corresponding styles and icons based on whether the value is positive, negative, or zero, and exports a cell template renderer for a grid that utilizes this formatting.

ts
changeRenderer: CellTemplate;

thumbsRenderer ​

ts
thumbsRenderer: CellTemplate | undefined;

columnTypeRenderer ​

ts
columnTypeRenderer: ColumnTemplateFunc | undefined;

PieData ​

ts
interface PieData {
  value: number;
  color?: string;
  name?: string
}

pieChartRenderer ​

ts
pieChartRenderer: (h: HyperFunc<VNode>, { value, column, }: { value?: number[] | PieData[] | undefined; column?: Partial<ColumnDataSchemaModel> | undefined; }) => VNode;

summaryHeaderRenderer ​

ts
summaryHeaderRenderer: (h: HyperFunc<VNode>, summary: Record<string, number>, column?: { maxItems?: number | undefined; }) => VNode;

summaryAggregateRenderer ​

ts
summaryAggregateRenderer: (h: HyperFunc<VNode>, summary: Record<string, number>, column?: { showSum?: boolean | undefined; showAvg?: boolean | undefined; }) => VNode;

avatarRenderer ​

ts
avatarRenderer: CellTemplate | undefined;

thresholdRenderer ​

The thresholdRenderer is a custom cell renderer for RevoGrid that applies CSS classes based on defined thresholds. It uses the existing threshold system to apply classes to cells based on their values.

Features:

  • Supports multiple thresholds with custom CSS classes
  • Simple and straightforward threshold-based styling
  • Works with the existing threshold system

Usage:

typescript
import { thresholdRenderer } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'score',
    name: 'Score',
    thresholds: [
      { value: 0, className: 'high' },    // Red for negative values
      { value: 50, className: 'medium' },     // Yellow for values 0-50
      { value: 100, className: 'low' },      // Green for values 50-100
    ],
    cellProperties: thresholdRenderer,
  },
];
ts
thresholdRenderer: PropertiesFunc;

circularProgressRenderer ​

ts
circularProgressRenderer: CellTemplate;

getThresholdClasses ​

Get the threshold classes for a given value and column.

Example ​

typescript
const columns: ColumnRegular[] = [
  {
    name: 'Avg Rating',
    prop: 'Average Rating',
    filter: ['number', 'slider'],
    sortable: true,
    maxStars: 5,
    maxValue: 5,
    thresholds: [
      { value: 4, className: 'high' },
      { value: 3, className: 'medium' },
      { value: 0, className: 'low' },
    ],
  },
];
ts
export function getThresholdClasses(
  value: number,
  column: Partial<ColumnRegular>,
);

ThresholdConfig ​

The ThresholdConfig interface defines the structure of a threshold configuration object. It specifies the value and the class name to be applied when the value exceeds or equals the threshold.

ts
interface ThresholdConfig {
  /**
     * The value of the threshold.
     */
    value: number;
  /**
     * The class name to be applied when the value exceeds or equals the threshold.
     */
    className: string
}