Time Editor

Double-click a value to edit. For typed time values, press Enter or click outside to save a valid draft. Time range endpoints remain editable together until saving. Escape discards the draft. Invalid drafts remain open; read-only cells cannot open or commit an editor.

Set dateEditor.autoApply: false to keep drafts until explicit Apply and show Apply/Cancel controls. Set dateEditor.showActions: true to show those controls while retaining automatic saves; showActions: false hides them. Clear remains available for optional values.

Source code

Vue

<template>
  <p>
    Double-click to edit. Valid changes save automatically; Escape 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>

TypeScript

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();
}

React

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 to edit. Valid changes save automatically; Escape discards
        the draft.
      </p>
      <RevoGrid
        source={rows?.length ? rows : fallback}
        columns={columns}
        plugins={plugins}
        theme={currentTheme().isDark() ? 'darkMaterial' : 'material'}
        style={{ height: '340px' }}
      />
    </>
  );
}

Angular

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 to edit. Valid changes save automatically; Escape 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 configuration

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 saving.

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.