{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example27-export","result":{"data":{"examplePageJson":{"title":"27. Export","codeJs":"\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\">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><span class=\"token punctuation\">,</span>\n      <span class=\"token function-variable function\">contextMenu</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span> rowKey<span class=\"token punctuation\">,</span> columnName <span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></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 literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'export'</span><span class=\"token punctuation\">,</span>\n              <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'Export'</span><span class=\"token punctuation\">,</span>\n              <span class=\"token literal-property property\">subMenu</span><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\">'default'</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'Default'</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">subMenu</span><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\">'csvExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'CSV export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'csv'</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 punctuation\">{</span>\n                      <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'excelExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'Excel export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'xlsx'</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 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\">'includeHeader'</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'includeHeader: false'</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">subMenu</span><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\">'csvExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'CSV export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'csv'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">includeHeader</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span> <span class=\"token punctuation\">}</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 punctuation\">{</span>\n                      <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'excelExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'Excel export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'xlsx'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">includeHeader</span><span class=\"token operator\">:</span> <span class=\"token boolean\">false</span> <span class=\"token punctuation\">}</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 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\">'colunmNames'</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">['name', 'artist']</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">subMenu</span><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\">'csvExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'CSV export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'csv'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">columnNames</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'artist'</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</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 punctuation\">{</span>\n                      <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'excelExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'Excel export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'xlsx'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">columnNames</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'name'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'artist'</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">}</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 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\">'onlySelected'</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'onlySelected: true'</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token literal-property property\">subMenu</span><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\">'csvExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'CSV export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'csv'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">onlySelected</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</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 punctuation\">{</span>\n                      <span class=\"token literal-property property\">name</span><span class=\"token operator\">:</span> <span class=\"token string\">'excelExport'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token literal-property property\">label</span><span class=\"token operator\">:</span> <span class=\"token string\">'Excel export'</span><span class=\"token punctuation\">,</span>\n                      <span class=\"token function-variable function\">action</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        grid<span class=\"token punctuation\">.</span><span class=\"token function\">export</span><span class=\"token punctuation\">(</span><span class=\"token string\">'xlsx'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">onlySelected</span><span class=\"token operator\">:</span> <span class=\"token boolean\">true</span> <span class=\"token punctuation\">}</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 punctuation\">]</span>\n                <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 punctuation\">}</span>\n          <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 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/example27-export.html"}},"pageContext":{"id":"tutorial-example27-export","filename":"example27-export"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}