JavaScript Data Grid Modules

Import just the modules that you actually use, to reduce Handsontable's bundle size.

Table of contents

• Overview
  • Use modules
• Base module
  • Import the base module
• Optional modules
  • Cell type modules
  • Plugin modules
  • Translation modules
• List of all modules
• List of all module imports
• Using modules with frameworks
• Related articles
  • Related guides
  • Related blog articles

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:

1. Import the base module.
2. Import optional modules of your choice.
3. 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):

import Handsontable from 'handsontable/base';

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
• Plugin modules
• Translation modules

Cell type modules

Cell type modules contain Handsontable's cell types.

You can import the following cell type modules:

import {
  registerCellType, // cell types' registering function
  AutocompleteCellType,
  CheckboxCellType,
  DateCellType,
  DropdownCellType,
  HandsontableCellType,
  NumericCellType,
  PasswordCellType,
  TextCellType,
  TimeCellType,
} from 'handsontable/cellTypes';

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
TextCellType	text
TimeCellType	time

Import a cell type module

1. Make sure you import the base module:

   import Handsontable from 'handsontable/base';
   

2. Import the registering function and a cell type module of your choice. For example:

   import {
     registerCellType,
     NumericCellType,
   } from 'handsontable/cellTypes';
   

3. Register your cell type module, to let Handsontable recognize it. For example:

   registerCellType(NumericCellType);
   

   A full example:

   import Handsontable from 'handsontable/base';
   import {
     registerCellType,
     NumericCellType,
   } from 'handsontable/cellTypes';
   
   registerCellType(NumericCellType);
   

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:

import Handsontable from 'handsontable/base';
import {
  registerCellType,
  NumericCellType,
} from 'handsontable/cellTypes';

registerCellType(NumericCellType);

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

new Handsontable(container, {
  columns: [
    {
      type: 'numeric'
    }
  ]
});

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

import Handsontable from 'handsontable/base';
import {
  registerRenderer,
  numericRenderer,
} from 'handsontable/renderers';
import {
  registerEditor,
  NumericEditor,
} from 'handsontable/editors';
import {
  registerValidator,
  numericValidator,
} from 'handsontable/validators';

registerRenderer(numericRenderer);
registerEditor(NumericEditor);
registerValidator(numericValidator);

new Handsontable(container, {
  columns: [
    {
      renderer: 'numeric',
      editor: 'numeric',
      validator: 'numeric',
      dataType: 'number',
      type: 'numeric',
    }
  ]
});

Plugin modules

Plugin modules contain Handsontable's plugins.

You can import the following plugin modules:

import {
  registerPlugin, // plugins' registering function
  AutoColumnSize,
  AutoRowSize,
  Autofill,
  BasePlugin,
  BindRowsWithHeaders,
  CollapsibleColumns,
  ColumnSorting,
  ColumnSummary,
  Comments,
  ContextMenu,
  CopyPaste,
  CustomBorders,
  DragToScroll,
  DropdownMenu,
  ExportFile,
  Filters,
  Formulas,
  HiddenColumns,
  HiddenRows,
  ManualColumnFreeze,
  ManualColumnMove,
  ManualColumnResize,
  ManualRowMove,
  ManualRowResize,
  MergeCells,
  MultiColumnSorting,
  MultipleSelectionHandles,
  NestedHeaders,
  NestedRows,
  PersistentState,
  Search,
  TouchScroll,
  TrimRows,
  UndoRedo,
} from 'handsontable/plugins';

Each plugin module contains a different plugin:

Plugin modules

Module	Plugin
AutoColumnSize	AutoColumnSize
Autofill	Autofill
AutoRowSize	AutoRowSize
BasePlugin	BasePlugin
BindRowsWithHeaders	BindRowsWithHeaders
CollapsibleColumns	CollapsibleColumns
ColumnSorting	ColumnSorting
ColumnSummary	ColumnSummary
Comments	Comments
ContextMenu	ContextMenu
CopyPaste	CopyPaste
CustomBorders	CustomBorders
DragToScroll	DragToScroll
DropdownMenu	DropdownMenu
ExportFile	ExportFile
Filters	Filters
Formulas	Formulas
HiddenColumns	HiddenColumns
HiddenRows	HiddenRows
ManualColumnFreeze	ManualColumnFreeze
ManualColumnMove	ManualColumnMove
ManualColumnResize	ManualColumnResize
ManualRowMove	ManualRowMove
ManualRowResize	ManualRowResize
MergeCells	MergeCells
MultiColumnSorting	MultiColumnSorting
MultipleSelectionHandles	MultipleSelectionHandles
NestedHeaders	NestedHeaders
NestedRows	NestedRows
PersistentState	PersistentState
Search	Search
TouchScroll	TouchScroll
TrimRows	TrimRows
UndoRedo	UndoRedo

