Skip to content
DzGrid

fill

Adds the fill handle at the corner of a block of cells, and Ctrl+D / Ctrl+R.

Importimport { fill } from '@dzgrid/dom/fill';
Signaturefill(blocks: RangeFeature, o?: FillFeatureOptions): FillFeature
Textsimport { EN_FILL } from '@dzgrid/dom/locales/en-fill';
languages: en, fr, ar
Style sheetimport '@dzgrid/theme/fill.css';
Declared inpackages/dom/src/fill/index.ts
OptionsType
handleboolean
along'row' | 'column'

What it does

Section titled “What it does”

fill(blocks) draws a small handle at the corner of the block, or of the focused cell. Drag it with the mouse to copy the block on, or to continue a series (1, 2, 3…; days by days); the drag starts 4 px from the handle, so a click never fills by accident. A pen, or anyone who does not drag, clicks the handle then clicks the last cell to fill. From the keyboard: Ctrl+D fills down, Ctrl+R toward the row’s end, and Ctrl+Shift+Enter starts a fill steered by the arrows (Cmd on a Mac).

A fill is one save request and one undo, said once. It writes through edit: without it every cell is read-only and nothing is written. It needs the range feature it is given, listed in features too; otherwise it reports a missing-feature error (detail range).

api(grid) offers fill(to), down(), end(), and apply(input) to write one input in every cell of the block.

Options

Section titled “Options”
  • handle: the handle drawn, dragged and clicked. Default true; false leaves the keys and the API.
  • along: the one way a fill may go: 'row' (along the row) or 'column' (up or down); every gesture is brought back onto it. Default: both. Another value counts as both, with an invalid-setting warning.

Example

Section titled “Example”
import { createGrid } from '@dzgrid/dom';
import { edit } from '@dzgrid/dom/edit';
import { editors } from '@dzgrid/dom/editors-base';
import { range } from '@dzgrid/dom/range';
import { fill } from '@dzgrid/dom/fill';
import { EN } from '@dzgrid/dom/locales/en';
import { EN_EDIT } from '@dzgrid/dom/locales/en-edit';
import { EN_EDITORS } from '@dzgrid/dom/locales/en-editors';
import { EN_RANGE } from '@dzgrid/dom/locales/en-range';
import { EN_FILL } from '@dzgrid/dom/locales/en-fill';


type Tray = { id: string; seed: string; shelf: number | null };


const blocks = range();


createGrid<Tray>(document.getElementById('trays')!, {
  rows: [{ id: 't1', seed: 'Basil', shelf: 1 }, { id: 't2', seed: 'Chervil', shelf: null }],
  columns: [
    { id: 'seed', header: 'Seed' },
    { id: 'shelf', header: 'Shelf', type: 'number', editable: true },
  ],
  getRowId: (t) => t.id,
  messages: { ...EN, text: { ...EN.text, ...EN_EDIT.text, ...EN_EDITORS.text, ...EN_RANGE.text, ...EN_FILL.text } },
  features: [edit<Tray>(), editors(), blocks, fill(blocks, { along: 'column' })],
});

Live demo

Section titled “Live demo”

Take Shelf 1 and 2, then drag the handle down to continue the series.

See also

Section titled “See also”