Handsontable 14.1.0 improves the support for SSR, enabling our React data grid to become an integral part of your stack. If you’re building your application with Next.js, Nuxt, Remix, or any other production-grade framework, this release is for you.

Also, we introduce a new feature that lets you suspend the virtual rendering of columns – renderAllcolumns. Last but not least, this release resolves issues related to cell selection and issues reported by the community.

For a detailed overview of all the changes in this release, see the release notes page in Handsontable’s documentation.

Better SSR experience

Starting with 14.1.0, you can easily import and use Handsontable as a client library with most SSR frameworks, be it Next.js, Remix, Nuxt, Astro, or Gatsby.

If you’re using Next.js, you no longer need to rely on dynamic imports: static imports are now the recommended approach. Here’s an example of how to use static imports in Next.js:

TypeScript improvements

While Handsontable is a framework-agnostic library written in plain JavaScript, we’re very excited about TypeScript being the industry standard. That’s why, although we keep the TypeScript definitions separately from the source code, we always pay special attention to maintaining them.

This release brings a variety of improvements in this regard, improving the typings both in Handsontable’s plugins (like CustomBorders or UndoRedo) and core modules.

New feature: renderAllColumns

To smoothly present thousands of records without freezing the browser, Handsontable uses DOM virtualization. This means that by default, it draws only the visible part of the grid, with just a small, configurable number of items physically rendered in the DOM. The larger the data set, the more of a performance difference this approach makes.

But what if you want to turn that feature off, because, for example, your data set is not that huge, and you want to prioritize screen readers’ experience instead? It’s easy: just enable two of Handsontable’s configuration options: renderAllRows, and a 14.1.0 addition, renderAllColumns:

<HotTable
 	// disable column virtualization
	renderAllColumns={true}
	// disable row virtualization
	renderAllRows={true}
/>  

Be careful with that configuration, though, especially in the case of large data sets. To find out if this approach is right for you, look up Handsontable’s documentation:

• Row virtualization
• Column virtualization
• Disabling DOM virtualization for improved accessibility

Cell selection after pasting data

On top of the above changes, this version improves how cell selection reacts to pasting data. Before, when pasted data was taller than the viewport, Handsontable scrolled the view to the edge of the pasted area. Now, regardless of the number of the pasted cells, the view always stays in place. This approach mirrors the functionality of Excel and Google Sheets, providing your users with a more familiar experience.

How to upgrade

Install Handsontable 14.1.0 from npm, yarn, or NuGet:

• JavaScript
• React
• Angular
• Vue 3

Or import it from a CDN:

• jsDelivr
• unpkg

You can also fork or clone the Handsontable repository from GitHub.

Need help with upgrading? Reach out to the Handsontable community:

• Start a discussion on Handsontable’s forum
• Ask a question on Stack Overflow
• Report an issue on GitHub

If you use a commercial license with an active support plan, feel free to contact our technical support at support@handsontable.com or use the contact form. We’re looking forward to hearing from you!