Import a plugin module

1. Make sure you import the base module:

   import Handsontable from 'handsontable/base';
   

2. Import registering function and a plugin module of your choice. For example:

   import {
     registerPlugin,
     ContextMenu,
   } from 'handsontable/plugins';
   

3. Register your plugin module, to let Handsontable recognize it. For example:

   registerPlugin(ContextMenu);
   

   A full example:

   import Handsontable from 'handsontable/base';
   import {
     registerPlugin,
     ContextMenu,
   } from 'handsontable/plugins';
   
   registerPlugin(ContextMenu);
   

Translation modules

Translation modules contain Handsontable's translations.

You can import the following translation modules:

import {
  registerLanguageDictionary, // translations' registering function
  deCH,
  deDE,
  enUS,
  esMX,
  frFR,
  itIT,
  jaJP,
  koKR,
  lvLV,
  nbNO,
  nlNL,
  plPL,
  ptBR,
  ruRU,
  zhCN,
  zhTW,
} from 'handsontable/i18n';

Each translation module contains a different translation package:

Translation modules

Module	Translation
deCH	German - Switzerland
deDE	German - Germany
enUS	English - United States
esMX	Spanish - Mexico
frFR	French - France
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
zhCN	Chinese - China
zhTW	Chinese - Taiwan

Import a translation module

1. Make sure you import the base module:

   import Handsontable from 'handsontable/base';
   

2. Import the registering function and and a translation module of your choice. For example:

   import {
     registerLanguageDictionary,
     plPL,
   } from 'handsontable/i18n';
   

3. Register your translation module, to let Handsontable recognize it. For example:

   registerLanguageDictionary(plPL);
   

   A full example:

   import Handsontable from 'handsontable/base';
   import {
     registerLanguageDictionary,
     plPL,
   } from 'handsontable/i18n';
   
   registerLanguageDictionary(plPL);
   

List of all modules

The table below lists all of Handsontable's modules:

Type	Modules	Required / optional
Core functionalities	handsontable/base	Required
Cell types	AutocompleteCellType CheckboxCellType DateCellType DropdownCellType HandsontableCellType NumericCellType PasswordCellType TextCellType TimeCellType	Optional
Cell renderers	baseRenderer autocompleteRenderer checkboxRenderer htmlRenderer numericRenderer passwordRenderer textRenderer	Optional
Cell editors	AutocompleteEditor BaseEditor CheckboxEditor DateEditor DropdownEditor HandsontableEditor NumericEditor PasswordEditor SelectEditor TextEditor	Optional
Cell validators	autocompleteValidator dateValidator numericValidator timeValidator	Optional
Plugins	AutoColumnSize Autofill AutoRowSize BasePlugin BindRowsWithHeaders CollapsibleColumns ColumnSorting ColumnSummary Comments ContextMenu CopyPaste CustomBorders DragToScroll DropdownMenu ExportFile Filters Formulas HiddenColumns HiddenRows ManualColumnFreeze ManualColumnMove ManualColumnResize ManualRowMove ManualRowResize MergeCells MultiColumnSorting MultipleSelectionHandles NestedHeaders NestedRows PersistentState Search TouchScroll TrimRows UndoRedo	Optional
Translations	deCH deDE enUS esMX frFR itIT jaJP koKR lvLV nbNO nlNL plPL ptBR ruRU zhCN zhTW	Optional

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

// the base module
import Handsontable from 'handsontable/base';

// cell type modules
import {
  AutocompleteCellType,
  CheckboxCellType,
  DateCellType,
  DropdownCellType,
  HandsontableCellType,
  NumericCellType,
  PasswordCellType,
  TextCellType,
  TimeCellType,
} from 'handsontable/cellTypes';

// renderer modules
import {
  baseRenderer,
  autocompleteRenderer,
  checkboxRenderer,
  htmlRenderer,
  numericRenderer,
  passwordRenderer,
  textRenderer,
} from 'handsontable/renderers';

// editor modules
import {
  AutocompleteEditor,
  BaseEditor,
  CheckboxEditor,
  DateEditor,
  DropdownEditor,
  HandsontableEditor,
  NumericEditor,
  PasswordEditor,
  SelectEditor,
  TextEditor,
} from 'handsontable/editors';

