JavaScript Data GridModules
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):
import Handsontable from 'handsontable/base';
Handsontable's CSS stylesheets are not modular. You need to import them separately:
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:
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
Make sure you import the base module:
import Handsontable from 'handsontable/base';
Import the registering function and a cell type module of your choice. For example:
import { registerCellType, NumericCellType, } from 'handsontable/cellTypes';
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:
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,
StretchColumns,
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 |
StretchColumns | StretchColumns |
TouchScroll | TouchScroll |
TrimRows | TrimRows |
UndoRedo | UndoRedo |
Import a plugin module
Make sure you import the base module:
import Handsontable from 'handsontable/base';
Import registering function and a plugin module of your choice. For example:
import { registerPlugin, ContextMenu, } from 'handsontable/plugins';
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
arAR,
csCZ,
deCH,
deDE,
enUS,
esMX,
frFR,
hrHR,
itIT,
jaJP,
koKR,
lvLV,
nbNO,
nlNL,
plPL,
ptBR,
ruRU,
srSP,
zhCN,
zhTW,
} from 'handsontable/i18n';
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 |
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 Handsontable from 'handsontable/base';
Import the registering function and and a translation module of your choice. For example:
import { registerLanguageDictionary, plPL, } from 'handsontable/i18n';
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 SelectCellType TextCellType TimeCellType | Optional |
Cell renderers | baseRenderer autocompleteRenderer checkboxRenderer dateRenderer dropdownRenderer handsontableRenderer htmlRenderer numericRenderer passwordRenderer selectRenderer textRenderer | Optional |
Cell editors | AutocompleteEditor BaseEditor CheckboxEditor DateEditor DropdownEditor HandsontableEditor NumericEditor PasswordEditor SelectEditor TextEditor | Optional |
Cell validators | autocompleteValidator dateValidator dropdownValidator 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 StretchColumns TouchScroll TrimRows UndoRedo | Optional |
Translations | arAR csCZ deCH deDE enUS esMX frFR hrHR itIT jaJP koKR lvLV nbNO nlNL plPL ptBR ruRU srSP 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,
dropdownRenderer,
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,
dropdownValidator,
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,
StretchColumns,
TouchScroll,
TrimRows,
UndoRedo,
} from 'handsontable/plugins';
// translation modules
import {
arAR,
csCZ,
deCH,
deDE,
enUS,
esMX,
frFR,
hrHR,
itIT,
jaJP,
koKR,
lvLV,
nbNO,
nlNL,
plPL,
ptBR,
ruRU,
srSP,
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(hrHR);
registerLanguageDictionary(itIT);
registerLanguageDictionary(jaJP);
registerLanguageDictionary(koKR);
registerLanguageDictionary(lvLV);
registerLanguageDictionary(nbNO);
registerLanguageDictionary(nlNL);
registerLanguageDictionary(plPL);
registerLanguageDictionary(ptBR);
registerLanguageDictionary(ruRU);
registerLanguageDictionary(srSP);
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,
dropdownRenderer,
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,
dropdownValidator,
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,
StretchColumns,
TouchScroll,
TrimRows,
UndoRedo,
} from 'handsontable/plugins';
// translation modules
import {
registerLanguageDictionary, // translations' registering function
arAR,
csCZ,
deCH,
deDE,
enUS,
esMX,
frFR,
hrHR,
itIT,
jaJP,
koKR,
lvLV,
nbNO,
nlNL,
plPL,
ptBR,
ruRU,
srSP,
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(dropdownRenderer);
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(dropdownValidator);
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(StretchColumns);
registerPlugin(TouchScroll);
registerPlugin(TrimRows);
registerPlugin(UndoRedo);
// register individual translations
registerLanguageDictionary(arAR);
registerLanguageDictionary(deCH);
registerLanguageDictionary(deDE);
registerLanguageDictionary(enUS);
registerLanguageDictionary(esMX);
registerLanguageDictionary(frFR);
registerLanguageDictionary(hrHR);
registerLanguageDictionary(itIT);
registerLanguageDictionary(jaJP);
registerLanguageDictionary(koKR);
registerLanguageDictionary(lvLV);
registerLanguageDictionary(nbNO);
registerLanguageDictionary(nlNL);
registerLanguageDictionary(plPL);
registerLanguageDictionary(ptBR);
registerLanguageDictionary(ruRU);
registerLanguageDictionary(srSP);
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 { dropdownRenderer } from 'handsontable/renderers/dropdownRenderer';
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 { dropdownValidator } from 'handsontable/validators/dropdownValidator';
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 { StretchColumns } from 'handsontable/plugins/stretchColumns';
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: