{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example11-row-headers","result":{"data":{"examplePageJson":{"title":"11. Customizing Row headers","codeJs":"\n    <span class=\"token keyword\">class</span> <span class=\"token class-name\">RowNumberRenderer</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">const</span> el <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'span'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        el<span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">No.</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>props<span class=\"token punctuation\">.</span>formattedValue<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>el <span class=\"token operator\">=</span> el<span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n\n      <span class=\"token function\">getElement</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>el<span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n\n      <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>el<span class=\"token punctuation\">.</span>innerHTML <span class=\"token operator\">=</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">No.</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>props<span class=\"token punctuation\">.</span>formattedValue<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">class</span> <span class=\"token class-name\">CheckboxRenderer</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">const</span> <span class=\"token punctuation\">{</span> grid<span class=\"token punctuation\">,</span> rowKey <span class=\"token punctuation\">}</span> <span class=\"token operator\">=</span> props<span class=\"token punctuation\">;</span>\n\n        <span class=\"token keyword\">const</span> label <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'label'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        label<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'checkbox tui-grid-row-header-checkbox'</span><span class=\"token punctuation\">;</span>\n        label<span class=\"token punctuation\">.</span><span class=\"token function\">setAttribute</span><span class=\"token punctuation\">(</span><span class=\"token string\">'for'</span><span class=\"token punctuation\">,</span> <span class=\"token function\">String</span><span class=\"token punctuation\">(</span>rowKey<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token keyword\">const</span> hiddenInput <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'input'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        hiddenInput<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'hidden-input'</span><span class=\"token punctuation\">;</span>\n        hiddenInput<span class=\"token punctuation\">.</span>id <span class=\"token operator\">=</span> <span class=\"token function\">String</span><span class=\"token punctuation\">(</span>rowKey<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token keyword\">const</span> customInput <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'span'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        customInput<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> <span class=\"token string\">'custom-input'</span><span class=\"token punctuation\">;</span>\n\n        label<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>hiddenInput<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        label<span class=\"token punctuation\">.</span><span class=\"token function\">appendChild</span><span class=\"token punctuation\">(</span>customInput<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        hiddenInput<span class=\"token punctuation\">.</span>type <span class=\"token operator\">=</span> <span class=\"token string\">'checkbox'</span><span class=\"token punctuation\">;</span>\n        label<span class=\"token punctuation\">.</span><span class=\"token function\">addEventListener</span><span class=\"token punctuation\">(</span><span class=\"token string\">'click'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">ev</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n          ev<span class=\"token punctuation\">.</span><span class=\"token function\">preventDefault</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n          <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>ev<span class=\"token punctuation\">.</span>shiftKey<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            grid<span class=\"token punctuation\">[</span><span class=\"token operator\">!</span>hiddenInput<span class=\"token punctuation\">.</span>checked <span class=\"token operator\">?</span> <span class=\"token string\">'checkBetween'</span> <span class=\"token operator\">:</span> <span class=\"token string\">'uncheckBetween'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">(</span>rowKey<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">return</span><span class=\"token punctuation\">;</span>\n          <span class=\"token punctuation\">}</span>\n\n          grid<span class=\"token punctuation\">[</span><span class=\"token operator\">!</span>hiddenInput<span class=\"token punctuation\">.</span>checked <span class=\"token operator\">?</span> <span class=\"token string\">'check'</span> <span class=\"token operator\">:</span> <span class=\"token string\">'uncheck'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">(</span>rowKey<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>el <span class=\"token operator\">=</span> label<span class=\"token punctuation\">;</span>\n\n        <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span>props<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n\n      <span class=\"token function\">getElement</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>el<span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n\n      <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">const</span> hiddenInput <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>el<span class=\"token punctuation\">.</span><span class=\"token function\">querySelector</span><span class=\"token punctuation\">(</span><span class=\"token string\">'.hidden-input'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">const</span> checked <span class=\"token operator\">=</span> <span class=\"token function\">Boolean</span><span class=\"token punctuation\">(</span>props<span class=\"token punctuation\">.</span>value<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n        hiddenInput<span class=\"token punctuation\">.</span>checked <span class=\"token operator\">=</span> checked<span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">const</span> grid <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token class-name\">tui<span class=\"token punctuation\">.</span>Grid</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n      <span class=\"token literal-property property\">el</span><span class=\"token operator\">:</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'grid'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">data</span><span class=\"token operator\">:</span> gridData<span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">rowHeaders</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'rowNum'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">renderer</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> RowNumberRenderer\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'checkbox'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">\n          &lt;label for=\"all-checkbox\" class=\"checkbox\">\n            &lt;input type=\"checkbox\" id=\"all-checkbox\" class=\"hidden-input\" name=\"_checked\" />\n            &lt;span class=\"custom-input\">&lt;/span>\n          &lt;/label>\n        </span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">renderer</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> CheckboxRenderer\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">columns</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Name'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'name'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Artist'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'artist'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Type'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'type'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Release'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'release'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Genre'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'genre'</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    grid<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'check'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ev</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'check'</span><span class=\"token punctuation\">,</span> ev<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    grid<span class=\"token punctuation\">.</span><span class=\"token function\">on</span><span class=\"token punctuation\">(</span><span class=\"token string\">'uncheck'</span><span class=\"token punctuation\">,</span> <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">ev</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'uncheck'</span><span class=\"token punctuation\">,</span> ev<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  ","codeHtml":"\n      <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">\"</span>grid<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n    "},"file":{"relativePath":"examples/example11-row-headers.html"}},"pageContext":{"id":"tutorial-example11-row-headers","filename":"example11-row-headers"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}