{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example06-attributes","result":{"data":{"examplePageJson":{"title":"6. Attributes","codeJs":"\n    <span class=\"token keyword\">const</span> gridData <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'Beautiful Lies'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Birdy'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'2016.03.26'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'Deluxe'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Pop'</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\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'X'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Ed Sheeran'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'2014.06.24'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'Deluxe'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Pop'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">_attributes</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">disabled</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token comment\">// A current row is disabled</span>\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\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'Moves Like Jagger'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'2011.08.08'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Maroon5'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'Single'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Pop,Rock'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">_attributes</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">checkDisabled</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token comment\">// A checkbox is disabled only</span>\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\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'A Head Full Of Dreams'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Coldplay'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'2015.12.04'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'Deluxe'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Rock'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">_attributes</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">checked</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// A checkbox is already checked while rendering</span>\n          <span class=\"token literal-property property\">className</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// Add class name on a row</span>\n            <span class=\"token literal-property property\">row</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'red'</span><span class=\"token punctuation\">]</span>\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 punctuation\">{</span>\n        <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'19'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Adele'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'2008.01.27'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'EP'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Pop,R&amp;B'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">_attributes</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">rowSpan</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// Merge rows</span>\n            <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token number\">2</span>\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 punctuation\">{</span>\n        <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'21'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Adele'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'2011.01.21'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'Deluxe'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Pop,R&amp;B'</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\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'25'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">artist</span><span class=\"token operator\">:</span> <span class=\"token string\">'Adele'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">release</span><span class=\"token operator\">:</span> <span class=\"token string\">'2015.11.20'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'EP'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token string\">'Pop'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">_attributes</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">className</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// Add class name on each columns</span>\n            <span class=\"token literal-property property\">column</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> <span class=\"token punctuation\">[</span><span class=\"token string\">'blue'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n              <span class=\"token literal-property property\">genre</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'blue'</span><span class=\"token punctuation\">]</span>\n            <span class=\"token punctuation\">}</span>\n          <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">]</span><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\">scrollX</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">scrollY</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">rowHeaders</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'checkbox'</span><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  ","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/example06-attributes.html"}},"pageContext":{"id":"tutorial-example06-attributes","filename":"example06-attributes"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}