Timeline Editor

The editorTimeline is a custom cell editor for RevoGrid that provides a visual timeline interface for managing date ranges directly within grid cells.

Source code

TypeScript ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { editorTimeline, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

defineCustomElements();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  grid.range = true;
  grid.className = 'rounded-lg overflow-hidden cell-border';

  grid.source = [
    { name: 'Project Planning', timeline: { from: '2024-01-01', to: '2024-01-30', progress: 50 } },
    { name: 'Development Phase', timeline: { from: '2024-04-01', to: '2024-09-30', progress: 75 } },
    { name: 'Testing Phase', timeline: { from: '2024-10-01', to: '2024-12-31', progress: 10 } },
    { name: 'Deployment', timeline: { from: '2025-01-01', to: '2025-02-28' } },
  ];

  grid.columns = [
    { prop: 'name', size: 200 },
    {
      name: 'Date range',
      prop: 'timeline',
      size: 200,
      readonly: true,
      cellTemplate: editorTimeline,
      showWeekNumbers: true,
      dateFormat: 'dd/mm/yyyy',
      thresholds: [
        { value: 0, className: 'low' },
        { value: 50, className: 'medium' },
        { value: 75, className: 'high' },
      ],
    },
  ];

  grid.plugins = [RowOddPlugin];

  const { isDark } = currentTheme();
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.style.minHeight = '400px';
  grid.hideAttribution = true;

  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue vue

<template>
  <RevoGrid
    class="rounded-lg overflow-hidden cell-border"
    range
    :columns="columns"
    :source="source"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :plugins="[RowOddPlugin]"
    hide-attribution
    style="min-height: 400px;"
  />
</template>

<script setup lang="ts">
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
import { editorTimeline, RowOddPlugin } from '@revolist/revogrid-pro';
import { ref } from 'vue';
import { currentThemeVue } from '../composables/useRandomData';

const { isDark } = currentThemeVue();

const source = ref([
  { name: 'Project Planning', timeline: { from: '2024-01-01', to: '2024-01-30', progress: 50 } },
  { name: 'Development Phase', timeline: { from: '2024-04-01', to: '2024-09-30', progress: 75 } },
  { name: 'Testing Phase', timeline: { from: '2024-10-01', to: '2024-12-31', progress: 10 } },
  { name: 'Deployment', timeline: { from: '2025-01-01', to: '2025-02-28' } },
]);

const columns: ColumnRegular[] = [
  { prop: 'name', size: 200 },
  {
    name: 'Date range',
    prop: 'timeline',
    size: 200,
    readonly: true,
    cellTemplate: editorTimeline,
    showWeekNumbers: true,
    dateFormat: 'dd/mm/yyyy',
    thresholds: [
      { value: 0, className: 'low' },
      { value: 50, className: 'medium' },
      { value: 75, className: 'high' }
    ]
  },
];
</script> 

React tsx

import { useMemo } from 'react';
import { RevoGrid, type ColumnRegular } from '@revolist/react-datagrid';
import { editorTimeline, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

function EditorTimeline() {
  const { isDark } = currentTheme();

  const source = useMemo(() => [
    { name: 'Project Planning', timeline: { from: '2024-01-01', to: '2024-01-30', progress: 50 } },
    { name: 'Development Phase', timeline: { from: '2024-04-01', to: '2024-09-30', progress: 75 } },
    { name: 'Testing Phase', timeline: { from: '2024-10-01', to: '2024-12-31', progress: 10 } },
    { name: 'Deployment', timeline: { from: '2025-01-01', to: '2025-02-28' } },
  ], []);

  const columns: ColumnRegular[] = useMemo(
    () => [
      { prop: 'name', size: 200 },
      {
        name: 'Date range',
        prop: 'timeline',
        size: 200,
        readonly: true,
        cellTemplate: editorTimeline,
        showWeekNumbers: true,
        dateFormat: 'dd/mm/yyyy',
        thresholds: [
          { value: 0, className: 'low' },
          { value: 50, className: 'medium' },
          { value: 75, className: 'high' },
        ],
      },
    ],
    []
  );

  const plugins = useMemo(() => [RowOddPlugin], []);

  return (
    <RevoGrid
      className="rounded-lg overflow-hidden cell-border"
      range
      source={source}
      columns={columns}
      plugins={plugins}
      theme={isDark() ? 'darkMaterial' : 'material'}
      hideAttribution
      style={{ minHeight: '400px' }}
    />
  );
}

export default EditorTimeline;

Angular ts

import { Component, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { editorTimeline, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

@Component({
  selector: 'editor-timeline-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      class="rounded-lg overflow-hidden cell-border"
      [range]="true"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [theme]="theme"
      [hideAttribution]="true"
      style="min-height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class EditorTimelineGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';

  source = [
    { name: 'Project Planning', timeline: { from: '2024-01-01', to: '2024-01-30', progress: 50 } },
    { name: 'Development Phase', timeline: { from: '2024-04-01', to: '2024-09-30', progress: 75 } },
    { name: 'Testing Phase', timeline: { from: '2024-10-01', to: '2024-12-31', progress: 10 } },
    { name: 'Deployment', timeline: { from: '2025-01-01', to: '2025-02-28' } },
  ];

  columns = [
    { prop: 'name', size: 200 },
    {
      name: 'Date range',
      prop: 'timeline',
      size: 200,
      readonly: true,
      cellTemplate: editorTimeline,
      showWeekNumbers: true,
      dateFormat: 'dd/mm/yyyy',
      thresholds: [
        { value: 0, className: 'low' },
        { value: 50, className: 'medium' },
        { value: 75, className: 'high' },
      ],
    },
  ];

  plugins = [RowOddPlugin];
}

Features:

• Visual timeline bar with progress indicator
• Date range selection with native date pickers
• Progress tracking based on current date
• Responsive design that fits within grid cells