Custom ID, Class and other attributes in Vue 3

Pass id, className, and style props to the HotTable component to control its HTML attributes and appearance.

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.

Find out which Vue 3 versions are supported

Example

Source code

JavaScript

import { defineComponent } from 'vue';
import { HotTable } from '@handsontable/vue3';
import { registerAllModules } from 'handsontable/registry';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = defineComponent({
  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;

HTML

<div id="example1">
  <hot-table :id="id" :class="className" :style="style" :settings="hotSettings"></hot-table>
</div>

Result

The rendered HotTable element has the custom id, class, and style attributes applied directly to its root DOM element, making it straightforward to target with CSS or JavaScript selectors.