Autofill

The AutoFillPlugin empowers users to streamline data entry by automating the filling of cell ranges with intelligent sequence strategies. This feature, commonly referred to as Drag Fill, AutoFill, or Smart Fill, is essential for spreadsheet-like applications and enhances productivity during repetitive or sequential data input tasks.

Tip

Try AutoFillPlugin to transform your data below. Drag down, fill, and let the grid handle the rest!

Source code

TypeScript ts

// src/components/autofill/Autofill.ts

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

// Initialize RevoGrid custom elements
defineCustomElements();
const { isDark } = currentTheme();

/**
 * Initializes the Autofill RevoGrid component within the specified parent element.
 * @param parentSelector - A CSS selector string for the parent element where the grid will be appended.
 */
export function load(parentSelector: string) {
  // Create a container div to hold the grid
  const container = document.createElement('div');
  container.className = 'rounded-lg overflow-hidden';
  container.style.minHeight = '500px';

  // Create the RevoGrid element
  const grid = document.createElement('revo-grid') as HTMLRevoGridElement;
  grid.range = true;
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;

  // Assign columns to the grid
  grid.columns = [
    {
      name: 'age',
      prop: 'age',
    },
    {
      name: '👷 dateOfBirth',
      prop: 'dateOfBirth',
    },
    {
      name: '📚 book #',
      prop: 'book',
    },
  ];
  const rows: DataType[] = new Array(100).fill(null).map((_, y) => ({ }))
  rows[0].age = 1;
  rows[1].age = 2;
  
  rows[0].dateOfBirth = '2024-12-04';
  rows[1].dateOfBirth = '2024-12-05';
  
  rows[0].book = 'Book 1';
  rows[1].book = 'Book 2';
  // Assign source data to the grid
  grid.source = rows;

  // Assign additional data to the grid
  grid.additionalData = {
    stretch: 'all',
  };

  // Register plugins
  grid.plugins = [AutoFillPlugin, ColumnStretchPlugin];

  // Append the grid to the container
  container.appendChild(grid);

  // Append the container to the specified parent element in the DOM
  document.querySelector(parentSelector)?.appendChild(container);
}

Vue vue

// src/components/autofill/Autofill.vue

<template>
  <VGrid
    class="rounded-lg overflow-hidden"
    range
    :theme="isDark ? 'darkCompact' : 'compact'"
    :columns="columns"
    :source="rows"
    :plugins="plugins"
    :additionalData="additionalData"
    hide-attribution
  />
</template>

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

const { isDark } = currentThemeVue();


const columns = ref<ColumnRegular[]>([
  {
    name: 'age',
    prop: 'age',
  },
  {
    name: '👷 dateOfBirth',
    prop: 'dateOfBirth',
  },
  {
    name: '📚 book #',
    prop: 'book',
  },
]);

const plugins = ref([AutoFillPlugin, ColumnStretchPlugin]);

const rows = ref<any[]>(new Array(100).fill(null).map((_, y) => ({ })));
rows.value[0].age = 1;
rows.value[1].age = 2;

rows.value[0].dateOfBirth = '2024-12-04';
rows.value[1].dateOfBirth = '2024-12-05';

rows.value[0].book = 'Book 1';
rows.value[1].book = 'Book 2';

const additionalData = ref({
  stretch: 'all',
});
</script>

React tsx

// src/components/autofill/Autofill.tsx

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

function Autofill() {
  const { isDark } = currentTheme();
  const theme = useMemo(() => (isDark() ? 'darkCompact' : 'compact'), [isDark]);

  const columns: (ColumnRegular | ColumnGrouping)[] = useMemo(
    () => [
      {
        name: 'age',
        prop: 'age',
      },
      {
        name: '👷 dateOfBirth',
        prop: 'dateOfBirth',
      },
      {
        name: '📚 book #',
        prop: 'book',
      },
    ],
    []
  );

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

  const [rows] = useState<DataType[]>(() => {
    const initialRows: DataType[] = new Array(100).fill(null).map(() => ({}));
    initialRows[0].age = 1;
    initialRows[1].age = 2;

    initialRows[0].dateOfBirth = '2024-12-04';
    initialRows[1].dateOfBirth = '2024-12-05';

    initialRows[0].book = 'Book 1';
    initialRows[1].book = 'Book 2';

    return initialRows;
  });

  const additionalData = useMemo(
    () => ({
      stretch: 'all',
    }),
    []
  );

  return (
    <RevoGrid
      className="rounded-lg overflow-hidden"
      range
      theme={theme}
      columns={columns}
      source={rows}
      plugins={plugins}
      additionalData={additionalData}
      hide-attribution
    />
  );
}

export default Autofill;

Angular ts

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

@Component({
  selector: 'autofill-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      class="rounded-lg overflow-hidden"
      [range]="true"
      [theme]="theme"
      [columns]="columns"
      [source]="rows"
      [plugins]="plugins"
      [additionalData]="additionalData"
      [hideAttribution]="true"
      style="height: 400px; width: 600px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class AutofillGridComponent implements OnInit {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';

  columns = [
    { name: 'age', prop: 'age' },
    { name: '👷 dateOfBirth', prop: 'dateOfBirth' },
    { name: '📚 book #', prop: 'book' },
  ];

  plugins = [AutoFillPlugin, ColumnStretchPlugin];

  rows: any[] = [];

  additionalData = {
    stretch: 'all',
  };

  ngOnInit() {
    this.rows = Array.from({ length: 100 }, () => ({}));
    this.rows[0].age = 1;
    this.rows[1].age = 2;

    this.rows[0].dateOfBirth = '2024-12-04';
    this.rows[1].dateOfBirth = '2024-12-05';

    this.rows[0].book = 'Book 1';
    this.rows[1].book = 'Book 2';
  }
}

Features

• Intelligent Sequences:
  • Linear numeric sequences (e.g., 1, 2, 3...).
  • Date sequences with or without intervals (e.g., 2023-01-01, 2023-01-02...).
  • Text sequences (e.g., Book 1, Book 2, Book 3...).
• Custom Strategies: Developers can define and register additional strategies for domain-specific needs.
• Efficient Updates: Automatically applies the filled data directly to the grid’s data store.
• Event Hook: Utilizes the beforeautofill event for enhanced control over autofill actions.

Why Use Autofill?

Autofill is ideal for:

• Repetitive Data Entry: Save time by quickly extending data patterns.
• Accurate Data Sequencing: Avoid manual errors when creating numeric, date, or text sequences.
• Improved Productivity: Especially useful for ERP systems, data analytics grids, and spreadsheet-style interfaces.

How It Works

1. Range Selection: The user selects a cell or a range of cells.
2. Drag to Fill: Dragging the fill handle applies the appropriate sequence (numeric, date, or text).
3. Event Handling: The beforeautofill event allows custom control over the autofill logic.