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:

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.

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';

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

Tip

The base module doesn't resize columns to fit their content. If your columns look too narrow or your content gets clipped, import the AutoColumnSize plugin module (and, for rows, AutoRowSize). This differs from StretchColumns, which stretches columns to fill the available container width instead of fitting them to content.

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,
  SelectCellType,
  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
SelectCellType	select
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.

Some plugin modules affect how content displays by default. For example, without the AutoColumnSize plugin module, columns don’t resize to fit their content — to fill the available container width instead, use StretchColumns.

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,