{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example07-themes","result":{"data":{"examplePageJson":{"title":"7. Themes","codeJs":"\n const gridData = [\n {\n c1: '100013',\n c2: 'Mustafa Cosme',\n c3: 291232\n },\n {\n c1: '201212',\n c2: 'Gunnar Fausto',\n c3: 32123\n },\n {\n c1: '241221',\n c2: 'Junior Morgan',\n c3: 88823\n },\n {\n c1: '991232',\n c2: 'Tódor Ingo',\n c3: 9981\n },\n {\n c1: '299921',\n c2: 'Zezé Obadiah',\n c3: 140212\n },\n {\n c1: '772193',\n c2: 'Alfwin Damir',\n c3: 30012\n },\n {\n c1: '991232',\n c2: 'Feroz Fredrik',\n c3: 111023\n },\n {\n c1: '572812',\n c2: 'Archer Beniamino',\n c3: 229123\n },\n {\n c1: '310832',\n c2: 'Dado Shaul',\n c3: 123\n },\n {\n c1: '321232',\n c2: 'Svetoslav Eder',\n c3: 81252\n },\n {\n c1: '229123',\n c2: 'Lauri Gligor',\n c3: 230923\n },\n {\n c1: '589282',\n c2: 'Ruben Bèr',\n c3: 11523\n },\n {\n c1: '321234',\n c2: 'Vicenç Hadrien',\n c3: 29912\n },\n {\n c1: '632123',\n c2: 'Borna Rochus',\n c3: 62842\n },\n\n {\n c1: '122123',\n c2: 'Kristijonas Tate',\n c3: 199823\n },\n {\n c1: '211232',\n c2: 'Kumara Archimedes',\n c3: 112522\n },\n {\n c1: '487297',\n c2: 'Hershel Radomil',\n c3: 399123\n },\n {\n c1: '232123',\n c2: 'Toma Levan',\n c3: 231253\n },\n {\n c1: '828723',\n c2: 'Njord Thoko',\n c3: 89123\n }\n ];\n\n const grid = new tui.Grid({\n el: document.getElementById('grid'),\n scrollX: false,\n scrollY: false,\n rowHeight: 35,\n rowHeaders: ['rowNum'],\n header: {\n height: 40\n },\n columns: [\n {\n header: 'ID',\n name: 'c1'\n },\n {\n header: 'Name',\n defaultValue: 2,\n name: 'c2'\n },\n {\n header: 'Score',\n name: 'c3'\n }\n ],\n data: gridData\n });\n\n Array.prototype.forEach.call(document.querySelectorAll('.btn-theme'), el => {\n el.addEventListener('click', ev => {\n const preset = ev.target.getAttribute('data-preset');\n tui.Grid.applyTheme(preset);\n });\n });\n\n document.querySelector('.btn-custom').addEventListener('click', () => {\n const options = eval(`(${document.getElementById('custom-text').value})`);\n tui.Grid.applyTheme('default', options);\n });\n ","codeHtml":"\n <div id=\"grid\"></div>\n <div id=\"theme\">\n <div class=\"preset\">\n <h4>Preset</h4>\n <button class=\"btn-theme\" data-preset=\"default\">default</button>\n <button class=\"btn-theme\" data-preset=\"striped\">striped</button>\n <button class=\"btn-theme\" data-preset=\"clean\">clean</button>\n </div>\n <div class=\"custom\">\n <h4>Custom options</h4>\n <p>\n <textarea id=\"custom-text\">{\n selection: {\n background: '#4daaf9',\n border: '#004082'\n },\n scrollbar: {\n background: '#f5f5f5',\n thumb: '#d9d9d9',\n active: '#c1c1c1'\n },\n row: {\n even: {\n background: '#f3ffe3'\n },\n hover: {\n background: '#ccc'\n }\n },\n cell: {\n normal: {\n background: '#fbfbfb',\n border: '#e0e0e0',\n showVerticalBorder: true\n },\n header: {\n background: '#eee',\n border: '#ccc',\n showVerticalBorder: true\n },\n rowHeader: {\n border: '#ccc',\n showVerticalBorder: true\n },\n editable: {\n background: '#fbfbfb'\n },\n selectedHeader: {\n background: '#d8d8d8'\n },\n focused: {\n border: '#418ed4'\n },\n disabled: {\n text: '#b0b0b0'\n }\n }\n}\n </textarea>\n </p>\n <p><button class=\"btn-custom\">Apply</button></p>\n </div>\n </div>\n "},"file":{"relativePath":"examples/example07-themes.html"}},"pageContext":{"id":"tutorial-example07-themes","filename":"example07-themes"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}