[{"data":1,"prerenderedAt":961},["ShallowReactive",2],{"blog-en-reogrid-web-1-3-release":3},{"id":4,"title":5,"author":6,"body":7,"date":944,"description":945,"extension":946,"meta":947,"navigation":102,"path":948,"seo":949,"stem":952,"tags":953,"thumbnail":959,"__hash__":960},"blog_en/blog/en/reogrid-web-1-3-release.md","ReoGrid Web 1.3 Released — Multi-Sheet Workbooks and Cross-Sheet Formulas",null,{"type":8,"value":9,"toc":936},"minimark",[10,27,32,39,51,54,58,65,224,227,316,338,347,349,353,356,455,462,484,491,493,497,508,611,634,636,640,647,712,734,737,844,854,856,860,871,874,892,895,932],[11,12,13,14,18,19,22,23,26],"p",{},"UNVELL Inc. has released ",[15,16,17],"strong",{},"ReoGrid Web 1.3",", the most structural milestone since the official launch in March: ",[15,20,21],{},"a single grid now becomes a workbook of multiple worksheets",". There are no breaking changes to the public API, and multi-sheet support is available on ",[15,24,25],{},"both the Lite and Pro editions",".",[28,29,31],"h2",{"id":30},"_13-highlights","1.3 highlights",[11,33,34,35,38],{},"Until now, ReoGrid Web was one instance, one sheet. In 1.3, every instance exposes a ",[15,36,37],{},"workbook coordinator"," that holds multiple worksheets. Just like Excel, a sheet tab bar appears at the bottom, and each sheet keeps its own data, selection, freezes, and undo history.",[11,40,41,42,45,46,50],{},"And the feature that makes multiple sheets genuinely useful is here too: ",[15,43,44],{},"formulas can now reference cells on other sheets"," (",[47,48,49],"code",{},"=Sheet1!A1",").",[52,53],"hr",{},[28,55,57],{"id":56},"the-grid-is-now-a-workbook","The grid is now a workbook",[11,59,60,61,64],{},"Every instance exposes a ",[47,62,63],{},"workbook"," coordinator. The first sheet is created automatically, and adding more is a one-liner.",[66,67,72],"pre",{"className":68,"code":69,"language":70,"meta":71,"style":71},"language-ts shiki shiki-themes github-light github-dark","import { createReogrid } from '@reogrid/lite';\n\nconst grid = createReogrid({ workspace: '#app', initialSheetName: 'Sales' });\n\nconst expenses = grid.workbook.addSheet('Expenses').worksheet;\nconst summary  = grid.workbook.addSheet('Summary').worksheet;\n\ngrid.worksheet.cell('A1').setValue('Q1'); // grid.worksheet is always the active sheet\n","ts","",[47,73,74,97,104,136,141,166,188,193],{"__ignoreMap":71},[75,76,79,83,87,90,94],"span",{"class":77,"line":78},"line",1,[75,80,82],{"class":81},"szBVR","import",[75,84,86],{"class":85},"sVt8B"," { createReogrid } ",[75,88,89],{"class":81},"from",[75,91,93],{"class":92},"sZZnC"," '@reogrid/lite'",[75,95,96],{"class":85},";\n",[75,98,100],{"class":77,"line":99},2,[75,101,103],{"emptyLinePlaceholder":102},true,"\n",[75,105,107,110,114,117,121,124,127,130,133],{"class":77,"line":106},3,[75,108,109],{"class":81},"const",[75,111,113],{"class":112},"sj4cs"," grid",[75,115,116],{"class":81}," =",[75,118,120],{"class":119},"sScJk"," createReogrid",[75,122,123],{"class":85},"({ workspace: ",[75,125,126],{"class":92},"'#app'",[75,128,129],{"class":85},", initialSheetName: ",[75,131,132],{"class":92},"'Sales'",[75,134,135],{"class":85}," });\n",[75,137,139],{"class":77,"line":138},4,[75,140,103],{"emptyLinePlaceholder":102},[75,142,144,146,149,151,154,157,160,163],{"class":77,"line":143},5,[75,145,109],{"class":81},[75,147,148],{"class":112}," expenses",[75,150,116],{"class":81},[75,152,153],{"class":85}," grid.workbook.",[75,155,156],{"class":119},"addSheet",[75,158,159],{"class":85},"(",[75,161,162],{"class":92},"'Expenses'",[75,164,165],{"class":85},").worksheet;\n",[75,167,169,171,174,177,179,181,183,186],{"class":77,"line":168},6,[75,170,109],{"class":81},[75,172,173],{"class":112}," summary",[75,175,176],{"class":81},"  =",[75,178,153],{"class":85},[75,180,156],{"class":119},[75,182,159],{"class":85},[75,184,185],{"class":92},"'Summary'",[75,187,165],{"class":85},[75,189,191],{"class":77,"line":190},7,[75,192,103],{"emptyLinePlaceholder":102},[75,194,196,199,202,204,207,209,212,214,217,220],{"class":77,"line":195},8,[75,197,198],{"class":85},"grid.worksheet.",[75,200,201],{"class":119},"cell",[75,203,159],{"class":85},[75,205,206],{"class":92},"'A1'",[75,208,50],{"class":85},[75,210,211],{"class":119},"setValue",[75,213,159],{"class":85},[75,215,216],{"class":92},"'Q1'",[75,218,219],{"class":85},"); ",[75,221,223],{"class":222},"sJ8bj","// grid.worksheet is always the active sheet\n",[11,225,226],{},"The tab bar at the bottom supports add, rename, drag-reorder, show/hide, and tab color. The same operations are available programmatically.",[66,228,230],{"className":68,"code":229,"language":70,"meta":71,"style":71},"const wb = grid.workbook;\nwb.renameSheet(0, 'FY26 Sales');\nwb.moveSheet(2, 0);\nwb.setSheetTabColor(0, '#2563eb');\nwb.setActiveSheet(1);\n",[47,231,232,244,266,284,302],{"__ignoreMap":71},[75,233,234,236,239,241],{"class":77,"line":78},[75,235,109],{"class":81},[75,237,238],{"class":112}," wb",[75,240,116],{"class":81},[75,242,243],{"class":85}," grid.workbook;\n",[75,245,246,249,252,254,257,260,263],{"class":77,"line":99},[75,247,248],{"class":85},"wb.",[75,250,251],{"class":119},"renameSheet",[75,253,159],{"class":85},[75,255,256],{"class":112},"0",[75,258,259],{"class":85},", ",[75,261,262],{"class":92},"'FY26 Sales'",[75,264,265],{"class":85},");\n",[75,267,268,270,273,275,278,280,282],{"class":77,"line":106},[75,269,248],{"class":85},[75,271,272],{"class":119},"moveSheet",[75,274,159],{"class":85},[75,276,277],{"class":112},"2",[75,279,259],{"class":85},[75,281,256],{"class":112},[75,283,265],{"class":85},[75,285,286,288,291,293,295,297,300],{"class":77,"line":138},[75,287,248],{"class":85},[75,289,290],{"class":119},"setSheetTabColor",[75,292,159],{"class":85},[75,294,256],{"class":112},[75,296,259],{"class":85},[75,298,299],{"class":92},"'#2563eb'",[75,301,265],{"class":85},[75,303,304,306,309,311,314],{"class":77,"line":143},[75,305,248],{"class":85},[75,307,308],{"class":119},"setActiveSheet",[75,310,159],{"class":85},[75,312,313],{"class":112},"1",[75,315,265],{"class":85},[11,317,318,319,322,323,326,327,330,331,334,335,26],{},"Each sheet keeps its ",[15,320,321],{},"own undo history",", so ",[47,324,325],{},"Cmd/Ctrl+Z"," never crosses sheets. Because ",[47,328,329],{},"grid.worksheet"," and ",[47,332,333],{},"grid.actionManager"," are now getters that follow the active sheet, ",[15,336,337],{},"your existing single-sheet code keeps working unchanged",[339,340,341],"blockquote",{},[11,342,343,344,26],{},"One visual change for single-sheet embeds: a ~28px sheet tab bar is shown by default. To hide it, pass ",[47,345,346],{},"createReogrid({ showSheetTabs: false })",[52,348],{},[28,350,352],{"id":351},"cross-sheet-formula-references","Cross-sheet formula references",[11,354,355],{},"This is what turns a workbook into more than a pile of grids: a formula on one sheet can read cells on another.",[66,357,359],{"className":68,"code":358,"language":70,"meta":71,"style":71},"summary.cell('B2').value = \"='Tokyo'!E6\";        // a single cell on another sheet\nsummary.cell('B3').value = '=SUM(Osaka!B2:B5)';  // aggregate a cross-sheet range\nsummary.cell('B4').value = '=VLOOKUP(A4, Master!A1:C100, 3)';\nsummary.cell('B5').value = '=シート1!A1';        // non-ASCII names need no quotes\n",[47,360,361,388,412,432],{"__ignoreMap":71},[75,362,363,366,368,370,373,376,379,382,385],{"class":77,"line":78},[75,364,365],{"class":85},"summary.",[75,367,201],{"class":119},[75,369,159],{"class":85},[75,371,372],{"class":92},"'B2'",[75,374,375],{"class":85},").value ",[75,377,378],{"class":81},"=",[75,380,381],{"class":92}," \"='Tokyo'!E6\"",[75,383,384],{"class":85},";        ",[75,386,387],{"class":222},"// a single cell on another sheet\n",[75,389,390,392,394,396,399,401,403,406,409],{"class":77,"line":99},[75,391,365],{"class":85},[75,393,201],{"class":119},[75,395,159],{"class":85},[75,397,398],{"class":92},"'B3'",[75,400,375],{"class":85},[75,402,378],{"class":81},[75,404,405],{"class":92}," '=SUM(Osaka!B2:B5)'",[75,407,408],{"class":85},";  ",[75,410,411],{"class":222},"// aggregate a cross-sheet range\n",[75,413,414,416,418,420,423,425,427,430],{"class":77,"line":106},[75,415,365],{"class":85},[75,417,201],{"class":119},[75,419,159],{"class":85},[75,421,422],{"class":92},"'B4'",[75,424,375],{"class":85},[75,426,378],{"class":81},[75,428,429],{"class":92}," '=VLOOKUP(A4, Master!A1:C100, 3)'",[75,431,96],{"class":85},[75,433,434,436,438,440,443,445,447,450,452],{"class":77,"line":138},[75,435,365],{"class":85},[75,437,201],{"class":119},[75,439,159],{"class":85},[75,441,442],{"class":92},"'B5'",[75,444,375],{"class":85},[75,446,378],{"class":81},[75,448,449],{"class":92}," '=シート1!A1'",[75,451,384],{"class":85},[75,453,454],{"class":222},"// non-ASCII names need no quotes\n",[11,456,457,458,461],{},"References resolve ",[15,459,460],{},"case-insensitively",", and their lifecycle is Excel-compatible.",[463,464,465,469,475,478],"ul",{},[466,467,468],"li",{},"Rename a sheet, and references across all sheets are rewritten.",[466,470,471,472,26],{},"Delete a sheet, and references to it become ",[47,473,474],{},"#REF!",[466,476,477],{},"Insert/delete rows or columns on one sheet, and references from other sheets shift.",[466,479,480,481,26],{},"Cross-sheet circular references are detected and reported as ",[47,482,483],{},"#CYCLE!",[11,485,486,487,490],{},"Because the aggregate functions and the full LOOKUP family work over cross-sheet ranges, you can build a summary sheet entirely from ",[47,488,489],{},"=SUM(Region!...)"," rows and have it update live every time you edit a source sheet.",[52,492],{},[28,494,496],{"id":495},"whole-workbook-io","Whole-workbook I/O",[11,498,499,500,503,504,507],{},"The ",[15,501,502],{},"instance"," I/O methods now operate over ",[15,505,506],{},"all"," sheets at once.",[66,509,511],{"className":68,"code":510,"language":70,"meta":71,"style":71},"// Export the entire workbook to a single .xlsx\ngrid.saveAsXlsx({ filename: 'report.xlsx' });\n\n// Load all sheets from a File / URL / ArrayBuffer\nawait grid.loadFromFile(file);\nawait grid.loadFromUrl('/data/book.xlsx');\n\n// JSON-serialize the entire workbook\nconst doc = grid.toJson();\ngrid.loadJson(doc);\n",[47,512,513,518,534,538,543,557,573,577,582,600],{"__ignoreMap":71},[75,514,515],{"class":77,"line":78},[75,516,517],{"class":222},"// Export the entire workbook to a single .xlsx\n",[75,519,520,523,526,529,532],{"class":77,"line":99},[75,521,522],{"class":85},"grid.",[75,524,525],{"class":119},"saveAsXlsx",[75,527,528],{"class":85},"({ filename: ",[75,530,531],{"class":92},"'report.xlsx'",[75,533,135],{"class":85},[75,535,536],{"class":77,"line":106},[75,537,103],{"emptyLinePlaceholder":102},[75,539,540],{"class":77,"line":138},[75,541,542],{"class":222},"// Load all sheets from a File / URL / ArrayBuffer\n",[75,544,545,548,551,554],{"class":77,"line":143},[75,546,547],{"class":81},"await",[75,549,550],{"class":85}," grid.",[75,552,553],{"class":119},"loadFromFile",[75,555,556],{"class":85},"(file);\n",[75,558,559,561,563,566,568,571],{"class":77,"line":168},[75,560,547],{"class":81},[75,562,550],{"class":85},[75,564,565],{"class":119},"loadFromUrl",[75,567,159],{"class":85},[75,569,570],{"class":92},"'/data/book.xlsx'",[75,572,265],{"class":85},[75,574,575],{"class":77,"line":190},[75,576,103],{"emptyLinePlaceholder":102},[75,578,579],{"class":77,"line":195},[75,580,581],{"class":222},"// JSON-serialize the entire workbook\n",[75,583,585,587,590,592,594,597],{"class":77,"line":584},9,[75,586,109],{"class":81},[75,588,589],{"class":112}," doc",[75,591,116],{"class":81},[75,593,550],{"class":85},[75,595,596],{"class":119},"toJson",[75,598,599],{"class":85},"();\n",[75,601,603,605,608],{"class":77,"line":602},10,[75,604,522],{"class":85},[75,606,607],{"class":119},"loadJson",[75,609,610],{"class":85},"(doc);\n",[11,612,613,614,617,618,621,622,625,626,629,630,633],{},"The workbook's ",[15,615,616],{},"view state round-trips through xlsx",": the active sheet (",[47,619,620],{},"\u003CworkbookView activeTab>","), per-sheet hidden state (",[47,623,624],{},"\u003Csheet state=\"hidden\">","), and tab colors (",[47,627,628],{},"\u003CsheetPr>\u003CtabColor>",") are written on export and restored on load. Multi-sheet xlsx import is also faster, parsing the file ",[15,631,632],{},"once"," and reusing it across all sheets (previously each sheet was re-parsed).",[52,635],{},[28,637,639],{"id":638},"subscribe-once-follow-the-active-sheet","Subscribe once, follow the active sheet",[11,641,642,643,646],{},"Previously, reacting to selection or value changes meant rewiring listeners every time the active sheet changed. In 1.3 we added ",[15,644,645],{},"instance-level events"," that forward the active sheet's events and rewire automatically when you switch sheets.",[66,648,650],{"className":68,"code":649,"language":70,"meta":71,"style":71},"grid.onSelectionChange((range) => updateInspector(range));\ngrid.onCellValueChange(({ row, column, value }) => autosave(row, column, value));\n",[47,651,652,678],{"__ignoreMap":71},[75,653,654,656,659,662,666,669,672,675],{"class":77,"line":78},[75,655,522],{"class":85},[75,657,658],{"class":119},"onSelectionChange",[75,660,661],{"class":85},"((",[75,663,665],{"class":664},"s4XuR","range",[75,667,668],{"class":85},") ",[75,670,671],{"class":81},"=>",[75,673,674],{"class":119}," updateInspector",[75,676,677],{"class":85},"(range));\n",[75,679,680,682,685,688,691,693,696,698,701,704,706,709],{"class":77,"line":99},[75,681,522],{"class":85},[75,683,684],{"class":119},"onCellValueChange",[75,686,687],{"class":85},"(({ ",[75,689,690],{"class":664},"row",[75,692,259],{"class":85},[75,694,695],{"class":664},"column",[75,697,259],{"class":85},[75,699,700],{"class":664},"value",[75,702,703],{"class":85}," }) ",[75,705,671],{"class":81},[75,707,708],{"class":119}," autosave",[75,710,711],{"class":85},"(row, column, value));\n",[11,713,714,715,259,717,259,719,259,722,259,725,259,728,259,731,26],{},"Available on the instance: ",[47,716,658],{},[47,718,684],{},[47,720,721],{},"onBulkCellsChange",[47,723,724],{},"onScrollChange",[47,726,727],{},"onViewportSizeChange",[47,729,730],{},"onStructureChange",[47,732,733],{},"onContextMenu",[11,735,736],{},"The React/Vue wrappers expose the workbook through the instance and add sheet events.",[66,738,742],{"className":739,"code":740,"language":741,"meta":71,"style":71},"language-tsx shiki shiki-themes github-light github-dark","// React\n\u003CReogrid\n  onReady={(grid) => grid.workbook.addSheet('Data')}\n  onActiveSheetChange={(index) => console.log('active', index)}\n  onSheetsChange={() => console.log('sheets changed')}\n/>\n","tsx",[47,743,744,749,757,786,816,839],{"__ignoreMap":71},[75,745,746],{"class":77,"line":78},[75,747,748],{"class":222},"// React\n",[75,750,751,754],{"class":77,"line":99},[75,752,753],{"class":85},"\u003C",[75,755,756],{"class":112},"Reogrid\n",[75,758,759,762,764,767,770,772,774,776,778,780,783],{"class":77,"line":106},[75,760,761],{"class":119},"  onReady",[75,763,378],{"class":81},[75,765,766],{"class":85},"{(",[75,768,769],{"class":664},"grid",[75,771,668],{"class":85},[75,773,671],{"class":81},[75,775,153],{"class":85},[75,777,156],{"class":119},[75,779,159],{"class":85},[75,781,782],{"class":92},"'Data'",[75,784,785],{"class":85},")}\n",[75,787,788,791,793,795,798,800,802,805,808,810,813],{"class":77,"line":138},[75,789,790],{"class":119},"  onActiveSheetChange",[75,792,378],{"class":81},[75,794,766],{"class":85},[75,796,797],{"class":664},"index",[75,799,668],{"class":85},[75,801,671],{"class":81},[75,803,804],{"class":85}," console.",[75,806,807],{"class":119},"log",[75,809,159],{"class":85},[75,811,812],{"class":92},"'active'",[75,814,815],{"class":85},", index)}\n",[75,817,818,821,823,826,828,830,832,834,837],{"class":77,"line":143},[75,819,820],{"class":119},"  onSheetsChange",[75,822,378],{"class":81},[75,824,825],{"class":85},"{() ",[75,827,671],{"class":81},[75,829,804],{"class":85},[75,831,807],{"class":119},[75,833,159],{"class":85},[75,835,836],{"class":92},"'sheets changed'",[75,838,785],{"class":85},[75,840,841],{"class":77,"line":168},[75,842,843],{"class":85},"/>\n",[11,845,846,847,330,850,853],{},"The Vue wrapper emits ",[47,848,849],{},"active-sheet-change",[47,851,852],{},"sheets-change"," in addition to the existing events.",[52,855],{},[28,857,859],{"id":858},"get-started","Get started",[11,861,862,863,870],{},"The fastest way to feel it is the ",[864,865,869],"a",{"href":866,"rel":867},"https://web.reogrid.net/demos/multi-sheet/",[868],"nofollow","multi-sheet workbook demo",": three branch sheets (Tokyo, Osaka, Nagoya) and a Summary sheet built entirely from cross-sheet formulas. Edit any branch figure, return to Summary, and the totals recalculate across sheets.",[11,872,873],{},"Lite needs no license key — install it straight from npm.",[66,875,879],{"className":876,"code":877,"language":878,"meta":71,"style":71},"language-bash shiki shiki-themes github-light github-dark","npm install @reogrid/lite\n","bash",[47,880,881],{"__ignoreMap":71},[75,882,883,886,889],{"class":77,"line":78},[75,884,885],{"class":119},"npm",[75,887,888],{"class":92}," install",[75,890,891],{"class":92}," @reogrid/lite\n",[11,893,894],{},"Pro adds the 109-function formula library, xlsx export, the full set of cell types, and license-domain authentication.",[463,896,897,904,911,918,925],{},[466,898,899],{},[864,900,903],{"href":901,"rel":902},"https://web.reogrid.net",[868],"Product site",[466,905,906],{},[864,907,910],{"href":908,"rel":909},"https://web.reogrid.net/docs/multi-sheet",[868],"Multi-sheet documentation",[466,912,913],{},[864,914,917],{"href":915,"rel":916},"https://web.reogrid.net/demos",[868],"Live demo gallery",[466,919,920],{},[864,921,924],{"href":922,"rel":923},"https://reogrid.net/contact",[868],"Contact us",[466,926,927],{},[864,928,931],{"href":929,"rel":930},"https://www.npmjs.com/package/@reogrid/lite",[868],"npm package (@reogrid/lite)",[933,934,935],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":71,"searchDepth":99,"depth":99,"links":937},[938,939,940,941,942,943],{"id":30,"depth":99,"text":31},{"id":56,"depth":99,"text":57},{"id":351,"depth":99,"text":352},{"id":495,"depth":99,"text":496},{"id":638,"depth":99,"text":639},{"id":858,"depth":99,"text":859},"2026-06-17","ReoGrid Web 1.3 is here. A single grid now becomes a workbook of multiple worksheets — with a standard sheet tab bar, per-sheet undo history, whole-workbook xlsx/JSON I/O, and cross-sheet formula references like =Sheet1!A1. No breaking changes to the public API, and multi-sheet works on both the Lite and Pro editions.","md",{},"/blog/en/reogrid-web-1-3-release",{"title":950,"description":951},"ReoGrid Web 1.3 Released — Multi-Sheet Workbooks for React and Vue","What's new in ReoGrid Web 1.3 — multi-sheet workbooks with a standard tab bar, per-sheet undo history, whole-workbook xlsx/JSON I/O, cross-sheet formula references (=Sheet1!A1), and instance-level events that follow the active sheet. No breaking API changes.","blog/en/reogrid-web-1-3-release",[954,955,956,957,958],"reogrid","reogrid-web","spreadsheet","release","javascript","/images/articles/reogrid-web-1-3.jpg","IhuDiOwo9SxvWt14dlPwVhVM6oLCyFoMlEv_JkxFJCY",1781705376448]