{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/server-side-model-pivoting/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this section we add Server-Side Pivoting to create an example with the ability to 'Slice and Dice'\ndata using the Server-Side Row Model (SSRM)."}]},{"type":"element","tagName":"h2","properties":{"id":"enabling-pivoting","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enabling-pivoting","ariaLabel":"enabling pivoting permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Enabling Pivoting"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To pivot on a column "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivot=true"}]},{"type":"text","value":" should be set on the column definition. Additionally the grid needs to be in\npivot mode which is set through the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the snippet below a pivot is defined on the 'year' column and pivot mode is enabled:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // pivot mode enabled\n    pivotMode: true,\n    columnDefs: [\n        { field: 'country', rowGroup: true },\n        // pivot enabled\n        { field: 'year', pivot: true },\n        { field: 'total' },\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more configuration details see the section on "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/pivoting/"},"children":[{"type":"text","value":"Pivoting"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"pivoting-on-the-server","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivoting-on-the-server","ariaLabel":"pivoting on the server permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Pivoting on the Server"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The actual pivoting is performed on the server when using the Server-Side Row Model.\nWhen the grid needs more rows it makes a request via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRows(params)"}]},{"type":"text","value":" on the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/server-side-model-datasource/#datasource-interface"},"children":[{"type":"text","value":"Server-Side Datasource"}]},{"type":"text","value":" with metadata\ncontaining row grouping details."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The properties relevant to pivoting in the request are shown below:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// IServerSideGetRowsRequest"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n   "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// pivot columns, cols with 'pivot=true'"}]},{"type":"text","value":"\n   pivotCols"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" ColumnVO"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// true if pivot mode is one, otherwise false"}]},{"type":"text","value":"\n   pivotMode"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","builtin"]},"children":[{"type":"text","value":"boolean"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n   "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// other properties"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note in the snippet above that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotCols"}]},{"type":"text","value":" contains all the columns the grid is pivoting on,\nand "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode"}]},{"type":"text","value":" is used to determine if pivoting is currently enabled in the grid."}]},{"type":"element","tagName":"h2","properties":{"id":"setting-pivot-result-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#setting-pivot-result-columns","ariaLabel":"setting pivot result columns permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Setting Pivot Result Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pivot Result Columns are the columns that are created as part of the pivot function. You must provide\nthese to the grid in order for the grid to display the correct columns for the active pivot function."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, if you pivot on "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":", you need to add columns to the grid for each year contained in the\ndata, e.g. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2000"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2002"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2004"}]},{"type":"text","value":" e.t.c."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pivot result columns are defined identically to the columns supplied to the grid options: you provide a list of "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/column-definitions/"},"children":[{"type":"text","value":"Column Definitions"}]},{"type":"text","value":" passing a list of columns and / or column groups using the following column API method:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-api/api.json","section":"Pivoting","names":"[\"setPivotResultColumns\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\ngridOptions.columnApi.setPivotResultColumns(pivotColDefs);\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There is no limit or restriction as to the number of columns or groups you pass. However, it's important that the field (or value getter) that you set for the columns match."}]},{"type":"element","tagName":"h2","properties":{"id":"example-simple-pivot","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-simple-pivot","ariaLabel":"example simple pivot permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Simple Pivot"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates server-side Pivoting. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pivot mode is enabled through the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A pivot is placed on the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" column via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivot=true"}]},{"type":"text","value":" defined on the column definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows are grouped by "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":" defined on the column definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Values in the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Total"}]},{"type":"text","value":" column are aggregated as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc='sum'"}]},{"type":"text","value":" is defined on the column definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotCols"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode"}]},{"type":"text","value":" properties in the request are used by the server to perform pivoting."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"New column definitions created from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotFields"}]},{"type":"text","value":" are returned from the server and supplied to the grid using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.setPivotResultColumns(pivotColDefs)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the browser's dev console to view the request supplied to the datasource."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Simple Pivot","name":"simple-pivot","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 605, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"example-pivot-column-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-pivot-column-groups","ariaLabel":"example pivot column groups permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Pivot Column Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates server-side Pivoting with multiple row groups where there are multiple value columns ('gold', 'silver', 'bronze') under the 'year' pivot column group. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pivot mode is enabled through the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A pivot is placed on the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" column via "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivot=true"}]},{"type":"text","value":" defined on the column definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Rows are grouped by "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":" defined on their column definitions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Silver"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Bronze"}]},{"type":"text","value":" value columns have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFunc='sum'"}]},{"type":"text","value":" defined on their column definitions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotCols"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode"}]},{"type":"text","value":" properties in the request are used by the server to perform pivoting."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"New column group definitions created from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotFields"}]},{"type":"text","value":" are returned from the server and supplied to the grid using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.setPivotResultColumns(pivotColDefs)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the browser's dev console to view the request supplied to the datasource."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Pivot Column Groups","name":"pivot-column-groups","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 610, \"extras\": [\"alasql\"], \"modules\": [\"serverside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"example-slice-and-dice","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-slice-and-dice","ariaLabel":"example slice and dice permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example: Slice and Dice"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A mock data store running inside the browser is used in the example below. The purpose of the mock server is to demonstrate the interaction between the grid and the server. For your application, your server will need to understand the requests from the client and build SQL (or the SQL equivalent if using a no-SQL data store) to run the relevant query against the data store."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example demonstrates the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Athlete, Age, Country, Year"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" all have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableRowGroup=true"}]},{"type":"text","value":" which means they can be grouped on. To group, you drag the columns to the row group panel section. By default the example is grouping by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and then "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" as these columns have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup=true"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Gold, Silver"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Bronze"}]},{"type":"text","value":" all have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enableValue=true"}]},{"type":"text","value":" which means they can be aggregated on. To aggregate, you drag the column to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Values"}]},{"type":"text","value":" section. When you are grouping, all columns in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Values"}]},{"type":"text","value":" section will be aggregated."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"You can turn the grid into "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pivot Mode"}]},{"type":"text","value":". To do this, you click the pivot mode checkbox. When the grid is in pivot mode, the grid behaves similar to an Excel grid. This extra information is passed to your server as part of the request and it is your server's responsibility to return the data in the correct structure."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete, Age, Country, Year"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" all have "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enablePivot=true"}]},{"type":"text","value":" which means they can be pivoted on when "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pivot Mode"}]},{"type":"text","value":" is active. To pivot, you drag the column to the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Pivot"}]},{"type":"text","value":" section."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Note that when you pivot, it is not possible to drill all the way down the leaf levels."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"In addition to grouping, aggregation and pivot, the example also demonstrates filtering. The columns "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" have grid-provided filters. The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" has an example-provided custom filter. You can use whatever filter you want, as long as your server knows what to do with it."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Slice And Dice","name":"slice-and-dice","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 605, \"modules\": [\"serverside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"next-up","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Next Up"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continue to the next section to learn about "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.1.0/server-side-model-pagination/"},"children":[{"type":"text","value":"Pagination"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Pivoting","version":null,"enterprise":true,"description":null},"headings":[{"id":"enabling-pivoting","depth":2,"value":"Enabling Pivoting"},{"id":"pivoting-on-the-server","depth":2,"value":"Pivoting on the Server"},{"id":"setting-pivot-result-columns","depth":2,"value":"Setting Pivot Result Columns"},{"id":"example-simple-pivot","depth":2,"value":"Example: Simple Pivot"},{"id":"example-pivot-column-groups","depth":2,"value":"Example: Pivot Column Groups"},{"id":"example-slice-and-dice","depth":2,"value":"Example: Slice and Dice"},{"id":"next-up","depth":2,"value":"Next Up"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/server-side-model-pivoting","pageName":"server-side-model-pivoting"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}