[{"data":1,"prerenderedAt":700},["ShallowReactive",2],{"blog-en-reogrid-web-1-2-1-release":3},{"id":4,"title":5,"author":6,"body":7,"date":684,"description":685,"extension":686,"meta":687,"navigation":422,"path":688,"seo":689,"stem":691,"tags":692,"thumbnail":698,"__hash__":699},"blog_en/blog/en/reogrid-web-1-2-1-release.md","ReoGrid Web 1.2.1 Released — Major Formula and Editing Enhancements",null,{"type":8,"value":9,"toc":672},"minimark",[10,19,24,31,69,72,75,79,82,87,98,280,291,295,317,321,324,361,364,368,385,576,580,591,595,613,615,619,622,640,643,668],[11,12,13,14,18],"p",{},"UNVELL Inc. has released ",[15,16,17],"strong",{},"ReoGrid Web 1.2.1",", the latest version of our Excel-like spreadsheet library for web applications. The 1.2.x series, built up since the official launch in March, has pushed the formula and editing experience to a level that genuinely feels like Excel. There are no breaking changes to the public API.",[20,21,23],"h2",{"id":22},"_121-highlights","1.2.1 highlights",[11,25,26,27,30],{},"1.2.1 extends the ",[15,28,29],{},"drag interaction on the formula reference highlights"," that appear on the grid while editing a formula.",[32,33,34,41,47,55],"ul",{},[35,36,37,40],"li",{},[15,38,39],{},"Drag the dashed border to move a range",": dragging the dashed edge of a reference rectangle translates the entire range.",[35,42,43,46],{},[15,44,45],{},"Drag a corner grip to resize",": dragging one of the four corner grips resizes the range. Resize uses cell-center boundaries — a cell only joins or leaves the range once the pointer passes its midpoint — matching Excel and our .NET edition.",[35,48,49,50,54],{},"When the same reference appears multiple times in the formula text, every occurrence is rewritten in step, preserving each token's absolute-reference (",[51,52,53],"code",{},"$",") flags.",[35,56,57,58,61,62,61,65,68],{},"Small colored corner squares are drawn on each highlight to make the resize hot-zone discoverable, with hover cursors (",[51,59,60],{},"move",", ",[51,63,64],{},"nwse-resize",[51,66,67],{},"nesw-resize",") on the border and corners.",[11,70,71],{},"The result: you can adjust a formula's reference ranges intuitively, entirely with the mouse.",[73,74],"hr",{},[20,76,78],{"id":77},"what-the-12x-series-added","What the 1.2.x series added",[11,80,81],{},"Leading up to 1.2.1, the 1.2.x series shipped these headline features.",[83,84,86],"h3",{"id":85},"formula-library-expanded-to-109-functions","Formula library expanded to 109 functions",[11,88,89,90,93,94,97],{},"ReoGrid Web now supports ",[15,91,92],{},"109 Excel-compatible built-in functions"," spanning lookup/reference, multi-criteria aggregation, dates, math/trig, statistics, text, and reference categories. Formulas inside imported ",[51,95,96],{},".xlsx"," files work out of the box.",[99,100,101,114],"table",{},[102,103,104],"thead",{},[105,106,107,111],"tr",{},[108,109,110],"th",{},"Category",[108,112,113],{},"Examples",[115,116,117,143,162,196,230,258],"tbody",{},[105,118,119,123],{},[120,121,122],"td",{},"Lookup / reference",[120,124,125,61,128,61,131,61,134,61,137,61,140],{},[51,126,127],{},"VLOOKUP",[51,129,130],{},"HLOOKUP",[51,132,133],{},"INDEX",[51,135,136],{},"MATCH",[51,138,139],{},"XLOOKUP",[51,141,142],{},"XMATCH",[105,144,145,148],{},[120,146,147],{},"Multi-criteria aggregation",[120,149,150,61,153,61,156,61,159],{},[51,151,152],{},"SUMIFS",[51,154,155],{},"COUNTIFS",[51,157,158],{},"AVERAGEIFS",[51,160,161],{},"SUMPRODUCT",[105,163,164,167],{},[120,165,166],{},"Date",[120,168,169,61,172,61,175,61,178,61,181,61,184,61,187,61,190,61,193],{},[51,170,171],{},"TODAY",[51,173,174],{},"NOW",[51,176,177],{},"YEAR",[51,179,180],{},"MONTH",[51,182,183],{},"DAY",[51,185,186],{},"WEEKDAY",[51,188,189],{},"EDATE",[51,191,192],{},"EOMONTH",[51,194,195],{},"DATEDIF",[105,197,198,201],{},[120,199,200],{},"Math / trig",[120,202,203,61,206,61,209,61,212,61,215,61,218,61,221,61,224,61,227],{},[51,204,205],{},"EXP",[51,207,208],{},"LN",[51,210,211],{},"LOG",[51,213,214],{},"SIN",[51,216,217],{},"COS",[51,219,220],{},"TAN",[51,222,223],{},"ATAN2",[51,225,226],{},"RAND",[51,228,229],{},"RANDBETWEEN",[105,231,232,235],{},[120,233,234],{},"Statistics",[120,236,237,61,240,61,243,61,246,61,249,61,252,61,255],{},[51,238,239],{},"MEDIAN",[51,241,242],{},"LARGE",[51,244,245],{},"SMALL",[51,247,248],{},"RANK",[51,250,251],{},"CEILING",[51,253,254],{},"FLOOR",[51,256,257],{},"MROUND",[105,259,260,263],{},[120,261,262],{},"Text",[120,264,265,61,268,61,271,61,274,61,277],{},[51,266,267],{},"SEARCH",[51,269,270],{},"EXACT",[51,272,273],{},"PROPER",[51,275,276],{},"CHAR",[51,278,279],{},"CODE",[11,281,282,283,286,287,290],{},"Argument order and the gotchas follow Excel. For example, Excel's ",[51,284,285],{},"ATAN2(x, y)"," reverses the argument order of JavaScript's ",[51,288,289],{},"Math.atan2(y, x)"," — the library follows Excel.",[83,292,294],{"id":293},"excel-like-formula-reference-editing","Excel-like formula reference editing",[11,296,297,298,301,302,61,305,308,309,312,313,316],{},"When you edit a formula starting with ",[51,299,300],{},"=",", every reference you enter (",[51,303,304],{},"A1",[51,306,307],{},"B2:D10",", etc.) is ",[15,310,311],{},"color-coded inline"," from a shared 8-color palette, and the grid draws a matching ",[15,314,315],{},"dashed rectangle"," around each referenced range. Clicking another cell inserts its address at the caret; drag extends it into a range. When a reference overlaps a merged region, the highlight expands to enclose the full merged area.",[83,318,320],{"id":319},"autofill-fill-handle","Autofill (fill handle)",[11,322,323],{},"A small square at the bottom-right of the selection lets you drag to extend values up, down, left, or right.",[32,325,326,332,346,352],{},[35,327,328,331],{},[15,329,330],{},"Single cell",": tile-copies the value.",[35,333,334,337,338,341,342,345],{},[15,335,336],{},"Two or more numeric cells",": extrapolates as an arithmetic progression (",[51,339,340],{},"1, 2"," → ",[51,343,344],{},"3, 4, 5",").",[35,347,348,351],{},[15,349,350],{},"Date-formatted cell",": increments by one day per step.",[35,353,354,357,358,360],{},[15,355,356],{},"Formula cells",": shift relative references like Excel; absolute ",[51,359,53],{}," references are preserved.",[11,362,363],{},"Styles, number formats, and cell types propagate to the new region, with full undo/redo support.",[83,365,367],{"id":366},"idiomatic-react-vue-event-props","Idiomatic React / Vue event props",[11,369,370,371,61,374,61,377,380,381,384],{},"Worksheet events are now exposed as React props and Vue emits. You can wire up ",[51,372,373],{},"onSelectionChange",[51,375,376],{},"onCellValueChange",[51,378,379],{},"onScrollChange",", and more declaratively, with no imperative ",[51,382,383],{},"worksheet.on*()"," calls.",[386,387,392],"pre",{"className":388,"code":389,"language":390,"meta":391,"style":391},"language-tsx shiki shiki-themes github-light github-dark","import { Reogrid } from '@reogrid/pro/react';\n\n\u003CReogrid\n  onReady={({ worksheet }) => worksheet.cell('A1').setValue('Hello')}\n  onSelectionChange={(range) => console.log('selected', range)}\n  onCellValueChange={({ row, column, newValue }) => save(row, column, newValue)}\n  style={{ width: '100%', height: 500 }}\n/>\n","tsx","",[51,393,394,417,424,434,481,514,547,570],{"__ignoreMap":391},[395,396,399,403,407,410,414],"span",{"class":397,"line":398},"line",1,[395,400,402],{"class":401},"szBVR","import",[395,404,406],{"class":405},"sVt8B"," { Reogrid } ",[395,408,409],{"class":401},"from",[395,411,413],{"class":412},"sZZnC"," '@reogrid/pro/react'",[395,415,416],{"class":405},";\n",[395,418,420],{"class":397,"line":419},2,[395,421,423],{"emptyLinePlaceholder":422},true,"\n",[395,425,427,430],{"class":397,"line":426},3,[395,428,429],{"class":405},"\u003C",[395,431,433],{"class":432},"sj4cs","Reogrid\n",[395,435,437,441,443,446,450,453,456,459,462,465,468,470,473,475,478],{"class":397,"line":436},4,[395,438,440],{"class":439},"sScJk","  onReady",[395,442,300],{"class":401},[395,444,445],{"class":405},"{({ ",[395,447,449],{"class":448},"s4XuR","worksheet",[395,451,452],{"class":405}," }) ",[395,454,455],{"class":401},"=>",[395,457,458],{"class":405}," worksheet.",[395,460,461],{"class":439},"cell",[395,463,464],{"class":405},"(",[395,466,467],{"class":412},"'A1'",[395,469,345],{"class":405},[395,471,472],{"class":439},"setValue",[395,474,464],{"class":405},[395,476,477],{"class":412},"'Hello'",[395,479,480],{"class":405},")}\n",[395,482,484,487,489,492,495,498,500,503,506,508,511],{"class":397,"line":483},5,[395,485,486],{"class":439},"  onSelectionChange",[395,488,300],{"class":401},[395,490,491],{"class":405},"{(",[395,493,494],{"class":448},"range",[395,496,497],{"class":405},") ",[395,499,455],{"class":401},[395,501,502],{"class":405}," console.",[395,504,505],{"class":439},"log",[395,507,464],{"class":405},[395,509,510],{"class":412},"'selected'",[395,512,513],{"class":405},", range)}\n",[395,515,517,520,522,524,527,529,532,534,537,539,541,544],{"class":397,"line":516},6,[395,518,519],{"class":439},"  onCellValueChange",[395,521,300],{"class":401},[395,523,445],{"class":405},[395,525,526],{"class":448},"row",[395,528,61],{"class":405},[395,530,531],{"class":448},"column",[395,533,61],{"class":405},[395,535,536],{"class":448},"newValue",[395,538,452],{"class":405},[395,540,455],{"class":401},[395,542,543],{"class":439}," save",[395,545,546],{"class":405},"(row, column, newValue)}\n",[395,548,550,553,555,558,561,564,567],{"class":397,"line":549},7,[395,551,552],{"class":439},"  style",[395,554,300],{"class":401},[395,556,557],{"class":405},"{{ width: ",[395,559,560],{"class":412},"'100%'",[395,562,563],{"class":405},", height: ",[395,565,566],{"class":432},"500",[395,568,569],{"class":405}," }}\n",[395,571,573],{"class":397,"line":572},8,[395,574,575],{"class":405},"/>\n",[83,577,579],{"id":578},"per-side-border-overrides-in-conditional-formatting","Per-side border overrides in conditional formatting",[11,581,582,583,586,587,590],{},"Conditional format rules can now carry a ",[51,584,585],{},"border"," payload that overrides cell borders per side (right / top / bottom / left) on matching cells. These round-trip through xlsx ",[51,588,589],{},"\u003Cdxf>\u003Cborder>",", so formatting survives an Excel load-and-save.",[83,592,594],{"id":593},"faster-rendering-engine-70-fewer-canvas-calls","Faster rendering engine (~70% fewer Canvas calls)",[11,596,597,598,61,601,604,605,608,609,612],{},"The Canvas render path now caches ",[51,599,600],{},"ctx.font",[51,602,603],{},"ctx.fillStyle",", and ",[51,606,607],{},"measureText",", plus wrapped/multi-line text layout, on a per-frame basis — cutting Canvas API calls during scroll by ",[15,610,611],{},"roughly 70%+ per frame"," on text-heavy sheets. Frame rates stay stable even on dense sheets.",[73,614],{},[20,616,618],{"id":617},"getting-started","Getting started",[11,620,621],{},"The Lite edition requires no license key and is available on npm.",[386,623,627],{"className":624,"code":625,"language":626,"meta":391,"style":391},"language-bash shiki shiki-themes github-light github-dark","npm install @reogrid/lite\n","bash",[51,628,629],{"__ignoreMap":391},[395,630,631,634,637],{"class":397,"line":398},[395,632,633],{"class":439},"npm",[395,635,636],{"class":412}," install",[395,638,639],{"class":412}," @reogrid/lite\n",[11,641,642],{},"The Pro edition adds the 109-function formula library, xlsx export, the full set of cell types, and more.",[32,644,645,654,661],{},[35,646,647],{},[648,649,653],"a",{"href":650,"rel":651},"https://web.reogrid.net",[652],"nofollow","Product site",[35,655,656],{},[648,657,660],{"href":658,"rel":659},"https://web.reogrid.net/demos",[652],"Live demo gallery",[35,662,663],{},[648,664,667],{"href":665,"rel":666},"https://www.npmjs.com/package/@reogrid/lite",[652],"npm package (@reogrid/lite)",[669,670,671],"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 .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":391,"searchDepth":419,"depth":419,"links":673},[674,675,683],{"id":22,"depth":419,"text":23},{"id":77,"depth":419,"text":78,"children":676},[677,678,679,680,681,682],{"id":85,"depth":426,"text":86},{"id":293,"depth":426,"text":294},{"id":319,"depth":426,"text":320},{"id":366,"depth":426,"text":367},{"id":578,"depth":426,"text":579},{"id":593,"depth":426,"text":594},{"id":617,"depth":419,"text":618},"2026-05-15","ReoGrid Web 1.2.1 is here. The 1.2.x series brings 109 built-in formula functions, Excel-like color-coded formula reference editing, autofill, drag-to-move and drag-to-resize on reference ranges, idiomatic React/Vue event props, and a faster rendering engine — all with no breaking API changes.","md",{},"/blog/en/reogrid-web-1-2-1-release",{"title":5,"description":690},"ReoGrid Web 1.2.x substantially improves the editing experience — 109 built-in functions, color-coded formula reference editing, drag-to-move/resize references, autofill, React/Vue event props, and ~70% fewer Canvas calls per frame — while preserving API compatibility.","blog/en/reogrid-web-1-2-1-release",[693,694,695,696,697],"reogrid","reogrid-web","spreadsheet","release","javascript","/images/articles/reogrid-web-release.png","56ROzjJ2mFvc4OegE9rqjBfsdIrmDavAyCAW6TqMF1E",1780378955849]