// validator modules
import {
  autocompleteValidator,
  dateValidator,
  numericValidator,
  timeValidator,
} from 'handsontable/validators';

// plugin modules
import {
  AutoColumnSize,
  AutoRowSize,
  Autofill,
  BasePlugin,
  BindRowsWithHeaders,
  CollapsibleColumns,
  ColumnSorting,
  ColumnSummary,
  Comments,
  ContextMenu,
  CopyPaste,
  CustomBorders,
  DragToScroll,
  DropdownMenu,
  ExportFile,
  Filters,
  Formulas,
  HiddenColumns,
  HiddenRows,
  ManualColumnFreeze,
  ManualColumnMove,
  ManualColumnResize,
  ManualRowMove,
  ManualRowResize,
  MergeCells,
  MultiColumnSorting,
  MultipleSelectionHandles,
  NestedHeaders,
  NestedRows,
  PersistentState,
  Search,
  TouchScroll,
  TrimRows,
  UndoRedo,
} from 'handsontable/plugins';

// translation modules
import {
  deCH,
  deDE,
  enUS,
  esMX,
  frFR,
  itIT,
  jaJP,
  koKR,
  lvLV,
  nbNO,
  nlNL,
  plPL,
  ptBR,
  ruRU,
  zhCN,
  zhTW,
} from 'handsontable/i18n';

// registering functions that let you quickly register all modules at once
import {
  registerAllCellTypes,
  registerAllRenderers,
  registerAllEditors,
  registerAllValidators,
  registerAllPlugins,
  registerAllModules,
} from 'handsontable/registry'

// register all cell types at once
registerAllCellTypes();

// register all renderers at once
registerAllRenderers();

// register all editors at once
registerAllEditors();

// register all validators at once
registerAllValidators();

// register all plugins at once
registerAllPlugins();

// register individual translations
registerLanguageDictionary(arAR);
registerLanguageDictionary(deCH);
registerLanguageDictionary(deDE);
registerLanguageDictionary(enUS);
registerLanguageDictionary(esMX);
registerLanguageDictionary(frFR);
registerLanguageDictionary(itIT);
registerLanguageDictionary(jaJP);
registerLanguageDictionary(koKR);
registerLanguageDictionary(lvLV);
registerLanguageDictionary(nbNO);
registerLanguageDictionary(nlNL);
registerLanguageDictionary(plPL);
registerLanguageDictionary(ptBR);
registerLanguageDictionary(ruRU);
registerLanguageDictionary(zhCN);
registerLanguageDictionary(zhTW);

// or, register all of Handsontable's modules at once
registerAllModules();

To register individual modules explicitly, use these registering functions:

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

Import and register all modules explicitly

// the base module
import Handsontable from 'handsontable/base';

// cell type modules
import {
  registerCellType, // cell types' registering function
  AutocompleteCellType,
  CheckboxCellType,
  DateCellType,
  DropdownCellType,
  HandsontableCellType,
  NumericCellType,
  PasswordCellType,
  TextCellType,
  TimeCellType,
} from 'handsontable/cellTypes';

// renderer modules
import {
  registerRenderer, // renderers' registering function
  baseRenderer,
  autocompleteRenderer,
  checkboxRenderer,
  htmlRenderer,
  numericRenderer,
  passwordRenderer,
  textRenderer,
} from 'handsontable/renderers';

// editor modules
import {
  registerEditor, // editors' registering function
  AutocompleteEditor,
  BaseEditor,
  CheckboxEditor,
  DateEditor,
  DropdownEditor,
  HandsontableEditor,
  NumericEditor,
  PasswordEditor,
  SelectEditor,
  TextEditor,
} from 'handsontable/editors';

// validator modules
import {
  registerValidator, // validators' registering function
  autocompleteValidator,
  dateValidator,
  numericValidator,
  timeValidator,
} from 'handsontable/validators';

// plugin modules
import {
  registerPlugin, // plugins' registering function
  AutoColumnSize,
  AutoRowSize,
  Autofill,
  BasePlugin,
  BindRowsWithHeaders,
  CollapsibleColumns,
  ColumnSorting,
  ColumnSummary,
  Comments,
  ContextMenu,
  CopyPaste,
  CustomBorders,
  DragToScroll,
  DropdownMenu,
  ExportFile,
  Filters,
  Formulas,
  HiddenColumns,
  HiddenRows,
  ManualColumnFreeze,
  ManualColumnMove,
  ManualColumnResize,
  ManualRowMove,
  ManualRowResize,
  MergeCells,
  MultiColumnSorting,
  MultipleSelectionHandles,
  NestedHeaders,
  NestedRows,
  PersistentState,
  Search,
  TouchScroll,
  TrimRows,
  UndoRedo,
} from 'handsontable/plugins';

