fix: Add horizontal scroll to wide tables on narrow screens by Reckbeg · Pull Request #1675 · handsontable/hyperformula

Reckbeg · 2026-05-16T18:28:58Z

Summary

Fixes #1359 — wide tables in docs overflow on narrow screens instead of being scrollable.

Problem

The List of differences with other spreadsheets guide and the Built-in functions guide both use max-width: 1200px via the .widePage CSS class. However, on screens narrower than 1200px, the 5-column tables overflow the container without any scroll mechanism, making content inaccessible.

Solution

Added overflow-x: auto to tables inside .widePage pages, enabling horizontal scrolling when the table exceeds the viewport width.

Changes

docs/guide/list-of-differences.md — Added scrollable table CSS
docs/guide/built-in-functions.md — Added same CSS for consistency

CSS added

.page:has(.widePage) .theme-default-content:not(.custom) table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

This only affects pages using the .widePage layout, so other pages with standard tables are unaffected.

Note

Low Risk
Primarily documentation/navigation updates plus a new idID translation export; low runtime risk aside from potential translation/lockfile packaging regressions.

Overview
Adds new docs content and navigation for AI/agent integrations: introduces HyperFormula AI SDK, Integration with LangChain, and HyperFormula MCP Server, and reorganizes the guide sidebar (renames Framework integration to Integrations and moves overview pages under a new About section).

Improves docs UX by making wide tables horizontally scrollable on .widePage pages, and replaces embedded CodeSandbox iframes in integration/custom-function demos with StackBlitz links.

Extends internationalization support by adding an Indonesian (idID) language pack, exporting it from src/i18n/languages/index.ts, and updating docs to reflect 18 supported languages; package-lock.json also gains additional optional platform-specific esbuild entries.

^{Reviewed by Cursor Bugbot for commit 160c1c8. Bugbot is set up for automated code reviews on this repo. Configure here.}

* Fix package-lock file * Docs: remove CodeSandbox embedded demos and add links to working exa,ples in Stackblitz (handsontable#1621)

> [!NOTE] > **Low Risk** > Low risk documentation-only changes: adds new guide pages and adjusts VuePress sidebar navigation with no runtime or API impact. > > **Overview** > Adds three new AI-focused documentation pages: `ai-sdk`, `integration-with-langchain`, and `mcp-server`, describing how to use HyperFormula for deterministic spreadsheet computation in agent workflows. > > Updates the VuePress guide sidebar to surface these pages under **Integrations**, renames the section from *Framework integration* to *Integrations*, and moves the former *Overview* links into a new *About* section. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 54c541b. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>  Co-authored-by: GreenFlux <support@greenflux.us> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

- Add idID.ts with translations for all ~400 built-in functions - Add idID export to languages/index.ts - Update docs to reflect 18 supported languages - Add Indonesian to language table in localizing-functions.md

- Add overflow-x: auto to tables on pages using widePage layout - Fixes list-of-differences and built-in-functions guides not scaling well on narrower screens - Applies to both pages for consistency Closes handsontable#1359

claude

Claude Code Review

This pull request is from a fork — automated review is disabled. A repository maintainer can comment @claude review to run a one-time review.

netlify · 2026-05-16T18:29:02Z

❌ Deploy Preview for hyperformula-dev-docs failed. Why did it fail? →

Name	Link
🔨 Latest commit	`160c1c8`
🔍 Latest deploy log	https://app.netlify.com/projects/hyperformula-dev-docs/deploys/6a0d23e7bab6e00008d5e057

netlify · 2026-05-16T18:29:03Z

❌ Deploy Preview for hyperformula-docs failed. Why did it fail? →

Name	Link
🔨 Latest commit	`160c1c8`
🔍 Latest deploy log	https://app.netlify.com/projects/hyperformula-docs/deploys/6a0d23e7578ea300089821a8

cursor · 2026-05-16T18:33:31Z

-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts">
-</iframe>
+Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}).


Stackblitz links won't interpolate page variable in URL

Medium Severity

The markdown links use JavaScript template literal syntax ${$page.buildDateURIEncoded} inside a plain markdown URL. VuePress compiles markdown into Vue templates, where only {{ }} works for text interpolation and :attr for dynamic attribute binding. The old iframes correctly used :src with backtick template literals. The new plain [text](url) markdown renders a static href, so ${...} appears literally in the URL instead of the actual build date value. This affects all five pages with Stackblitz links.

Additional Locations (2)

docs/guide/integration-with-angular.md#L8-L9

docs/guide/custom-functions.md#L360-L361

