Handsontable

https://handsontable.com/docs/16.2/
Admin
Handsontable is a JavaScript data grid component that brings spreadsheet-like functionality to web...
Tokens:1,703,220
Snippets:11,785
Trust Score:10
Update:4 months ago
Show doc for...
Tokens:
Raw
### CDN Installation Example

Source: https://handsontable.com/docs/16.2/react-data-grid/installation

Includes CDN links for Handsontable, React, and the react-wrapper, along with HTML structure for embedding.

```html
<script src="https://cdn.jsdelivr.net/npm/handsontable@16.2/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/handsontable.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@16.2/styles/ht-theme-main.css" />
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@handsontable/react-wrapper@16.2/dist/react-handsontable.min.js"></script>
<script src="https://handsontable.com/docs/16.2/scripts/fixer.js"></script>
<div id="example" class="hot"></div>
```

--------------------------------

### ExampleComponent.js - Setup

Source: https://handsontable.com/docs/16.2/angular-data-grid/vue-vuex-example

This part of the ExampleComponent.js file sets up Vuex, Handsontable modules, and basic component structure.

```javascript
import Vue from 'vue';
import Vuex from 'vuex';
import { HotTable } from '@handsontable/vue';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

Vue.use(Vuex);

// register Handsontable's modules
registerAllModules();

const ExampleComponent = {
  data() {
    return {
      hotSettings: {
        data: [
          ['A1', 'B1', 'C1', 'D1'],
          ['A2', 'B2', 'C2', 'D2'],
          ['A3', 'B3', 'C3', 'D3'],
          ['A4', 'B4', 'C4', 'D4'],
        ],
        colHeaders: true,
        rowHeaders: true,
        readOnly: true,
        height: 'auto',
        autoWrapRow: true,
        autoWrapCol: true,
        afterChange: () => {
          if (this.hotRef) {
            this.$store.commit('updateData', this.hotRef.getSourceData());
          }
        },
        licenseKey: 'non-commercial-and-evaluation'
      },
      hotRef: null
    };
  },
  mounted() {
    this.hotRef = this.$refs.wrapper.hotInstance;
    this.$store.subscribe(() => this.updateVuexPreview());
    this.$store.commit('updateData', this.hotRef.getSourceData());
  },
  methods: {
    toggleReadOnly(event) {
      this.hotSettings.readOnly = event.target.checked;
      this.$store.commit('updateSettings', { prop: 'readOnly', value: this.hotSettings.readOnly });
    },
    updateVuexPreview() {
      // This method serves only as a renderer for the Vuex's state dump.
      const previewTable = document.querySelector('#vuex-preview pre');
      let newInnerHtml = '<div>';
      for (const [key, value] of Object.entries(this.$store.state)) {
        newInnerHtml += '<div><div class="table-container">';
        if (key === 'hotData' && Array.isArray(value)) {
          newInnerHtml += '<strong>hotData:</strong> <br><table><tbody>';
          for (const row of value) {
            newInnerHtml += '<tr>';
            for (const cell of row) {
              newInnerHtml += `<td>${cell}</td>`;
            }
            newInnerHtml += '</tr>';
          }
          newInnerHtml += '</tbody></table>';
        } else if (key === 'hotSettings') {
          newInnerHtml += '<strong>hotSettings:</strong> <ul>';
          for (const settingsKey of Object.keys(value)) {
            newInnerHtml += `<li>${settingsKey}: ${this.$store.state.hotSettings[settingsKey]}</li>`;
          }
          newInnerHtml += '</ul>';
        }
        newInnerHtml += '</div></div>';
      }
      newInnerHtml += '</div>';
      previewTable.innerHTML = newInnerHtml;
    }
  },
  components: {
    HotTable
  },
  store: new Vuex.Store({
    state: {
      hotData: null,
      hotSettings: {
        readOnly: false,
        autoWrapRow: true,
        autoWrapCol: true,
      }
    },
    mutations: {
      updateData(state, hotData) {
        state.hotData = hotData;
      },
      updateSettings(state, updateObj) {
        state.hotSettings[updateObj.prop] = updateObj.value;
      }
    }
  })
};

export default ExampleComponent;
```