// translation modules
import {
  registerLanguageDictionary, // translations' registering function
  deCH,
  deDE,
  enUS,
  esMX,
  frFR,
  itIT,
  jaJP,
  koKR,
  lvLV,
  nbNO,
  nlNL,
  plPL,
  ptBR,
  ruRU,
  zhCN,
  zhTW,
} from 'handsontable/i18n';

// register individual cell types
registerCellType(AutocompleteCellType);
registerCellType(CheckboxCellType);
registerCellType(DateCellType);
registerCellType(DropdownCellType);
registerCellType(HandsontableCellType);
registerCellType(NumericCellType);
registerCellType(PasswordCellType);
registerCellType(TimeCellType);
registerCellType(TextCellType);

// register individual renderers
registerRenderer(baseRenderer);
registerRenderer(autocompleteRenderer);
registerRenderer(checkboxRenderer);
registerRenderer(htmlRenderer);
registerRenderer(numericRenderer);
registerRenderer(passwordRenderer);
registerRenderer(textRenderer);

// register individual editors
registerEditor(BaseEditor);
registerEditor(AutocompleteEditor);
registerEditor(CheckboxEditor);
registerEditor(DateEditor);
registerEditor(DropdownEditor);
registerEditor(HandsontableEditor);
registerEditor(NumericEditor);
registerEditor(PasswordEditor);
registerEditor(SelectEditor);
registerEditor(TextEditor);

// register individual validators
registerValidator(autocompleteValidator);
registerValidator(dateValidator);
registerValidator(numericValidator);
registerValidator(timeValidator);

// register individual plugins
registerPlugin(AutoColumnSize);
registerPlugin(Autofill);
registerPlugin(AutoRowSize);
registerPlugin(BindRowsWithHeaders);
registerPlugin(CollapsibleColumns);
registerPlugin(ColumnSorting);
registerPlugin(ColumnSummary);
registerPlugin(Comments);
registerPlugin(ContextMenu);
registerPlugin(CopyPaste);
registerPlugin(CustomBorders);
registerPlugin(DragToScroll);
registerPlugin(DropdownMenu);
registerPlugin(ExportFile);
registerPlugin(Filters);
registerPlugin(Formulas);
registerPlugin(HiddenColumns);
registerPlugin(HiddenRows);
registerPlugin(ManualColumnFreeze);
registerPlugin(ManualColumnMove);
registerPlugin(ManualColumnResize);
registerPlugin(ManualRowMove);
registerPlugin(ManualRowResize);
registerPlugin(MergeCells);
registerPlugin(MultiColumnSorting);
registerPlugin(MultipleSelectionHandles);
registerPlugin(NestedHeaders);
registerPlugin(NestedRows);
registerPlugin(PersistentState);
registerPlugin(Search);
registerPlugin(TouchScroll);
registerPlugin(TrimRows);
registerPlugin(UndoRedo);

// register individual translations
registerLanguageDictionary(arAR);
registerLanguageDictionary(deCH);
registerLanguageDictionary(deDE);
registerLanguageDictionary(enUS);
registerLanguageDictionary(esMX);
registerLanguageDictionary(frFR);
registerLanguageDictionary(itIT);
registerLanguageDictionary(jaJP);
registerLanguageDictionary(koKR);
registerLanguageDictionary(lvLV);
registerLanguageDictionary(nbNO);
registerLanguageDictionary(nlNL);
registerLanguageDictionary(plPL);
registerLanguageDictionary(ptBR);
registerLanguageDictionary(ruRU);
registerLanguageDictionary(zhCN);
registerLanguageDictionary(zhTW);

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

import { registerCellType } from 'handsontable/cellTypes/registry';
import { AutocompleteCellType } from 'handsontable/cellTypes/autocompleteType';
import { CheckboxCellType } from 'handsontable/cellTypes/checkboxType';
import { DateCellType } from 'handsontable/cellTypes/dateType';
import { DropdownCellType } from 'handsontable/cellTypes/dropdownType';
import { HandsontableCellType } from 'handsontable/cellTypes/handsontableType';
import { NumericCellType } from 'handsontable/cellTypes/numericType';
import { PasswordCellType } from 'handsontable/cellTypes/passwordType';
import { TextCellType } from 'handsontable/cellTypes/textType';
import { TimeCellType } from 'handsontable/cellTypes/timeType';

