Vue 2 Data GridCustom ID, class, and other attributes in Vue 2

Pass a custom ID, class, and style to the HotTable component, to further customize your Vue 2 data grid.

On this page

Overview

Custom id, class, style, and other attributes can be passed into the hot-table wrapper element.

Each of them will be applied to the root Handsontable element, allowing further customization of the table.

Example

import { HotTable } from '@handsontable/vue';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/dist/handsontable.full.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = {
  data() {
    return {
      hotSettings: {
        startRows: 5,
        startCols: 5,
        colHeaders: true,
        stretchH: 'all',
        autoWrapRow: true,
        autoWrapCol: true,
        licenseKey: 'non-commercial-and-evaluation'
      },
      id: 'my-custom-id',
      className: 'my-custom-classname',
      style: 'height: 142px; overflow: hidden; border: 1px solid red;'
    };
  },
  components: {
    HotTable
  }
};

export default ExampleComponent;

There is a newer version of Handsontable available. Switch to the latest version ⟶