Drag-to-Fill

WitTable provides a drag-to-fill feature through AutofillManager. A 7×7px fill handle appears at the bottom-right corner of the current selection. Drag it down, up, right, or left to fill adjacent cells with detected patterns. The autofill system is merge-aware and skips hidden cells within merged regions.

Live Demo

Select cells 10, 20, 30 in the Value column, then drag the fill handle (small square at bottom-right of selection) downward. Pattern detection extends the sequence.

View source code

AutofillDemo.tsx

import { WitTable } from '@witqq/spreadsheet-react';
import type { ColumnDef } from '@witqq/spreadsheet';
import { DemoWrapper } from './DemoWrapper';
import { useSiteTheme } from './useSiteTheme';

const columns: ColumnDef[] = [
  { key: 'index', title: '#', width: 60, type: 'number' },
  { key: 'value', title: 'Value', width: 120, type: 'number' },
  { key: 'label', title: 'Label', width: 150 },
  { key: 'date', title: 'Date', width: 120, type: 'date' },
];

const data = [
  { index: 1, value: 10, label: 'Alpha', date: '2025-01-01' },
  { index: 2, value: 20, label: 'Beta', date: '2025-01-02' },
  { index: 3, value: 30, label: 'Gamma', date: '2025-01-03' },
  { index: 4, value: 0, label: '', date: '' },
  { index: 5, value: 0, label: '', date: '' },
  { index: 6, value: 0, label: '', date: '' },
  { index: 7, value: 0, label: '', date: '' },
  { index: 8, value: 0, label: '', date: '' },
  { index: 9, value: 0, label: '', date: '' },
  { index: 10, value: 0, label: '', date: '' },
];

export function AutofillDemo() {
  const { witTheme } = useSiteTheme();
  return (
    <DemoWrapper title="Live Demo" description="Select cells 10, 20, 30 in the Value column, then drag the fill handle (small square at bottom-right of selection) downward. Pattern detection extends the sequence." height={400}>
      <WitTable
        theme={witTheme}
        columns={columns}
        data={data}
        showRowNumbers
        editable
        style={{ width: '100%', height: '100%' }}
      />
    </DemoWrapper>
  );
}

Pattern Detection

PatternDetector analyzes selected cell values and detects four pattern types:

Pattern	Example Source	Fill Result
number-sequence	1, 2, 3	4, 5, 6, …
number-increment	10, 20, 30	40, 50, 60, …
date-sequence	Jan 1, Jan 2, Jan 3	Jan 4, Jan 5, …
text-repeat	”Yes”, “No"	"Yes”, “No”, “Yes”, …

When no pattern is detected, the selected values are repeated cyclically.

Editable Table with Autofill

Autofill works automatically on editable tables:

import { WitTable } from '@witqq/spreadsheet-react';

const columns: ColumnDef[] = [
  { key: 'index', title: '#', type: 'number', editable: true },
  { key: 'name', title: 'Name', editable: true },
];

const data = [
  { index: 1, name: 'Alice' },
  { index: 2, name: 'Bob' },
  { index: 3, name: 'Charlie' },
];

function App() {
  return (
    <WitTable
      columns={columns}
      data={data}
      editable={true}
      onAutofillComplete={(event) => {
        console.log('Filled cells');
      }}
    />
  );
}

Select cells containing 1, 2, 3, then drag the fill handle down to generate 4, 5, 6, etc.

API Reference

AutofillManager

Manages fill handle rendering, drag interaction, and fill execution.

Pattern Detection Functions

Standalone functions exported from @witqq/spreadsheet:

import { detectPattern, extendPattern } from '@witqq/spreadsheet';

Function	Signature	Description
detectPattern	(values: CellValue[]) => DetectedPattern	Analyze values for pattern
extendPattern	(pattern: DetectedPattern, count: number) => CellValue[]	Generate next values

DetectedPattern

interface DetectedPattern {
  type: 'number-sequence' | 'number-increment' | 'date-sequence' | 'text-repeat';
  values: CellValue[];
  step?: number;          // Increment for number sequences
}

detectPattern inspects source values and returns the best-fit pattern. extendPattern generates count new values by extrapolating the pattern.

Events

Event	Payload	Description
autofillStart	{ anchor, range }	Drag started from fill handle
autofillPreview	{ range, values }	Preview of values during drag
autofillComplete	{ filledCells }	Fill operation completed