Overview  概述

To start using Handsontable, follow these steps:
要开始使用 Handsontable，请按照下列步骤操作：

1 Install Handsontable
1 安装 Handsontable

Get Handsontable's files in your preferred way.
以您喜欢的方式获取 Handsontable 的文件。

Using a package manager
使用包管理器

To install Handsontable locally using a package manager, run one of these commands:
要使用包管理器在本地安装 Handsontable，请运行以下命令之一：

npm install handsontable

yarn add handsontable

PM> Install-Package Handsontable

Using a CDN  使用 CDN

To get Handsontable's files from a CDN, use the following locations:
要从 CDN 获取 Handsontable 的文件，请使用以下位置：

• https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js (opens new window)
• https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css (opens new window)

2 Import Handsontable's JavaScript

Import Handsontable's JavaScript into your application.

Using CommonJS or a package manager

If you're using Handsontable as a CommonJS package, or as an ECMAScript module (using a package manager), import the full distribution of Handsontable as a JavaScript file.

Use your bundler's preferred method of importing files. For example:

import Handsontable from 'handsontable';

Using the script tag

If you're using Handsontable as a traditional UMD package, import the full distribution of Handsontable as a minified JavaScript file.

Use the script tag. For example, if you're loading Handsontable's JavaScript from a CDN:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>

3 Import Handsontable's CSS

Import Handsontable's CSS into your application.

Using import

If your bundler allows it, you can import Handsontable's full distribution CSS file, using an import statement.

import 'handsontable/dist/handsontable.full.min.css';

Using the link tag

You can also import Handsontable's CSS using a link tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />

4 Create a container

In your HTML, add an empty div, which serves as a container for your Handsontable instance.

<div id="example"></div>

5 Initialize your grid

Now turn your container into a data grid with sample data.

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

const hot = new Handsontable(container, {
  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
});

Preview the result

import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.min.css';

const container = document.querySelector('#example');
const hot = new Handsontable(container, {
  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
});