{
    "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":"text","value":"Enabling Pivoting"},{"type":"element","tagName":"a","properties":{"href":"#enabling-pivoting","ariaLabel":"enabling pivoting permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.4/pivoting/"},"children":[{"type":"text","value":"Pivoting"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"pivoting-on-the-server","style":"position:relative;"},"children":[{"type":"text","value":"Pivoting on the Server"},{"type":"element","tagName":"a","properties":{"href":"#pivoting-on-the-server","ariaLabel":"pivoting on the server permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.4/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":"text","value":"Setting Pivot Result Columns"},{"type":"element","tagName":"a","properties":{"href":"#setting-pivot-result-columns","ariaLabel":"setting pivot result columns permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.4/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":"text","value":"Example: Simple Pivot"},{"type":"element","tagName":"a","properties":{"href":"#example-simple-pivot","ariaLabel":"example simple pivot permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Example: Pivot Column Groups"},{"type":"element","tagName":"a","properties":{"href":"#example-pivot-column-groups","ariaLabel":"example pivot column groups permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Example: Slice and Dice"},{"type":"element","tagName":"a","properties":{"href":"#example-slice-and-dice","ariaLabel":"example slice and dice permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Next Up"},{"type":"element","tagName":"a","properties":{"href":"#next-up","ariaLabel":"next up permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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.3.4/server-side-model-pagination/"},"children":[{"type":"text","value":"Pagination"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"SSRM Pivoting","version":null,"enterprise":true,"sideMenu":null,"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"]}