Timeline Segment Editor

Display multiple labeled segments within a cell and edit their ranges visually. Each segment has a start and end value, making this useful for task phases, availability windows, or event periods.

Always pair timelineRenderer with DataGridFormattingPlugin. The plugin supplies the matching structured timeline editor, preserving event arrays when users edit a cell. TooltipPlugin displays each event’s label and range. Double-click a timeline cell below to add, move, resize, or remove events, then save or cancel.

Configuration

import {
  DataGridFormattingPlugin,
  TooltipPlugin,
  timelineRenderer,
} from '@revolist/revogrid-pro';

grid.plugins = [DataGridFormattingPlugin, TooltipPlugin];
grid.columns = [
  {
    name: 'Timeline',
    prop: 'timeline',
    size: 320,
    timelineRange: { start: 0, end: 100 },
    cellTemplate: timelineRenderer,
  },
];
grid.source = [
  {
    timeline: [
      { start: 10, end: 40, label: 'Build' },
      { start: 55, end: 80, label: 'Review' },
    ],
  },
];

Use { start, end, label? } event arrays for both rendering and editing. For a single date range with calendar controls, use the Date Editor’s range mode, which uses a different value shape.