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

import { defineCustomElements } from '@revolist/revogrid/loader';
import { editorTimeline } 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.source = [
    { name: 'Project Planning', timeline: { from: '2024-01-01', to: '2024-03-31' } },
    { name: 'Development Phase', timeline: { from: '2024-04-01', to: '2024-09-30' } },
    { name: 'Testing Phase', timeline: { from: '2024-10-01', to: '2024-12-31' } },
    { name: 'Deployment', timeline: { from: '2025-01-01', to: '2025-02-28' } },
  ];

  grid.columns = [
    { prop: 'name', size: 150 },
    {
      name: 'Timeline',
      prop: 'timeline',
      cellTemplate: editorTimeline,
      showWeekNumbers: true,
      dateFormat: 'dd/mm/yyyy',
    },
  ];

  const { isDark } = currentTheme();
  grid.theme = isDark() ? 'darkCompact' : 'compact';

  grid.hideAttribution = true;

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

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,
    cellTemplate: editorTimeline,
    showWeekNumbers: true,
    dateFormat: 'dd/mm/yyyy',
    thresholds: [
      { value: 0, className: 'low' },
      { value: 50, className: 'medium' },
      { value: 75, className: 'high' }
    ]
  },
];
</script>

React

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

const { isDark } = currentTheme();

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

  const columns: ColumnRegular[] = useMemo(
    () => [
      { prop: 'name', size: 150 },
      {
        name: 'Timeline',
        prop: 'timeline',
        cellTemplate: editorTimeline,
        showWeekNumbers: true,
        dateFormat: 'dd/mm/yyyy',
      },
    ],
    []
  );

  return (
    <div>
      <RevoGrid
        source={source}
        columns={columns}
        hideAttribution
        theme={isDark() ? 'darkCompact' : 'compact'}
      />
    </div>
  );
}

export default EditorTimeline;

Angular

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

@Component({
  selector: 'editor-timeline-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [source]="source"
      [columns]="columns"
      [theme]="theme"
      [hideAttribution]="true"
      style="height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class EditorTimelineGridComponent implements OnInit {
  source = [
    { name: 'Project Planning', timeline: { from: '2024-01-01', to: '2024-03-31' } },
    { name: 'Development Phase', timeline: { from: '2024-04-01', to: '2024-09-30' } },
    { name: 'Testing Phase', timeline: { from: '2024-10-01', to: '2024-12-31' } },
    { name: 'Deployment', timeline: { from: '2025-01-01', to: '2025-02-28' } },
  ];

  columns = [
    { prop: 'name', size: 150 },
    {
      name: 'Timeline',
      prop: 'timeline',
      cellTemplate: editorTimeline,
      showWeekNumbers: true,
      dateFormat: 'dd/mm/yyyy',
    },
  ];

  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';

  ngOnInit() {
    // Any additional initialization logic
  }
}

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