--------------------------------

### Column Summary Setup

Source: https://handsontable.com/docs/16.2/javascript-data-grid/column-summary

Example configuration for setting up column summaries with a custom function.

```javascript
columns: [{ data: 'value' }],
nestedRows: true,
rowHeaders: true,
colHeaders: ['sum', 'min', 'max', 'count', 'average'],
columnSummary() {
  const endpoints = [];
  const nestedRowsPlugin = this.hot.getPlugin('nestedRows');
  const getRowIndex = nestedRowsPlugin.dataManager.getRowIndex.bind(nestedRowsPlugin.dataManager);
  const resultColumn = 0;
  let nestedRowsCache = null;

  if (nestedRowsPlugin.isEnabled()) {
    nestedRowsCache = nestedRowsPlugin.dataManager.cache;
  } else {
    return [];
  }

  if (!nestedRowsCache) {
    return [];
  }

  for (let i = 0; i < nestedRowsCache.levels[0].length; i++) {
    if (!nestedRowsCache.levels[0][i].__children || nestedRowsCache.levels[0][i].__children.length === 0) {
      continue;
    }

    const tempEndpoint = {
      destinationColumn: resultColumn,
      destinationRow: getRowIndex(nestedRowsCache.levels[0][i]),
      type: 'sum',
      forceNumeric: true,
      ranges: [],
    };

    tempEndpoint.ranges.push([
      getRowIndex(nestedRowsCache.levels[0][i].__children[0]),
      getRowIndex(nestedRowsCache.levels[0][i].__children[nestedRowsCache.levels[0][i].__children.length - 1]),
    ]);
    endpoints.push(tempEndpoint);
  }

  return endpoints;
},
autoWrapRow: true,
autoWrapCol: true,
height: 'auto'
```

--------------------------------

### Column Summary Setup

Source: https://handsontable.com/docs/16.2/react-data-grid/column-summary

Example of setting up column summaries using a function in a React component.

```javascript
import React from 'react';
import Handsontable from 'handsontable';
import { HotTable } from '@handsontable/react';

const ExampleComponent = () => {
  const data = [
    { id: 1, name: 'John Doe', age: 30 },
    { id: 2, name: 'Jane Smith', age: 25 },
    { id: 3, name: 'Peter Jones', age: 40 },
  ];

  const hotSettings = {
    data: data,
    columns: [
      { data: 'id', type: 'numeric' },
      { data: 'name' },
      { data: 'age', type: 'numeric' },
    ],
    columnSummary: [
      { column: 2, type: 'sum', readOnly: true },
      { column: 2, type: 'average', readOnly: true },
    ],
    height: 'auto',
  };

  return (
    <HotTable
      settings={hotSettings}
      licenseKey="non-commercial-and-evaluation"
      height="auto"
    />
  );
};

export default ExampleComponent;
```

--------------------------------

### React Component Example

Source: https://handsontable.com/docs/16.2/react-data-grid/installation

A basic React component demonstrating the usage of HotTable with sample data and configuration.

```javascript
import { HotTable } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      themeName="ht-theme-main"
      data={[
        ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
        ['2019', 10, 11, 12, 13],
        ['2020', 20, 11, 14, 13],
        ['2021', 30, 15, 12, 13],
      ]}
      rowHeaders={true}
      colHeaders={true}
      height="auto"
      autoWrapRow={true}
      autoWrapCol={true}
      licenseKey="non-commercial-and-evaluation" // for non-commercial use only
    />
  );
};

export default ExampleComponent;
```

--------------------------------

### Vuex Store and Component Setup

Source: https://handsontable.com/docs/16.2/angular-data-grid/vue-vuex-example

This code snippet shows the setup of a Vuex store and a Vue component that integrates Handsontable. It includes data, settings, methods for handling changes and toggling read-only mode, and lifecycle hooks for mounting and updating the table.

