{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example05-relation-columns","result":{"data":{"examplePageJson":{"title":"5. Relation between columns","codeJs":"\n    <span class=\"token keyword\">const</span> twoDepthData <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token string-property property\">'01'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Balad/Dance/Pop'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Hiphop/R&amp;B'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Indie'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'02'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Pop'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Hiphop'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'R&amp;B'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'03'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'OST'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Classic'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_02'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'New Age'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_03'</span> <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> threeDepthData <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token string-property property\">'01_01'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'I Miss You'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Russian Roulette'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'TT'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Beautiful'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'KNOCK KNOCK'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01_0005'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Rookie'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01_0006'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Round And Round'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_01_0007'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'01_02'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'BERMUDA TRIANGLE'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Day Day'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Bye bye my blue'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Comedian'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'what2do'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02_0005'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Bye bye my blue'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02_0006'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'I NEED U'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_02_0007'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'01_03'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Madeleine Love'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Mood Indigo'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">\"I Don't Wanna Love You\"</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Come Back Home'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'MONSTER'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03_0005'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Free Somebody'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03_0006'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Vineyard'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01_03_0007'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'02_01'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Cave Me In'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Hello'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'When We Were Young'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Stay With Me'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">\"I'm Not The Only One\"</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01_0005'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Youth'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01_0006'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Love On Top'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_01_0007'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'02_02'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Love The Way You Lie'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Flower Dance'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'I Feel It Coming'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Love The Way You Lie'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'I Feel It Coming'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02_0005'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'GDFR'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02_0006'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Love Me In Everything'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_02_0007'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'02_03'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Marry You'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Hello'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Coastal Love'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Happy'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'If You Wonder'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0005'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Want To Want Me'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0006'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Get Lucky'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0007'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'03_01'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'City Of Stars'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'You Are My Everything'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Summer Montage / Madeline'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Memory'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'A Lovely Night'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01_0005'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'03_02'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Ravel: Pavane Pour Une Infant Defunte'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_02_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Elgar: Salut D`amour'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_02_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Refuse'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_02_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Liebestraume S541: No. 3 in A flat'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_02_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Three Romances Op94: nr 2 in A'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_02_0005'</span> <span class=\"token punctuation\">}</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n      <span class=\"token string-property property\">'03_03'</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Kiss The Rain'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_03_0001'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Blind Film'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_03_0002'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Merry Christmas Mr.Lawrence'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_03_0003'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'After The Play'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_03_0004'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'River Flows In You'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_03_0005'</span> <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\">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\">rowHeight</span><span class=\"token operator\">:</span> <span class=\"token number\">40</span><span class=\"token punctuation\">,</span>\n      <span class=\"token literal-property property\">minBodyHeight</span><span class=\"token operator\">:</span> <span class=\"token number\">120</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\">'Category1'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'category1'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">formatter</span><span class=\"token operator\">:</span> <span class=\"token string\">'listItemText'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</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 string\">'select'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">listItems</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n                <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Select'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Domestic'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'01'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Overseas'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'02'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">text</span><span class=\"token operator\">:</span> <span class=\"token string\">'Etc'</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">value</span><span class=\"token operator\">:</span> <span class=\"token string\">'03'</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 literal-property property\">relations</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n            <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">targetNames</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'category2'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n              <span class=\"token function\">listItems</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> value <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token keyword\">return</span> twoDepthData<span class=\"token punctuation\">[</span>value<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n              <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n              <span class=\"token function\">disabled</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> value <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token keyword\">return</span> <span class=\"token operator\">!</span>value<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        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Category2'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'category2'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">formatter</span><span class=\"token operator\">:</span> <span class=\"token string\">'listItemText'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</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 string\">'select'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">listItems</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><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\">relations</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span>\n            <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">targetNames</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'category3'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n              <span class=\"token function\">listItems</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> value <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token keyword\">return</span> threeDepthData<span class=\"token punctuation\">[</span>value<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n              <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n              <span class=\"token function\">disabled</span><span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> value <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token keyword\">return</span> <span class=\"token operator\">!</span>value<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        <span class=\"token punctuation\">{</span>\n          <span class=\"token literal-property property\">header</span><span class=\"token operator\">:</span> <span class=\"token string\">'Category3'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'category3'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">formatter</span><span class=\"token operator\">:</span> <span class=\"token string\">'listItemText'</span><span class=\"token punctuation\">,</span>\n          <span class=\"token literal-property property\">editor</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 string\">'select'</span><span class=\"token punctuation\">,</span>\n            <span class=\"token literal-property property\">options</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n              <span class=\"token literal-property property\">listItems</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</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><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">const</span> gridData <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n      <span class=\"token comment\">// initial data</span>\n      <span class=\"token punctuation\">{</span>\n        <span class=\"token literal-property property\">category1</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">category2</span><span class=\"token operator\">:</span> <span class=\"token string\">''</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">category3</span><span class=\"token operator\">:</span> <span class=\"token string\">''</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\">category1</span><span class=\"token operator\">:</span> <span class=\"token string\">'02'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">category2</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">category3</span><span class=\"token operator\">:</span> <span class=\"token string\">'02_03_0001'</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\">category1</span><span class=\"token operator\">:</span> <span class=\"token string\">'03'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">category2</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01'</span><span class=\"token punctuation\">,</span>\n        <span class=\"token literal-property property\">category3</span><span class=\"token operator\">:</span> <span class=\"token string\">'03_01_0001'</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n    grid<span class=\"token punctuation\">.</span><span class=\"token function\">resetData</span><span class=\"token punctuation\">(</span>gridData<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/example05-relation-columns.html"}},"pageContext":{"id":"tutorial-example05-relation-columns","filename":"example05-relation-columns"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}