JavaScript Data Grid Autofill values

Table of contents

• Overview
• Autofill in all directions
• Autofill in a vertical direction only and creating new rows
• Related API reference

Overview

Autofill is a feature that enables you to copy the contents of a cell to another cell or range of cells within the grid.

Autofill in all directions

Using the tiny square known as the 'fill handle' in the corner of the selected cell, you can drag it (drag-down) to repeat the values from the cell. Double click the fill handle in cell B4 where the value is 30 to fill the selection down to the last value in neighboring column, just like it would in Excel or Google Sheets.

const container = document.querySelector('#example1'); const data = [ ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'], ['2017', 10, 11, 12, 13], ['2018', 20, 11, 14, 13], ['2019', 30, 15, 12, 13], ['2020', '', '', '', ''], ['2021', '', '', '', ''] ]; const hot = new Handsontable(container, { rowHeaders: true, colHeaders: true, fillHandle: true, // possible values: true, false, "horizontal", "vertical", height: 'auto', licenseKey: 'non-commercial-and-evaluation' }); // or, use `updateData()` to replace `data` without resetting states hot.loadData(data); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example1" class="hot "></div>

const container = document.querySelector('#example1');

const data = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
  ['2017', 10, 11, 12, 13],
  ['2018', 20, 11, 14, 13],
  ['2019', 30, 15, 12, 13],
  ['2020', '', '', '', ''],
  ['2021', '', '', '', '']
];

const hot = new Handsontable(container, {
  rowHeaders: true,
  colHeaders: true,
  fillHandle: true, // possible values: true, false, "horizontal", "vertical",
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

// or, use `updateData()` to replace `data` without resetting states
hot.loadData(data);

Autofill in a vertical direction only and creating new rows

In this configuration, the fill handle is restricted to move only vertically. New rows are automatically added to the bottom of the table by changing autoInsertRow to true.

const container = document.querySelector('#example2'); const data = [ ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'], ['2017', 10, 11, 12, 13], ['2018', 20, 11, 14, 13], ['2019', 30, 15, 12, 13], ['2020', '', '', '', ''], ['2021', '', '', '', ''] ]; const hot = new Handsontable(container, { data: data, rowHeaders: true, colHeaders: true, fillHandle: { direction: 'vertical', autoInsertRow: true }, height: 'auto', licenseKey: 'non-commercial-and-evaluation' }); <script src="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.js"></script> <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@12.1/dist/handsontable.full.min.css" /> <div id="example2" class="hot "></div>

const container = document.querySelector('#example2');

const data = [
  ['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
  ['2017', 10, 11, 12, 13],
  ['2018', 20, 11, 14, 13],
  ['2019', 30, 15, 12, 13],
  ['2020', '', '', '', ''],
  ['2021', '', '', '', '']
];

const hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  fillHandle: {
    direction: 'vertical',
    autoInsertRow: true
  },
  height: 'auto',
  licenseKey: 'non-commercial-and-evaluation'
});

Related API reference

• Configuration options:
  • fillHandle
• Hooks:
  • afterAutofill
  • beforeAutofill
  • beforeAutofillInsidePopulate
  • modifyAutofillRange
• Plugins:
  • Autofill