{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example22-setting-width-height","result":{"data":{"examplePageJson":{"title":"22. Setting Width, Height","codeJs":"\n const columnData = [\n {\n header: 'Name',\n name: 'name'\n },\n {\n header: 'Artist',\n name: 'artist'\n },\n {\n header: 'Type',\n name: 'type'\n },\n {\n header: 'Release',\n name: 'release'\n },\n {\n header: 'Genre',\n name: 'genre'\n }\n ];\n\n function createGrid(width, height) {\n return new tui.Grid({\n el: document.getElementById('grid'),\n data: gridData,\n columns: createColumns(width),\n ...createRowHeight(height)\n });\n }\n\n function createColumns(width) {\n const columns = [];\n\n columnData.forEach(({ header, name }) => {\n const column = {\n header,\n name,\n width\n };\n // If the width is less than 50, minWidth should be set.\n if (width < 50) {\n column.minWidth = width;\n }\n columns.push(column);\n });\n\n console.log('columns option', columns);\n return columns;\n }\n\n function createRowHeight(height) {\n const option = { rowHeight: height };\n\n // If the height is less than 40, minRowHeight should be set.\n if (height < 40) {\n option.minRowHeight = height;\n }\n\n console.log('rowHeight option', option);\n return option;\n }\n\n let width = 150;\n let height = 70;\n let grid = createGrid(width, height);\n\n document.getElementById('width').addEventListener('change', ev => {\n width = Number(ev.target.value);\n\n if (grid) {\n grid.destroy();\n document.getElementById('grid').style.width = `${width * 5 + 18}px`;\n }\n\n grid = createGrid(width, height);\n });\n\n document.getElementById('height').addEventListener('change', ev => {\n height = Number(ev.target.value);\n\n if (grid) {\n grid.destroy();\n document.getElementById('grid').style.height = `${height * 20 + 17}px`;\n }\n\n grid = createGrid(width, height);\n });\n ","codeHtml":"\n <div id=\"grid\" style=\"width: 768px\"></div>\n "},"file":{"relativePath":"examples/example22-setting-width-height.html"}},"pageContext":{"id":"tutorial-example22-setting-width-height","filename":"example22-setting-width-height"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}