Auto-Focus on Next Row

The plugin enhances user navigation within the grid by automatically moving the focus to the next row when the user reaches the last cell of the current row. This feature streamlines data entry and editing processes by eliminating the need for manual navigation between rows.

Source code

TypeScript ts

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

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

defineCustomElements();

const grid = document.createElement('revo-grid');
grid.source = createRandomData(100);
grid.columns = [
  {
    name: '#',
    prop: 'id',
    size: 50,
  },
  {
    name: '🍎 Fruit',
    prop: 'name',
  },
  {
    name: '💰 Price',
    prop: 'price',
  },
];
grid.plugins = [RowKeyboardNextLineFocusPlugin, ColumnStretchPlugin, RowOddPlugin];
Object.assign(grid, {
  stretch: 'all',
})
grid.theme = isDark() ? 'darkMaterial' : 'material';
grid.hideAttribution = true;
grid.style.minHeight = '400px';

document.getElementById('demo-wrapper')?.appendChild(grid);

Vue vue

<script setup lang="ts">
import { computed } from 'vue';
import { VGrid } from '@revolist/vue3-datagrid';
import { RowKeyboardNextLineFocusPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';

const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const theme = computed(() => isDark.value ? 'darkMaterial' : 'material');
const source = createRandomData(100);
const columns = [
  {
    name: '#',
    prop: 'id',
    size: 50,
  },
  {
    name: '🍎 Fruit',
    prop: 'name',
  },
  {
    name: '💰 Price',
    prop: 'price',
  },
];

const plugins = [RowKeyboardNextLineFocusPlugin, ColumnStretchPlugin, RowOddPlugin];
</script>

<template>
  <v-grid
    :theme="theme"
    :source="source"
    :columns="columns"
    :plugins="plugins"
    stretch="all"
    :hideAttribution="true"
    style="min-height: 400px;"
  />
</template>

React tsx

import React, { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { RowKeyboardNextLineFocusPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

const RowNextLineDemo: React.FC = () => {
  const { createRandomData } = useRandomData();
  const theme = currentTheme().isDark() ? 'darkMaterial' : 'material';

  const source = useMemo(() => createRandomData(100), []);
  const columns = useMemo(() => [
    {
      name: '#',
      prop: 'id',
      size: 50,
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ], []);

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

  return (
    <RevoGrid
      theme={theme}
      source={source}
      columns={columns}
      plugins={plugins}
      stretch="all"
      hideAttribution
      style={{ minHeight: '400px' }}
    />
  );
};

export default RowNextLineDemo;

Angular ts

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

@Component({
  selector: 'row-next-line-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [theme]="theme"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      stretch="all"
      [hideAttribution]="true"
      style="min-height: 400px;"
    ></revo-grid>
  `,
})
export class RowNextLineGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  source = useRandomData().createRandomData(100);
  columns = [
    {
      name: '#',
      prop: 'id',
      size: 50,
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];

  plugins = [RowKeyboardNextLineFocusPlugin, ColumnStretchPlugin, RowOddPlugin];
}

Key Features:

• Automatic Navigation: Focus shifts seamlessly to the next row once the user navigates to the last cell in the current row.
• Enhanced Efficiency: Improves data entry and editing efficiency by reducing the need for manual row transitions.
• Configurable Behavior: Allows customization of focus behavior to fit specific user needs and grid configurations.

Benefits:

• Improved User Experience: Simplifies navigation within the grid, making data handling more intuitive.
• Increased Productivity: Accelerates data entry tasks by automating row transitions.

Usage: Integrate this plugin into your setup to enable automatic focus shifting, enhancing navigation and overall grid interaction.