```javascript
import Vue from 'vue';
import Vuex from 'vuex';
import { HotTable } from '@handsontable/vue';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

Vue.use(Vuex);

// register Handsontable's modules
registerAllModules();

const ExampleComponent = {
  data() {
    return {
      hotSettings: {
        data: [
          ['A1', 'B1', 'C1', 'D1'],
          ['A2', 'B2', 'C2', 'D2'],
          ['A3', 'B3', 'C3', 'D3'],
          ['A4', 'B4', 'C4', 'D4'],
        ],
        colHeaders: true,
        rowHeaders: true,
        readOnly: true,
        height: 'auto',
        autoWrapRow: true,
        autoWrapCol: true,
        afterChange: () => {
          if (this.hotRef) {
            this.$store.commit('updateData', this.hotRef.getSourceData());
          }
        },
        licenseKey: 'non-commercial-and-evaluation'
      },
      hotRef: null
    };
  },
  mounted() {
    this.hotRef = this.$refs.wrapper.hotInstance;
    this.$store.subscribe(() => this.updateVuexPreview());
    this.$store.commit('updateData', this.hotRef.getSourceData());
  },
  methods: {
    toggleReadOnly(event) {
      this.hotSettings.readOnly = event.target.checked;
      this.$store.commit('updateSettings', { prop: 'readOnly', value: this.hotSettings.readOnly });
    },

```

--------------------------------

### Vue 3 Basic Example

Source: https://handsontable.com/docs/16.2/javascript-data-grid/vue3-basic-example

A basic Handsontable integration example for Vue 3, including component setup and settings.

```javascript
import { defineComponent } from 'vue';
import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css';

const ExampleComponent = defineComponent({
  name: 'example-component',
  setup() {
    const hotSettings = {
      data: [
        ['A1', 'B1', 'C1', 'D1', 'E1', 'F1', 'G1', 'H1', 'I1', 'J1'],
        ['A2', 'B2', 'C2', 'D2', 'E2', 'F2', 'F2', 'H2', 'I2', 'J2'],
        ['A3', 'B3', 'C3', 'D3', 'E3', 'F3', 'G3', 'H3', 'I3', 'J3'],
        ['A4', 'B4', 'C4', 'D4', 'E4', 'F4', 'G4', 'H4', 'I4', 'J4'],
        ['A5', 'B5', 'C5', 'D5', 'E5', 'F5', 'G5', 'H5', 'I5', 'J5'],
        ['A6', 'B6', 'C6', 'D6', 'E6', 'F6', 'G6', 'H6', 'I6', 'J6'],
      ],
      colHeaders: true,
      height: 'auto',
      autoWrapRow: true,
      autoWrapCol: true,
      licenseKey: 'non-commercial-and-evaluation'
    };
    return {
      hotSettings
    };
  },
  components: {
    HotTable,
  }
});

export default ExampleComponent;
```

--------------------------------

### Example Usage

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/context-menu

Demonstrates how to enable the ContextMenu plugin using different configurations.

```javascript
// as a boolean
contextMenu: true
// as a array
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo']
```

--------------------------------

### Vue 3 Application Setup

Source: https://handsontable.com/docs/16.2/angular-data-grid/vue3-custom-context-menu-example

This script sets up the Vue 3 application and mounts the ExampleComponent to the '#example1' element.

```javascript
import { createApp } from 'vue';
import ExampleComponent from './ExampleComponent.js';

createApp(ExampleComponent).mount('#example1');
```

--------------------------------

### ExampleInstallationComponent

Source: https://handsontable.com/docs/16.2/angular-data-grid/installation

A sample Angular component demonstrating how to integrate Handsontable using the @handsontable/angular-wrapper. It includes sample data and grid settings.

```typescript
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example-installation',
  standalone: false,
  template: `
    <div>
      <hot-table [data]="data" [settings]="gridSettings"></hot-table>
    </div>
  `,
})
export class ExampleInstallationComponent {
  readonly data = [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13],
  ];

  readonly gridSettings: GridSettings = {
    rowHeaders: true,
    colHeaders: true,
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true,
  };
}

```

--------------------------------

### DataSchema example

Source: https://handsontable.com/docs/16.2/javascript-data-grid/api/options

Example showing how to use dataSchema to define the structure of new rows, starting with an empty grid.