import { registerRenderer } from 'handsontable/renderers/registry';
import { autocompleteRenderer } from 'handsontable/renderers/autocompleteRenderer';
import { baseRenderer } from 'handsontable/renderers/baseRenderer';
import { checkboxRenderer } from 'handsontable/renderers/checkboxRenderer';
import { htmlRenderer } from 'handsontable/renderers/htmlRenderer';
import { numericRenderer } from 'handsontable/renderers/numericRenderer';
import { passwordRenderer } from 'handsontable/renderers/passwordRenderer';
import { textRenderer } from 'handsontable/renderers/textRenderer';

import { registerEditor } from 'handsontable/editors/registry';
import { AutocompleteEditor } from 'handsontable/editors/autocompleteEditor';
import { BaseEditor } from 'handsontable/editors/baseEditor';
import { CheckboxEditor } from 'handsontable/editors/checkboxEditor';
import { DateEditor } from 'handsontable/editors/dateEditor';
import { DropdownEditor } from 'handsontable/editors/dropdownEditor';
import { HandsontableEditor } from 'handsontable/editors/handsontableEditor';
import { NumericEditor } from 'handsontable/editors/numericEditor';
import { PasswordEditor } from 'handsontable/editors/passwordEditor';
import { SelectEditor } from 'handsontable/editors/selectEditor';
import { TextEditor } from 'handsontable/editors/textEditor';

import { registerValidator } from 'handsontable/validators/registry';
import { autocompleteValidator } from 'handsontable/validators/autocompleteValidator';
import { dateValidator } from 'handsontable/validators/dateValidator';
import { numericValidator } from 'handsontable/validators/numericValidator';
import { timeValidator } from 'handsontable/validators/timeValidator';

import { registerPlugin } from 'handsontable/plugins/registry';
import { AutoColumnSize } from 'handsontable/plugins/autoColumnSize';
import { Autofill } from 'handsontable/plugins/autofill';
import { AutoRowSize } from 'handsontable/plugins/autoRowSize';
import { BasePlugin } from 'handsontable/plugins/base';
import { BindRowsWithHeaders } from 'handsontable/plugins/bindRowsWithHeaders';
import { CollapsibleColumns } from 'handsontable/plugins/collapsibleColumn';
import { ColumnSorting } from 'handsontable/plugins/columnSorting';
import { Comments } from 'handsontable/plugins/comments';
import { ContextMenu } from 'handsontable/plugins/contextMenu';
import { CopyPaste } from 'handsontable/plugins/copyPaste';
import { CustomBorders } from 'handsontable/plugins/customBorders';
import { DragToScroll } from 'handsontable/plugins/dragToScroll';
import { DropdownMenu } from 'handsontable/plugins/dropdownMenu';
import { ExportFile } from 'handsontable/plugins/exportFile';
import { Filters } from 'handsontable/plugins/filters';
import { HiddenColumns } from 'handsontable/plugins/hiddenColumns';
import { HiddenRows } from 'handsontable/plugins/hiddenRows';
import { ManualColumnFreeze } from 'handsontable/plugins/manualColumnFreeze';
import { ManualColumnMove } from 'handsontable/plugins/manualColumnMove';
import { ManualColumnResize } from 'handsontable/plugins/manualColumnResize';
import { ManualRowMove } from 'handsontable/plugins/manualRowMove';
import { ManualRowResize } from 'handsontable/plugins/manualRowResize';
import { MergeCells } from 'handsontable/plugins/mergeCells';
import { MultipleSelectionHandles } from 'handsontable/plugins/multipleSelectionHandles';
import { NestedHeaders } from 'handsontable/plugins/nestedHeaders';
import { NestedRows } from 'handsontable/plugins/nestedRows';
import { PersistentState } from 'handsontable/plugins/persistentState';
import { Search } from 'handsontable/plugins/search';
import { TouchScroll } from 'handsontable/plugins/touchScroll';
import { TrimRows } from 'handsontable/plugins/trimRows';
import { UndoRedo } from 'handsontable/plugins/undoRedo';

import { registerLanguageDictionary } from 'handsontable/i18n/registry';

Using modules with frameworks

You can also use modules with Handsontable's framework wrappers:

• Using modules with React
• Using modules with Angular
• Using modules with Vue 2
• Using modules with Vue 3

Related articles

Related guides

• Bundle size
• Installation
• Modules in React
• Modules in Angular
• Modules in Vue 2
• Modules in Vue 3

Related blog articles

• Modularizing to improve the developer experience (opens new window)
• Handsontable 11.0.0: modularization for React, Angular, and Vue (opens new window)