{"componentChunkName":"component---src-templates-example-page-js","path":"/tutorial-example23-client-pagination","result":{"data":{"examplePageJson":{"title":"23. Client Pagination","codeJs":"\n const grid = new tui.Grid({\n el: document.getElementById('grid'),\n data: gridData,\n columns: [\n {\n header: 'Name',\n name: 'name'\n },\n {\n header: 'Artist',\n name: 'artist'\n },\n {\n header: 'Type',\n name: 'type'\n },\n {\n header: 'Release',\n name: 'release'\n },\n {\n header: 'Genre',\n name: 'genre'\n }\n ],\n rowHeaders: ['rowNum'],\n pageOptions: {\n useClient: true,\n perPage: 5\n }\n });\n\n const appendBtn = document.getElementById('appendBtn');\n const prependBtn = document.getElementById('prependBtn');\n\n const appendedData = {\n name: 'Music',\n artist: 'Lee',\n type: 'Deluxe',\n release: '2019.09.09',\n genre: 'Pop'\n };\n\n appendBtn.addEventListener('click', () => {\n grid.appendRow(appendedData);\n });\n\n prependBtn.addEventListener('click', () => {\n grid.prependRow(appendedData);\n });\n ","codeHtml":"\n <div class=\"btn-wrapper\">\n <button id=\"appendBtn\">appendBtn</button>\n <button id=\"prependBtn\">prependBtn</button>\n </div>\n <div id=\"grid\"></div>\n "},"file":{"relativePath":"examples/example23-client-pagination.html"}},"pageContext":{"id":"tutorial-example23-client-pagination","filename":"example23-client-pagination"}},"staticQueryHashes":["1348573739","1897965698","2583274425","4108157242"]}