^{Reviewed by Cursor Bugbot for commit 90ffb71. Configure here.}

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 160c1c8. Configure here.}

cursor · 2026-05-20T03:06:20Z

+    NOT: 'TIDAK',
+    NOW: 'SEKARANG',
+    NPER: 'NPER',
+    NPV: 'NVP',


Transposed letters in NPV function translations

Medium Severity

The Indonesian translation for NPV is 'NVP' and for XNPV is 'XNVP' — both swap the last two letters. No other language pack uses NVP as a translation for NPV. This means Indonesian-locale users would need to type the incorrect transposed name to invoke these financial functions, and the standard abbreviation would not work.

Additional Locations (1)

src/i18n/languages/idID.ts#L239-L240

^{Reviewed by Cursor Bugbot for commit 160c1c8. Configure here.}

### Context  Original PR #1675 by https://github.com/Reckbeg  --- > [!NOTE] > **Low Risk** > Documentation and CSS-only VuePress page tweaks with no runtime or library behavior changes. > > **Overview** > Improves **docs usability on small viewports** and clarifies **i18n naming sources** for maintainers. > > On **`built-in-functions`** and **`list-of-differences`**, adds inline CSS so tables on `.widePage` use **horizontal scrolling** (`overflow-x: auto`, block display) instead of breaking the layout on narrow screens. Also fixes a trivial heading whitespace on the differences page. > > **`DEV_DOCS.md`** documents how to pick localized built-in function names when Microsoft Excel does not support a locale: use **Google Sheets** function tables via the `hl` query parameter, and **fall back to English** when Sheets has no entry. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 9d0e126. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>  --------- Co-authored-by: GreenFlux <support@greenflux.us> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Rofi Ibnu Haafizh <Reckbeg@users.noreply.github.com> Co-authored-by: Hermes Bounty Bot <hermes-bot@example.com>

sequba and others added 4 commits February 20, 2026 13:18

Deploying fix to the documentation (handsontable#1622)

6de904b

* Fix package-lock file * Docs: remove CodeSandbox embedded demos and add links to working exa,ples in Stackblitz (handsontable#1621)

feat: add Indonesian (Bahasa Indonesia) language pack

3d65d90

- Add idID.ts with translations for all ~400 built-in functions - Add idID export to languages/index.ts - Update docs to reflect 18 supported languages - Add Indonesian to language table in localizing-functions.md

fix: add horizontal scroll to wide tables in docs

90ffb71

- Add overflow-x: auto to tables on pages using widePage layout - Fixes list-of-differences and built-in-functions guides not scaling well on narrower screens - Applies to both pages for consistency Closes handsontable#1359

claude Bot reviewed May 16, 2026

View reviewed changes

cursor Bot reviewed May 16, 2026

View reviewed changes

AMBudnik added the CLA signed Required for PR label May 18, 2026

fix(i18n): resolve duplicate Indonesian function mappings

160c1c8

cursor Bot reviewed May 20, 2026

View reviewed changes

sequba changed the base branch from develop to feature/responsive-docs May 27, 2026 08:05

sequba merged commit 94f94f2 into handsontable:feature/responsive-docs May 27, 2026
3 of 7 checks passed

sequba mentioned this pull request May 27, 2026

Improve docs UX on narrow screens #1684

Merged

Navigation Menu

fix: Add horizontal scroll to wide tables on narrow screens - #1675

fix: Add horizontal scroll to wide tables on narrow screens#1675
sequba merged 5 commits into
handsontable:feature/responsive-docsfrom
Reckbeg:fix/docs-table-scroll

Reckbeg commented May 16, 2026 •

edited by cursor Bot

Loading

Uh oh!

claude Bot left a comment

Uh oh!

netlify Bot commented May 16, 2026 •

edited

Loading

Uh oh!

netlify Bot commented May 16, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot May 16, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot May 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Reckbeg commented May 16, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Problem

Solution

Changes

CSS added

Uh oh!

claude Bot left a comment

Choose a reason for hiding this comment

Claude Code Review

Uh oh!

netlify Bot commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for hyperformula-dev-docs failed. Why did it fail? →

Uh oh!

netlify Bot commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ Deploy Preview for hyperformula-docs failed. Why did it fail? →

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot May 16, 2026

Choose a reason for hiding this comment

Stackblitz links won't interpolate page variable in URL

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot May 20, 2026

Choose a reason for hiding this comment

Transposed letters in NPV function translations

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Reckbeg commented May 16, 2026 •

edited by cursor Bot

Loading

netlify Bot commented May 16, 2026 •

edited

Loading

netlify Bot commented May 16, 2026 •

edited

Loading