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 ordinarysetStyle({ 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 aszoomgrid.onHyperlinkClickfires before anything opens. The Open order links carry anapp://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,mailtoandteladdresses are opened. Thefile:///link β common in Excel files β gets a short message on the cell instead, and ajavascript: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
Related Documentation
Related Demos
Cell Types Dashboard
Progress bars, star ratings, sparkline charts, checkboxes, and hyperlinks β all rendered inside spreadsheet cells.
Data Filter & Sort
Click column header dropdowns to filter and sort rows. Switch between 300, 1K, and 10K rows to test performance.
Cell Styles
Font styles, colors, backgrounds, text alignment, and border options β a showcase of the Cell Style API.