Custom editor example

You can declare a custom editor for the HotTable component either by declaring it as a class and passing it to the Handsontable options, or create an editor component.

• Declaring a renderer as a function
• Declaring an editor as a component

Declaring an editor as a class

An implementation of the @handsontable/vue component with a custom editor added. It utilizes the placeholder attribute in the editor's input element.

import Vue from 'vue'; import { HotTable } from '@handsontable/vue'; import Handsontable from 'handsontable'; class CustomEditor extends Handsontable.editors.TextEditor { constructor(props) { super(props); } createElements() { super.createElements(); this.TEXTAREA = document.createElement('input'); this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder'); this.TEXTAREA.setAttribute('data-hot-input', true); this.textareaStyle = this.TEXTAREA.style; Handsontable.dom.empty(this.TEXTAREA_PARENT); this.TEXTAREA_PARENT.appendChild(this.TEXTAREA); } } new Vue({ el: '#example1', data: function() { return { hotSettings: { startRows: 5, columns: [ { editor: CustomEditor } ], colHeaders: true, colWidths: 200 } } }, components: { HotTable } });

Edit this page