Time Editor

Double-click a value to edit. Apply or Ctrl/Cmd+Enter saves the draft. Cancel, Escape or outside dismissal discards it. Read-only cells cannot open or commit an editor.

Source code

Vuevue

<template>
  <p>Double-click a value to edit. Apply saves; Cancel discards the draft.</p>
  <RevoGrid
    :source="source"
    :columns="columns"
    :plugins="plugins"
    :theme="isDark ? 'darkMaterial' : 'material'"
    style="height: 340px"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { currentThemeVue } from '../composables/useRandomData';
import RevoGrid from '@revolist/vue3-datagrid';
import { editorColumns, editorRows } from './editor-data';
const { isDark } = currentThemeVue();
const source = ref(editorRows());
const columns = editorColumns();
const plugins = [];
</script>

TypeScriptts

import { currentTheme } from '../composables/useRandomData';
import { defineCustomElements } from '@revolist/revogrid/loader';
import { editorColumns, editorRows } from './editor-data';
defineCustomElements();
export function load(parentSelector: string, rows = editorRows()) {
  const grid = document.createElement('revo-grid');
  grid.theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  grid.style.height = '340px';
  grid.columns = editorColumns();
  document.querySelector(parentSelector)?.append(grid);
  grid.source = rows;
  return () => grid.remove();
}

Reacttsx

import { currentTheme } from '../composables/useRandomData';
import { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { editorColumns, editorRows } from './editor-data';
export default function EditorTime({ rows }: { rows?: any[] }) {
  const columns = useMemo(editorColumns, []);
  const fallback = useMemo(editorRows, []);
  const plugins = useMemo(() => [], []);
  return (
    <>
      <p>
        Double-click a value to edit. Apply saves; Cancel discards the draft.
      </p>
      <RevoGrid
        source={rows?.length ? rows : fallback}
        columns={columns}
        plugins={plugins}
        theme={currentTheme().isDark() ? 'darkMaterial' : 'material'}
        style={{ height: '340px' }}
      />
    </>
  );
}

Angularts

import { currentTheme } from '../composables/useRandomData';
import { Component, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { editorColumns, editorRows } from './editor-data';
@Component({
  selector: 'editor-time-grid',
  standalone: true,
  imports: [RevoGrid],
  encapsulation: ViewEncapsulation.None,
  template: `<p>
      Double-click a value to edit. Apply saves; Cancel discards the draft.
    </p>
    <revo-grid
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [theme]="theme"
      style="height:340px"
    ></revo-grid>`,
})
export class EditorTimeGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  source = editorRows();
  columns = editorColumns();
  plugins = [];
}

Editor configurationts

import type { ColumnRegular } from '@revolist/revogrid';
import { TimeEditor } from '@revolist/revogrid-pro';
export const editorRows = () => [
  {
    name: 'Morning shift',
    value: '09:30',
    range: { from: '09:30', to: '17:00' },
    seconds: '09:30:15',
  },
  { name: 'Optional time', value: null, range: null, seconds: null },
];
export const editorColumns = (): ColumnRegular[] => [
  { prop: 'name', name: 'Task', size: 170, readonly: true },
  {
    prop: 'value',
    name: '12-hour clock',
    size: 180,
    editor: TimeEditor,
    dateEditor: { timeFormat: '12h' },
  },
  {
    prop: 'range',
    name: 'Time range',
    size: 240,
    editor: TimeEditor,
    dateEditor: {
      selection: 'range',
      timeFormat: '24h',
      minTime: '08:00',
      maxTime: '20:00',
      timeStep: 900,
    },
    cellTemplate: (_h, { value }) =>
      value ? `${value.from} – ${value.to}` : '',
  },
  {
    prop: 'seconds',
    name: 'Second precision',
    size: 200,
    editor: TimeEditor,
    dateEditor: { precision: 'second', timeFormat: '24h' },
  },
];

The editor uses the shared TimeControl from @revolist/ui/date-time, the same time control used by the datetime picker. Range mode renders one shared control for each endpoint.

Use TimeEditor, or register ColumnTime. New cells store date-free time strings such as 09:30 or 09:30:15; ranges store { from, to }. Clear stores null.

Configure timeFormat: 'locale' | '12h' | '24h', precision: 'minute' | 'second', timeStep in seconds, and minTime/maxTime. Range endpoints have independent time controls. Localized 12-hour presentation parses the displayed digits and day periods. Required values and bounds are validated before Apply.

For instants with a calendar date and timezone, use the datetime editor.

Localize the picker with dateEditor.text (including chooseTime, time, startTime, endTime and invalid) and partial dateEditor.actions. dateEditor.calendar.locale supplies the locale for time presentation. Stored time values remain date-free.