Our latest release, Handsontable 16.1, introduces highly requested features, including client-side row pagination, key/value support for dropdown and autocomplete, built-in loading indicators, and announces Long-Term Support (LTS) policy for Handsontable. We’ve also resolved numerous issues in undo/redo, mobile editing, theme rendering, and data alignment for smoother interactions across environments.

Row Pagination: Client-Side Navigation for Large Datasets

Version 16.1 introduces full support for client-side row pagination. This feature allows large datasets to be segmented into smaller, more manageable pages, improving rendering performance and user interaction, especially when working with high-volume tables.

The pagination plugin is reactive, so it automatically adjusts the pagination state when rows are added, removed, filtered, or hidden. You can configure the initial page, page size, visible UI elements (like navigation, counters, and size selectors), and even render the pagination UI in a custom container using the uiContainer option.

Handsontable provides 19 new API methods and 7 hooks, allowing deep integration with your application’s state and logic. Whether you want to control pagination entirely via code or let users navigate using the built-in controls, the plugin is flexible enough to support both use cases.

Here’s a summary of what you get out of the box:

• Flexible page sizes: You can let users pick from preset options like 5, 10, 20, 50, or 100 rows per page, or define your own custom values.
  Navigation controls: Includes Previous/Next buttons, First/Last page controls, and even direct page number input.
• Smart recalculation: Automatically responds to changes in the data, like filtering, sorting, or CRUD operations.
• Themes support: Fully styled and integrated with the Main and Horizon themes (heads up: legacy style isn’t supported).
• Accessibility: WCAG 2.1 AA compliant, with proper ARIA labels and full keyboard navigation support.

Simple configuration example:

const hot = new Handsontable(container, {
  data: data,
  pagination: {
    pageSize: 10,
    pageSizeList: ['auto', 5, 10, 20, 50, 100],
    initialPage: 1,
    showPageSize: true,
    showCounter: true,
    showNavigation: true,
    uiContainer: null,
  },
  licenseKey: 'your-license-key'
});

// Programmatic control
const pagination = hot.getPlugin('pagination');
pagination.setPage(3);
pagination.setPageSize(20);

The pagination bar appears just below your grid, unless the uiContainer option is enabled. It includes three sections by default: a page size selector, a row counter, and navigation controls. Depending on your app’s needs, each can be turned on or off, so you can keep it minimal or give users full control.

Loading Plugin: Keep Users Informed

With this release, we’ve also introduced a new Loading plugin that gives users clear feedback during data operations. Whether you’re fetching rows from an API or processing large datasets in the browser, the grid now displays a customizable loading indicator with a title, icon, and description, so users immediately know what’s happening when no data has been loaded yet.

The configuration example:

const loading = hot.getPlugin('loading');

// Show loading indicator
loading.show();

// Fetch data and hide indicator when complete
fetchData().then(data => {
  hot.loadData(data);
  loading.hide();
});

Key/Value Support for Dropdowns

In previous versions, dropdowns and autocomplete fields required display labels and stored values to be identical. Handsontable 16.1 introduces native key/value pair support, allowing you to separate the displayed label from the internal value.

This functionality is particularly useful when working with relational data or structured objects, as it simplifies mapping between UI elements and backend identifiers. Developers can now store unique keys (such as IDs) while showing user-friendly labels, and safely handle duplicate names in a dataset.

Now you can:

• Display user-friendly labels while storing database IDs
• Handle duplicate display names with unique identifiers
• Implement proper foreign key relationships
• Search and filter by label text while maintaining value storage

Themes Update: Legacy Style Deprecation

As part of our ongoing modernization effort, Handsontable 16.1 begins the deprecation of the legacy style, which will be fully removed in version 17.0. The legacy style, originally introduced for earlier versions of Handsontable, lacks support for CSS variables and other modern styling capabilities, making it difficult to extend or maintain over time.

To ensure a smooth transition, we’ve introduced a new classic theme. It preserves the visual appearance of the legacy style, while being fully compatible with CSS variables. This new theme is easier to customize and better aligned with the long-term direction of our styling system.

To help with the transition to the classic theme, we’ve published a migration guide outlining the necessary steps.

Long-Term Support (LTS) Policy

Starting with version 16.x, we’re also introducing a formal Long-Term Support (LTS) policy—an industry-first for our product category, and a major step forward for product stability and long-term planning. While deprecated features, including the legacy style, will be removed in version 17.0 and beyond, they will remain fully supported and maintained in the 16.x LTS branch for 30 months from the release of 16.0.0. Please note that release timelines may be adjusted as needed to best serve our users’ needs.

The following deprecated items are scheduled for removal in version 17.0:

Release Notes

Added

• Introduced row pagination functionality. #11612
• Introduced a Dialog plugin. #11754
• Added support for object-based (key/value) source in Autocomplete and Dropdown editors, along with new valueGetter and valueSetter options. #11773
• Added a new initialState configuration option. #11777
• Introduced the Loading plugin. #11792
• Added a new “classic” theme. #11790

Changed

• Enabled focus navigation between multiple selection layers. #11756
• Renamed the input element used as the internal focus catcher. #11770
• Added a background color to the wtHolder element. #11797
• Updated the CSS variables for the Pagination styles. #11820

Fixed

• Fixed undo/redo functionality for cell types other than text. #11656
• Fixed incorrect resizing behavior when auto-sizing rows or columns by double-clicking separators. #11671
• Fixed mouse wheel zooming issues on Windows. #11680
• Fixed autocomplete sorting and option highlighting issues. #11708
• Fixed a missing touchend handler that prevented editors from opening on mobile devices. #11729
• Fixed misalignment between rows and row headers when using autoRowSize. #11736
• Fixed layout inconsistencies caused by browser zoom and scaling. #11739
• Fixed an issue with the root-wrapper height calculation. #11769
• Fixed a TypeError being thrown after undoing operations on nested row structures. #11793
• Fixed rowHeights handling for merged cells. #11795
• Fixed visual issues across themes. #11805
• Fixed table misalignment after loading new data. #11809
• Angular: Fixed the tree-shaking mechanism for the Angular wrapper (@handsontable/angular-wrapper). #11738
• Fixed an issue with the deprecation warning being shown too often. #11819
• Fixed an issue with the classic (legacy) theme deprecation warning being displayed for non-root instances. #11821
• Fixed an issue with the table not rendering correctly when scrolling into extremely tall rows. #11825

Security

• Resolved critical vulnerabilities reported by pnpm audit. #11798

Deprecated

• Deprecated the legacy style (to be removed in version 17.0.0). #11790
• Deprecated the PersistentState plugin (to be removed in version 17.0.0). #11835
• Deprecated the @handsontable/vue wrapper. #11839

If you have any questions regarding this update, use one of the following support channels:

• Read the changelog in our documentation
• Start a discussion on the Developer’s Forum
• Ask a question on Stack Overflow
• Report an issue on GitHub discussions

If your commercial support plan is active, our dedicated tech support team is ready to help – just email support@handsontable.com or use this contact form for assistance.