```javascript
// with `dataSchema`, you can start with an empty grid
data: null,
dataSchema: {id: null, name: {first: null, last: null}, address: null},
colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
columns: [
  {data: 'id'},
  {data: 'name.first'},
  {data: 'name.last'},
  {data: 'address'}
],
startRows: 5,
minSpareRows: 1

```

--------------------------------

### Example

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/options

Examples of how to configure the `contextMenu` option.

```javascript
// enable the `ContextMenu` plugin
// use the default context menu options
contextMenu: true,

// enable the `ContextMenu` plugin
// and modify individual context menu options
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo'],

// enable the `ContextMenu` plugin
// and apply a custom context menu configuration
contextMenu: {
  items: {
    'option1': {
      name: 'Option 1'
    },
    'option2': {
      name: 'Option 2',
      submenu: {
        items: [
          {
            key: 'option2:suboption1',
            name: 'Suboption 1',
            callback: function(key, options) {
              ...
            }
          },
          ...
        ]
      }
    }
  }
},

```

--------------------------------

### Vue 3 Component Setup

Source: https://handsontable.com/docs/16.2/javascript-data-grid/vue3-custom-context-menu-example

Vue 3 component setup including Handsontable registration.

```javascript
import { defineComponent } from 'vue';
import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css';

const ExampleComponent = defineComponent({
  name: 'example-component',
  template: '<hot-table :settings="hotSettings"></hot-table>',
  data() {
    return {
      hotSettings: {
        data: [
          ['A1', 'B1', 'C1'],
          ['A2', 'B2', 'C2'],
          ['A3', 'B3', 'C3'],
        ],
        contextMenu: {
          items: {
            row_above: {
              name: 'Insert row above',
            },
            row_below: {
              name: 'Insert row below',
            },
            separator: {},
            
```

--------------------------------

### Get cell coordinates from an HTML table cell element

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/core

This example shows how to get the CellCoords object for a given HTML table cell element.

```javascript
hot.getCoords(hot.getCell(1, 1));
```

--------------------------------

### getColHeader

Source: https://handsontable.com/docs/16.2/javascript-data-grid/api/core

Gets the values of column headers. Examples show how to get all bottom-most headers, a specific column's bottom-most header, and a specific level header.

```javascript
// get the contents of all bottom-most column headers
hot.getColHeader();

// get the contents of the bottom-most header of a specific column
hot.getColHeader(5);

// get the contents of a specific column header at a specific level
hot.getColHeader(5, -2);

```

--------------------------------

### ContextMenu Options Examples

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/context-menu

Illustrates various ways to configure the contextMenu option, including default options, specific options, and fully custom configurations.

```javascript
// enable the `ContextMenu` plugin
// use the default context menu options
contextMenu: true,

// enable the `ContextMenu` plugin
// and modify individual context menu options
contextMenu: ['row_above', 'row_below', '---------', 'undo', 'redo'],

// enable the `ContextMenu` plugin
// and apply a custom context menu configuration
contextMenu: {
  items: {
    'option1': {
      name: 'Option 1'
    },
    'option2': {
      name: 'Option 2',
      submenu: {
        items: [
          {
            key: 'option2:suboption1',
            name: 'Suboption 1',
            callback: function(key, options) {
              ...
            }
          },
          ...
        ]
      }
    }
  }
}
```

--------------------------------

### How to use the license key

Source: https://handsontable.com/docs/16.2/angular-data-grid/software-license

Example of how to enter a license key in the Handsontable configuration.

```javascript
settings = {
  licenseKey: "00000-00000-00000-00000-00000",
};

```

--------------------------------

### Angular Component and Module Setup

Source: https://handsontable.com/docs/16.2/angular-data-grid/installation

This snippet shows the basic setup for an Angular component and module to use Handsontable, including data and settings configuration.

