{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example04-custom-renderer","result":{"data":{"examplePageJson":{"title":"4. Custom Renderer","codeJs":"\n class CustomSliderRenderer {\n constructor(props) {\n const el = document.createElement('input');\n const { min, max } = props.columnInfo.renderer.options;\n\n el.type = 'range';\n el.min = String(min);\n el.max = String(max);\n el.disabled = true;\n\n this.el = el;\n this.render(props);\n }\n\n getElement() {\n return this.el;\n }\n\n render(props) {\n this.el.value = String(props.value);\n }\n }\n\n const grid = new tui.Grid({\n el: document.getElementById('grid'),\n scrollX: false,\n scrollY: false,\n columns: [\n {\n header: 'Name',\n name: 'name'\n },\n {\n header: 'Artist',\n name: 'artist'\n },\n {\n header: 'Grade',\n name: 'grade',\n renderer: {\n type: CustomSliderRenderer,\n options: {\n min: 1,\n max: 5\n }\n }\n }\n ]\n });\n\n grid.resetData(gridData);\n ","codeHtml":"\n <div id=\"grid\"></div>\n "},"file":{"relativePath":"examples/example04-custom-renderer.html"}},"pageContext":{"id":"tutorial-example04-custom-renderer","filename":"example04-custom-renderer"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}