How to Build a Custom Version of Handsontable

Aleksandra Budnik Recipes / January 26, 2017

How to Build a Custom Version of Handsontable

One of the key features of Handsontable is its scalability. As a modular library, Handsontable - when paired with the hot-builder - allows you to create a custom version of Handsontable, tailored to your exact needs, with the hot-builder being a CLI tool which enables you to select which plugins to include in your build.

It should be noted that with a custom build you aren’t fundamentally changing any of the core features of Handsontable, but rather deciding which of them are included in your build, and how your end-users are able to interact with them. The table below shows Handsontable’s core features, along with features accessible via plugins:

Why build a custom package

Each developer's needs are unique, and it would be presumptuous of us to explicitly state why anyone would want or need to build a custom package. However, we know that there are benefits to building a custom package, and these include:

  • The ability to create software packages that are smaller, and therefore easier to deploy and manage.
  • Better control over the available features,
  • Better handling of each version, helping with overall control of the library,
  • It is easier for you to implement and manage your custom-made plugins, separate from the core product.

How do you build a custom package

The Community Edition (MIT-licensed) and the Pro (commercial) versions of Handsontable have different structures, so before you start working on your custom build you first need to know which version you are using, and what steps to follow in order to get started.

Getting started with the community edition

Before starting on your custom build, first download and install the Handsontable hot-builder, following the steps outlined on GitHub. Once you have done that, access your console and run the following command:


    hot-builder build --output-dir my-dist-dir

replacing my-dist-dir with the name of your Handsontable directory. This will bring up the hot-builder UI as shown.

how to build a custom version of handsontable terminal

Keyboard functions are limited, with the space bar used to select and deselect plugins, and the Enter key used to build your custom package. The supported arguments are listed on the hot-builder GitHub page, but by way of example: if you wanted to install all the plugins that come standard with the Community Edition - except the ability to move or freeze columns and rows - you would type the following:


    hot-builder build --output-dir my-dist -a
    --remove-module=manualcolumnmove,manualcolumnfreeze,manualrowmove,manualrowfreeze -D

The -D argument is used to disable/exit the hot-builder UI, and both --add-module and --remove-module are supported; we recommend you use --add if you are only adding a few plugins, and if you are adding a lot of the plugins, then use --remove to ‘exclude’ the plugins you don’t want instead.

Getting started with the PRO version

Unlike with Community Edition, with the Pro version of Handsontable the first step is to ensure you have the Handsontable library downloaded and installed. The process for doing this is described in detail under the Install tab of the Client account.

Another difference is that with the Pro version the command for the hot-builder UI must point to a package.json file in the Handsontable catalog, for example:


    hot-builder build --input package.json --output-dir my-dist-dir

(note that something like 'hot-builder build --input catalog1/catalog2/package.json --output-dir my-dist-dir' is also acceptable)

Thereafter the procedure is similar to that followed with the Community Edition - using the same arguments listed on the hot-build GitHub page - but the number of plugins you have access to in the Pro version is greater than in the Community Edition. However, you must remember to check which plugins and dependencies are needed for each feature; if you want to include filtering in your custom build, you have to include:

  • The Filters plugin,
  • The DropdownMenu plugin, and
  • The ContextMenu plugin

Conclusion

Using the hot-builder to create a custom build is not that difficult, and after using it a few times you will discover that there are many pros to creating a custom build of Handsontable for your project, not least the smaller package you end up with. And the only con, if you really want to call it that, is having to create a new custom build whenever you want to update to using a new library version.