```typescript
/* file: app.component.ts */
import { Component } from '@angular/core';
import { GridSettings } from '@handsontable/angular-wrapper';

@Component({
  selector: 'example-installation',
  standalone: false,
  template: ` <div>
    <hot-table [data]="data" [settings]="gridSettings"></hot-table>
  </div>`,
})
export class ExampleInstallationComponent {

  readonly data = [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13],
  ];
  readonly gridSettings: GridSettings = {
    rowHeaders: true,
    colHeaders: true,
    height: 'auto',
    autoWrapRow: true,
    autoWrapCol: true
  };
}



/* file: app.module.ts */
import { NgModule, ApplicationConfig } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

```

--------------------------------

### pagination Example

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/options

Example showing how to enable the `Pagination` plugin.

```javascript
// enable the `Pagination` plugin
pagination: true,


```

--------------------------------

### Fenced Code Block Example

Source: https://handsontable.com/docs/16.2/react-data-grid/row-hiding

This is an example of a fenced code block, demonstrating a basic import and component setup for Handsontable in a React environment.

```javascript
import {
  HotTable
} from '@handsontable/react-wrapper';
import {
  registerAllModules
} from 'handsontable/registry';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const ExampleComponent = () => {
  return (
    <HotTable
      themeName="ht-theme-main"
      autoWrapRow={true}

```

--------------------------------

### Change from getFirstNotHiddenIndex() to getNearestNotHiddenIndex()

Source: https://handsontable.com/docs/16.2/angular-data-grid/migration-from-12.4-to-13.0

Example of changing from getFirstNotHiddenIndex() to getNearestNotHiddenIndex().

```javascript
handsontableInstance.getFirstNotHiddenIndex(0, 1, true, 1);
```

```javascript
handsontableInstance.getNearestNotHiddenIndex(0, 1, true);
```

--------------------------------

### startCols Example

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/options

This example shows how to set the initial number of empty columns to 15 when the `data` option is not provided.

```javascript
// start with 15 empty columns
startCols: 15,

```

--------------------------------

### React Wrapper Example

Source: https://handsontable.com/docs/16.2/react-data-grid/focus-scopes

A basic example of integrating Handsontable with React using the react-wrapper. It includes data setup, module registration, and component usage.

