ReoGrid ReoGrid Web
PRO hyperlinks HYPERLINK formula v1.7

Hyperlinks

Click a linked cell to open it in a new tab, or click and hold to select it. Shows links authored with setHyperlink() and =HYPERLINK(), the address on hover, and onHyperlinkClick handling in-app addresses itself with event.cancel.

How it works

v1.7.0 makes links work the way they do in Excel. A link is a property of a cell, not a cell type: the cell keeps its own value and formatting, and the link only decides what a click does. Writing links from code is Pro; links loaded from an xlsx or JSON file show and open in both editions.

  • Hover a linked cell: the pointer turns into a hand and a tip shows the address β€” below the screen tip when the link has one β€” so you see where it goes before you click
  • Click opens it in a new tab with noopener,noreferrer. Click and hold (0.6s) selects the cell instead, as in Excel, and a drag selects a range
  • The first four links come from ws.setHyperlink(row, col, url, { tooltip }). ReoGrid does not restyle them: the blue underline is an ordinary setStyle({ color, underline: true }), just as Excel's Hyperlink style is ordinary formatting
  • =HYPERLINK(address, label) shows its label. The address is evaluated on hover and click, so the second formula builds it from C8 β€” type another demo id there, such as zoom
  • grid.onHyperlinkClick fires before anything opens. The Open order links carry an app:// address the page handles itself: event.cancel = true, then the order is selected in the table below. Tick Intercept every link to cancel them all
  • Only http, https, mailto and tel addresses are opened. The file:/// link β€” common in Excel files β€” gets a short message on the cell instead, and a javascript: address is never run
  • Links follow row/column insert and delete, sort and drag-to-move, and round-trip through xlsx (<hyperlinks>) and ReoGrid JSON

Key APIs used

ws.setHyperlink(r, c, url, { tooltip })

Link a cell to a web or mail address (Pro). The cell keeps its value and style

=HYPERLINK(address, label)

Shows the label and opens the address on click; the address can be built from other cells

grid.onHyperlinkClick(e => …)

Fires before anything opens; set e.cancel = true to route or confirm the address yourself

ws.getHyperlinkTarget(r, c)

What a click on the cell would follow: its stored link, else a =HYPERLINK() formula

ws.getHyperlinks()

Every stored link on the sheet β€” live in Lite too, for links loaded from xlsx or JSON

ws.cell(r, c).setStyle({ color, underline: true })

Links set from code are not restyled β€” give them the familiar blue underline yourself

Source Code

TypeScript

Related Documentation

Related Demos

Stay Updated

Be first to know β€” get updates as they ship

Get notified of new releases, features, and announcements.
No spam β€” just updates that matter.