Row Editor

The RowEditPlugin is a custom plugin for RevoGrid that provides row-level editing capabilities, allowing users to edit entire rows inline with dedicated action buttons for saving or canceling changes.

Source code

TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader';
import { RowEditPlugin, editorRowActionColumn } 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: 'John Doe', age: 25, dateOfBirth: '1998-01-15' },
    { name: 'Jane Smith', age: 30, dateOfBirth: '1993-03-22' },
  ];

  grid.columns = [
    { prop: 'name' },
    { prop: 'age' },
    { prop: 'dateOfBirth' },
    { prop: 'edit', ...editorRowActionColumn },
  ];

  grid.plugins = [RowEditPlugin];

  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"
    :plugins="plugins"
    :columns="columns"
    :source="source"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :additional-data="{
      stretch: 'all',
    }"
    no-header
    style="min-height: 300px;"
    hide-attribution
  />
</template>

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

const { isDark } = currentThemeVue();

const source = ref([
  { avatar: 'https://i.pravatar.cc/300?img=1', name: 'John Doe', age: 25 },
  { avatar: 'https://i.pravatar.cc/300?img=2', name: 'Jane Smith', age: 30 },
  { avatar: 'https://i.pravatar.cc/300?img=3', name: 'Jim Beam', age: 35 },
  { avatar: 'https://i.pravatar.cc/300?img=4', name: 'John Doe', age: 25 },
  { avatar: 'https://i.pravatar.cc/300?img=5', name: 'Jane Smith', age: 30 },
  { avatar: 'https://i.pravatar.cc/300?img=6', name: 'Jim Beam', age: 35 },
  { avatar: 'https://i.pravatar.cc/300?img=7', name: 'John Doe', age: 25 },
  { avatar: 'https://i.pravatar.cc/300?img=8', name: 'Jane Smith', age: 30 },
  { avatar: 'https://i.pravatar.cc/300?img=9', name: 'Jim Beam', age: 35 },
]);

const plugins = [RowEditPlugin, ColumnStretchPlugin, RowOddPlugin, RowSelectPlugin];

const columns: ColumnRegular[] = [
  { prop: 'avatar', readonly: true, size: 60, cellTemplate: avatarRenderer, rectangular: true },
  { prop: 'name' },
  { prop: 'age' },
  { prop: 'edit', ...editorRowActionColumn },
];
</script>

React

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

const { isDark } = currentTheme();

function EditorRow() {
  const source = [
    { name: 'John Doe', age: 25, dateOfBirth: '1998-01-15' },
    { name: 'Jane Smith', age: 30, dateOfBirth: '1993-03-22' },
  ];

  const columns: ColumnRegular[] = useMemo(
    () => [
      { prop: 'name' },
      { prop: 'age' },
      { prop: 'dateOfBirth' },
      { prop: 'edit', ...editorRowActionColumn },
    ],
    []
  );

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

export default EditorRow;

Angular

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

@Component({
  selector: 'editor-row-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [theme]="theme"
      [hideAttribution]="true"
      style="height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class EditorRowGridComponent {
  source = [
    { name: 'John Doe', age: 25, dateOfBirth: '1998-01-15' },
    { name: 'Jane Smith', age: 30, dateOfBirth: '1993-03-22' },
  ];

  columns = [
    { prop: 'name' },
    { prop: 'age' },
    { prop: 'dateOfBirth' },
    { prop: 'edit', ...editorRowActionColumn },
  ];

  plugins = [RowEditPlugin];
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
}

• Features:

• Row Editing Mode: Enables editing of entire rows by rendering editors for all cells in the selected row.
• Inline Editors: Supports inline editing of multiple cells in a row simultaneously.
• Action Buttons: Provides intuitive buttons for Save and Cancel actions:
  • Save: Dispatches CELL_EDIT_SAVE_EVENT to persist changes.
  • Cancel: Dispatches CELL_EDIT_CANCEL_EVENT to discard changes.
• Event Handling: Listens for key events to manage row editing:
  • CELL_EDIT_EVENT: Initiates row editing mode.
  • CELL_EDIT_SAVE_EVENT: Saves edited data and updates the grid model.
  • CELL_EDIT_CANCEL_EVENT: Cancels editing and restores original data.
  • BEFORE_CELL_RENDER_EVENT: Ensures cells in the editing row render with editors.