```jsx
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
import { registerAllModules } from 'handsontable/registry';
import { useState, useEffect, useRef, useCallback, memo } from 'react';
import 'handsontable/styles/handsontable.css';
import 'handsontable/styles/ht-theme-main.css';

// register Handsontable's modules
registerAllModules();

const data = [
  { model: 'Trail Helmet', price: 1298.14, sellDate: 'Aug 31, 2025', sellTime: '02:12 PM', inStock: true },
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: 'May 10, 2025', sellTime: '10:26 PM', inStock: false },
  { model: 'Cycling Cap', price: 288.1, sellDate: 'Sep 15, 2025', sellTime: '09:37 AM', inStock: true },
  { model: 'HL Mountain Frame', price: 94.49, sellDate: 'Jan 17, 2025', sellTime: '02:19 PM', inStock: false },
  { model: 'Racing Socks', price: 430.38, sellDate: 'May 10, 2025', sellTime: '01:42 PM', inStock: true },
  { model: 'Racing Socks', price: 138.85, sellDate: 'Sep 20, 2025', sellTime: '02:48 PM', inStock: true },
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: 'Sep 5, 2025', sellTime: '09:35 AM', inStock: false },
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: 'Oct 24, 2025', sellTime: '10:58 PM', inStock: false },
  { model: 'Aero Bottle', price: 1571.13, sellDate: 'May 24, 2025', sellTime: '12:24 AM', inStock: true },
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: 'Jul 16, 2025', sellTime: '07:11 PM', inStock: true },
  { model: 'HL Road Tire', price: 886.22, sellDate: 'Sep 9, 2025', sellTime: '12:42 AM', inStock: false },
  { model: 'Speed Gloves', price: 635.13, sellDate: 'Nov 17, 2025', sellTime: '12:45 PM', inStock: true },
  { model: 'Trail Helmet', price: 1440.64, sellDate: 'Jan 3, 2025', sellTime: '08:16 PM', inStock: false },
  { model: 'Aero Bottle', price: 944.63, sellDate: 'Nov 15, 2025', sellTime: '04:14 PM', inStock: false },
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: 'Jun 24, 2025', sellTime: '01:19 PM', inStock: false },
  { model: 'LED Bike Light', price: 1012.5, sellDate: 'May 1, 2025', sellTime: '05:30 PM', inStock: false },
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: 'May 14, 2025', sellTime: '09:05 AM', inStock: true },
  { model: 'Road Tire Tube', price: 1421.27, sellDate: 'Jan 31, 2025', sellTime: '01:33 PM', inStock: true },
  { model: 'Action Camera', price: 1019.05, sellDate: 'Dec 7, 2025', sellTime: '01:26 AM', inStock: false },
  { model: 'Carbon Handlebar', price: 603.96, sellDate: 'Sep 13, 2025', sellTime: '04:10 AM', inStock: false },
  { model: 'Aero Bottle', price: 1334.03, sellDate: 'Jan 24, 2025', sellTime: '03:29 AM', inStock: false },
  { model: 'Road Tire Tube', price: 1841.17, sellDate: 'May 22, 2025', sellTime: '01:45 AM', inStock: false },
  { model: 'Aero Bottle', price: 1622.05, sellDate: 'Jan 13, 2025', sellTime: '08:30 AM', inStock: true },
  { model: 'Comfort Saddle', price: 1456.24, sellDate: 'Jul 20, 2025', sellTime: '03:39 AM', inStock: false },
  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: 'Sep 25, 2025', sellTime: '12:43 AM', inStock: true },
  { model: 'Fitness Watch', price: 1075.31, sellDate: 'Nov 7, 2025', sellTime: '05:47 PM', inStock: true },
  { model: 'Cycling Cap', price: 726.01, sellDate: 'Oct 28, 2025', sellTime: '12:44 PM', inStock: true },
  { model: 'Road Tire Tube', price: 601.99, sellDate: 'Sep 22, 2025', sellTime: '12:26 AM', inStock: true },
  { model: 'Speed Gloves', price: 1758.26, sellDate: 'Oct 4, 2025', sellTime: '04:59 AM', inStock: true },
  { model: 'Speed Gloves', price: 564.35, sellDate: 'Jul 10, 2025', sellTime: '06:21 PM', inStock: true },
  { model: 'Hydration Pack', price: 954.84, sellDate: 'Nov 2, 2025', sellTime: '12:59 AM', inStock: false },
  { model: 'Cycling Cap', price: 1511.5, sellDate: 'Feb 11, 2025', sellTime: '02:38 AM', inStock: false },
];

function App() {
  return (
    <HotTable data={data} colHeaders={true} rowHeaders={true} licenseKey="non-commercial-license" />
  );
}

export default App;

```

--------------------------------

### fixedColumnsStart Example

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/options

Examples demonstrating how to use `fixedColumnsStart` with different `layoutDirection` settings.

```javascript
// when `layoutDirection` is set to `inherit` (default)
// freeze the first 3 columns from the left or from the right
// depending on your HTML document's `dir` attribute
layoutDirection: 'inherit',
fixedColumnsStart: 3,

// when `layoutDirection` is set to `rtl`
// freeze the first 3 columns from the right
// regardless of your HTML document's `dir` attribute
layoutDirection: 'rtl',
fixedColumnsStart: 3,

// when `layoutDirection` is set to `ltr`
// freeze the first 3 columns from the left
// regardless of your HTML document's `dir` attribute
layoutDirection: 'ltr',
fixedColumnsStart: 3,
```

--------------------------------

### Use HotTableComponent with settings

Source: https://handsontable.com/docs/16.2/angular-data-grid/installation

Example of using the HotTableComponent with data and grid settings.

```typescript
import { Component, ViewChild } from "@angular/core";
import {
  GridSettings,
  HotTableComponent,
  HotTableModule,
} from "@handsontable/angular-wrapper";

@Component({
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table themeName="ht-theme-main" [data]="data" [settings]="gridSettings" />
  </div>`,
})
export class HotTableWrapperComponent {
  @ViewChild(HotTableComponent, { static: false })
  readonly hotTable!: HotTableComponent;

