{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example09-summary","result":{"data":{"examplePageJson":{"title":"9. Summary","codeJs":"\n const gridData = [];\n (function() {\n for (let i = 0; i < 120; i += 1) {\n gridData.push({\n c1: 'User' + (i + 1),\n c2: ((i + 5) % 8) * 100 + i,\n c3: ((i + 3) % 7) * 60\n });\n }\n })();\n\n const grid = new tui.Grid({\n el: document.getElementById('grid'),\n data: gridData,\n scrollX: false,\n bodyHeight: 300,\n rowHeaders: ['rowNum'],\n columns: [\n {\n header: 'User ID',\n name: 'c1',\n align: 'center',\n editor: 'text'\n },\n {\n header: 'Score',\n name: 'c2',\n className: 'clickable',\n editor: 'text'\n },\n {\n header: 'Item Count',\n name: 'c3',\n editor: 'text'\n }\n ],\n summary: {\n height: 40,\n position: 'bottom', // or 'top'\n columnContent: {\n c2: {\n template: function(valueMap) {\n return `MAX: ${valueMap.max}<br>MIN: ${valueMap.min}`;\n }\n },\n c3: {\n template: function(valueMap) {\n return `TOTAL: ${valueMap.sum} <br>AVG: ${valueMap.avg.toFixed(2)}`;\n }\n }\n }\n }\n });\n ","codeHtml":"\n <div id=\"grid\"></div>\n "},"file":{"relativePath":"examples/example09-summary.html"}},"pageContext":{"id":"tutorial-example09-summary","filename":"example09-summary"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}