Modules

Reduce the size of your JavaScript bundle, by importing only the modules that you need. The base module is mandatory, all other modules are optional.

Overview

Handsontable is a comprehensive tool with a broad range of features. If you don't use all of them, you can pick just the parts that you need, and get rid of the rest (e.g., unnecessary translations). This approach reduces Handsontable's impact on the overall size of your app.

To make this possible, Handsontable is divided into modules.

Use modules

To get the most out of using Handsontable's modules:

Import the base module.
Import optional modules of your choice.
Remove redundant code (so-called tree shaking).

Bundler support

To use Handsontable's modules, your environment needs to support the import syntax, which is typically provided by a bundler.

We successfully tested Handsontable with the following bundlers:

webpack
Parcel
Rollup
Vite

If Handsontable's modules don't work with your bundler, report it as a bug (opens new window).

Base module

No matter which of the optional modules you use, you always need to import the base module (handsontable/base), which covers:

Handsontable's core functionalities
The default cell type: text

Import the base module

To get the base JavaScript module, import Handsontable from handsontable/base (not from handsontable, which would give you the full distribution package):

Handsontable's CSS stylesheets are not modular. You need to import them separately:

Import Handsontable's CSS

Now, you're ready to use any optional modules of your choice.

Optional modules

Handsontable's optional modules are grouped into:

Cell type modules

Cell type modules contain Handsontable's cell types.

You can import the following cell type modules:

Each cell type module contains a different cell type:

Cell type modules

Module	Cell type alias
`AutocompleteCellType`	`autocomplete`
`CheckboxCellType`	`checkbox`
`DateCellType`	`date`
`DropdownCellType`	`dropdown`
`HandsontableCellType`	`handsontable`
`NumericCellType`	`numeric`
`PasswordCellType`	`password`
`SelectCellType`	`select`
`TextCellType`	`text`
`TimeCellType`	`time`

Import a cell type module

Make sure you import the base module:
Import the registering function and a cell type module of your choice. For example:
Register your cell type module, to let Handsontable recognize it. For example:

A full example:

Renderer, editor, and validator modules

Each cell type module is made of:

A renderer module
An editor module
A validator module (optionally)

TIP

To find out which renderer, editor, and validator a given cell type is made of, see the API reference of the type configuration option.

You can import renderer, editor, and validator modules individually. For the full list of those modules, see the List of all modules section.

For example, you can import the numeric cell type as a whole:

Or, you can import the numeric cell type's renderer, editor, and validator individually (the effect is the same as above):

Plugin modules

Plugin modules contain Handsontable's plugins.

You can import the following plugin modules:

Each plugin module contains a different plugin:

Plugin modules

Import a plugin module

Make sure you import the base module:
Import registering function and a plugin module of your choice. For example:
Register your plugin module, to let Handsontable recognize it. For example:

A full example:

Translation modules

Translation modules contain Handsontable's translations.

You can import the following translation modules:

Each translation module contains a different translation package:

Translation modules

Module	Translation
`arAR`	Arabic - Global
`csCZ`	Czech - Czech Republic
`deCH`	German - Switzerland
`deDE`	German - Germany
`enUS`	English - United States
`esMX`	Spanish - Mexico
`faIR`	Persian - Iran
`frFR`	French - France
`hrHR`	Croatian - Croatia
`itIT`	Italian - Italy
`jaJP`	Japanese - Japan
`koKR`	Korean - Korea
`lvLV`	Latvian - Latvia
`nbNO`	Norwegian (Bokmål) - Norway
`nlNL`	Dutch - Netherlands
`plPL`	Polish - Poland
`ptBR`	Portuguese - Brazil
`ruRU`	Russian - Russia
`srSP`	Serbian - Serbia
`zhCN`	Chinese - China
`zhTW`	Chinese - Taiwan

Import a translation module

Make sure you import the base module:
Import the registering function and and a translation module of your choice. For example:
Register your translation module, to let Handsontable recognize it. For example:

A full example:

List of all modules

The table below lists all of Handsontable's modules:

List of all module imports

To quickly register all modules in bulk, use these registering functions:

registerAllCellTypes()
registerAllRenderers()
registerAllEditors()
registerAllValidators()
registerAllPlugins()
registerAllModules()

Import and register all modules in bulk

To register individual modules explicitly, use these registering functions:

registerCellType()
registerRenderer()
registerEditor()
registerValidator()
registerPlugin()
registerLanguageDictionary()

Import and register all modules explicitly

TIP

Parcel, webpack 3 (and older), and a few other bundlers require you to import modules one by one, from their respective files of origin. See the full list of such imports:

All imports