  readonly data = [
    ["", "Tesla", "Volvo", "Toyota", "Ford"],
    ["2019", 10, 11, 12, 13],
    ["2020", 20, 11, 14, 13],
    ["2021", 30, 15, 12, 13],
  ];
  readonly gridSettings = <GridSettings>{
    rowHeaders: true,
    colHeaders: true,
    height: "auto",
    autoWrapRow: true,
    autoWrapCol: true,
  };
}
```

--------------------------------

### Getting a reference to a plugin instance

Source: https://handsontable.com/docs/16.2/angular-data-grid/custom-plugins

This Angular component example demonstrates how to get a reference to a custom plugin's instance using the getPlugin method after the Handsontable instance is initialized.

```javascript
import { Component, ViewChild, AfterViewInit } from "@angular/core";
import {
  GridSettings,
  HotTableComponent,
  HotTableModule,
} from "@handsontable/angular-wrapper";

@Component({
  standalone: true,
  imports: [HotTableModule],
  template: ` <div>
    <hot-table themeName="ht-theme-main" [settings]="gridSettings" />
  </div>`,
})
export class ExampleComponent implements AfterViewInit {
  @ViewChild(HotTableComponent, { static: false })
  readonly hotTable!: HotTableComponent;

  readonly gridSettings = <GridSettings>{
    columns: [{}],
  };

  ngAfterViewInit(): void {
    this.hotTable?.hotInstance?.getPlugin(CustomPlugin.PLUGIN_KEY);
  }
}

```

--------------------------------

### width Example

Source: https://handsontable.com/docs/16.2/angular-data-grid/api/options

Examples demonstrating different ways to set the grid's width.

```javascript
// set the grid's width to 500px
width: 500,
```

```javascript
// set the grid's width to 75vw
width: '75vw',
```

```javascript
// set the grid's width to 500px, using a function
width() {
  return 500;
},
```

```typescript
// set the grid's width to 500px
width: 500,
```

```typescript
// set the grid's width to 75vw
width: '75vw',
```

```typescript
// set the grid's width to 500px, using a function
width() {
  return 500;
},
```

--------------------------------

### Use the HotTable component with configuration

Source: https://handsontable.com/docs/16.2/react-data-grid/installation

Example of using the HotTable component with configuration options.

```jsx
<HotTable
  themeName="ht-theme-main-dark-auto"
  // other options
  data={[
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ]}
  rowHeaders={true}
  colHeaders={true}
  height="auto"
  autoWrapRow={true}
  autoWrapCol={true}
  licenseKey="non-commercial-and-evaluation" // for non-commercial use only
/>
```

--------------------------------

### Basic usage

Source: https://handsontable.com/docs/16.2/angular-data-grid/vue-installation

Example of how to use the HotTable component in a Vue 2 application.

```html
<template>
  <hot-table 
    theme="ht-theme-main"
    :data="data"
    :rowHeaders="true"
    :colHeaders="true"
  >
  </hot-table>
</template>

<script>
  import { HotTable } from '@handsontable/vue';
  import { registerAllModules } from 'handsontable/registry';
  import 'handsontable/styles/handsontable.min.css';
  import 'handsontable/styles/ht-theme-main.min.css';

  // register Handsontable's modules
  registerAllModules();

  export default {
    data: function() {
      return {
        data: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 13],
          ["2017", 20, 11, 14, 13],
          ["2018", 30, 15, 12, 13]
        ],
      };
    },
    components: {
      HotTable
    }
  }
</script>
```

--------------------------------

### Vue Initialization Example

Source: https://handsontable.com/docs/16.2/angular-data-grid/vue-hot-reference

This snippet shows how to initialize the Vue application with the `ExampleComponent` and mount it to the `#example1` element.

```javascript
import Vue from "vue";
import "./styles.css";
import ExampleComponent from "./ExampleComponent.js";

new Vue({
  ...ExampleComponent,
  el: '#example1',
});
```

--------------------------------

### startCols Example

Source: https://handsontable.com/docs/16.2/react-data-grid/api/options

This example shows how to set the initial number of empty columns to 15 when the data option is not set.

```javascript
// start with 15 empty columns
startCols: 15,
```
Tokens:
Raw