{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/expressions-and-context/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows a complex example making use of value getters (using expressions) and class rules (again using expressions). The grid shows 'actual vs budget data and yearly total' for widget sales split by city and country."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Location"}]},{"type":"text","value":" column is showing the aggregation groups, grouping by city and country."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Monthly Data"}]},{"type":"text","value":" columns are affected by the context. Depending on the selected period, the data displayed is either actual ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"x_act"}]},{"type":"text","value":") or budgeted ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"x_bud"}]},{"type":"text","value":") data for the month (eg. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"jan_act"}]},{"type":"text","value":" when Jan is green, or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"jan_bud"}]},{"type":"text","value":" when Jan is red). Similarly, the background color is also changed using class rules dependent on the selected period."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"sum(YTD)"}]},{"type":"text","value":" is the total of the 'actual' figures, i.e. adding up all the green. This also changes as the period is changed."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"example","style":"position:relative;"},"children":[{"type":"text","value":"Example"},{"type":"element","tagName":"a","properties":{"href":"#example","ariaLabel":"example permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Notice that the example (including calculating the expression on the fly, the grid only calculates what's needed to be displayed) runs very fast (once the data is loaded) despite having over 6,000 rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This example is best viewed by opening it in a new tab."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Monthly Sales","name":"monthly-sales","type":"typescript","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"setfilter\", \"filterpanel\"], \"extras\": [\"fontawesome\"] }"},"children":[]}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Expressions and Context","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"example","depth":2,"value":"Example"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/expressions-and-context","pageName":"expressions-and-context"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}