{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/pivoting/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pivoting allows you to take a columns values and turn them into columns. For example you can pivot on Country to make columns for Ireland, United Kingdom, USA etc."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pivoting only makes sense when mixed with aggregation. If you turn a column into a pivot column, you must have at least one aggregation (value) active for the configuration to make sense. For example, if pivoting by country, you must provide something you are measuring such as 'gold medals per country'."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As with all features, pivoting works with all frameworks the grid supports."}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-mode","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-mode","ariaLabel":"pivot mode 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":"Pivot Mode"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pivot mode is required to be turned on for pivoting to work. When the grid is in pivot mode, the following will happen:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Only columns with Group, Pivot or Value active will be included in the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Only aggregated rows will be shown, the lowest level "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowData"}]},{"type":"text","value":" will not be displayed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If pivot mode is off, then adding or removing pivot columns will have no effect."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To allow a column to be used as pivot column via the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/tool-panel/"},"children":[{"type":"text","value":"Tool Panel"}]},{"type":"text","value":",\nset "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"enablePivot=true"}]},{"type":"text","value":" on the required columns. Otherwise you won't be able to drag\nand drop the columns to the pivot drop zone from the Tool Panel."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"specifying-pivot-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#specifying-pivot-columns","ariaLabel":"specifying pivot 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":"Specifying Pivot Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To pivot rows by a particular column, mark the column you want to group with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivot=true"}]},{"type":"text","value":". There is no limit on the number of columns that the grid can pivot by. For example, the following will pivot the rows in the grid by country and then sport:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: \"country\", pivot: true },\n        { field: \"sport\", pivot: true }\n    ]\n}\n"}]},{"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 shows a simple pivot on the Sport column using the Gold, Silver and Bronze columns for values."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Columns Date and Year, although defined as columns, are not displayed in the grid as they have no group, pivot or value associated with them."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Simple Example","name":"simple","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 610, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-mode-vs-pivot-active","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-mode-vs-pivot-active","ariaLabel":"pivot mode vs pivot active 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":"Pivot Mode vs Pivot Active"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to have pivot mode turned on even though there is no pivot active on the grid. In this scenario, the grid will display the data as normal but will strip out columns that have no grouping or value active."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates the difference between pivot mode and having a column with pivot active. The example has three modes of operation that can be switched between using the top buttons. The modes are as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"1 - Grouping Active:"}]},{"type":"text","value":" This is normal grouping. The grid groups with aggregations over Gold, Silver and Bronze. The user can drill down to the lowest level row data and columns without aggregation or group (eg Country, Year, Date and Sport) are shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2 - Grouping Active with Pivot Mode:"}]},{"type":"text","value":" This is grouping with pivotMode=true, but without any pivot active. The data shown is identical to the first option except the grid removes access to the lowest level row data and columns without aggregation or group are not shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"3 - Grouping Active with Pivot Mode and Pivot Active:"}]},{"type":"text","value":" This is grouping with pivotMode=true and pivot active. Although it appears similar to the second option, there is no pivot active in the second option."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Pivot Mode Vs Pivot Active","name":"pivot-mode","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 630, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that a pivot can only be active if pivot mode is on. If pivot mode is off, all pivot columns are ignored."}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-mode--visible-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-mode--visible-columns","ariaLabel":"pivot mode  visible 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":"Pivot Mode & Visible Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When not in pivot mode, only columns that are visible are shown in the grid. To remove a column from the grid, use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.setColumnVisible(colKey, visible)"}]},{"type":"text","value":". Checking a column in the toolPanel will set the visibility on the column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When in pivot mode and not pivoting, only columns that have row group or aggregation active are included in the grid. To add a column to the grid you either add it as a row group column or a value column. Setting visibility on a column has no impact when in pivot mode. Checking a column in the toolPanel will either add the column as a row group (if the column is configured as a dimension) or as an aggregated value (if the columns is configured as a value)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When in pivot mode and pivoting, then the columns displayed in the grid are pivot result columns (explained below) and not the grid options supplied columns. The pivot result columns are a product of the pivot and value columns. To have a column included in the calculation of the pivot result columns, it should be added as either a pivot or a value column. As with 'pivot mode and not pivoting', checking a column in the toolPanel while in pivot mode will add the column as a row group or an aggregated value. You must drag the column to a pivot drop zone in order to add it as a pivot column. As before, setting visibility on the column will have no effect when in pivot mode."}]},{"type":"element","tagName":"h2","properties":{"id":"columns-vs-pivot-result-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#columns-vs-pivot-result-columns","ariaLabel":"columns vs 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":"Columns vs Pivot Result Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When Pivot Mode is off, the Columns in the grid correspond to the Column Definitions provided to the grid by the application. When Pivot Mode is on and Pivot is active, the Columns in the grid are Pivot Result Columns, which are the combinatorial product of Pivot Column values and the aggregated Value Columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, consider the Columns from the examples "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":". If a Pivot is placed on Year and an Aggregation of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sum"}]},{"type":"text","value":" is placed on Gold, then the Pivot Result Columns that get displayed in the grid would be: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2002 sum(Gold)"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2004 sum(Gold)"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2006 sum(Gold)"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2008 sum(Gold)"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2010 sum(Gold)"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2012 sum(Gold)"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Pivot Result Columns do not behave the same as the initial Columns in the following scenarios:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tool Panel"}]},{"type":"text","value":": The Tool Panel shows initial Columns, never Pivot Result Columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filtering"}]},{"type":"text","value":": Filtering on Pivot Result Columns is slightly different, "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/pivoting/#filtering"},"children":[{"type":"text","value":"See below"}]},{"type":"text","value":" for details."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"looking-up-pivot-result-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#looking-up-pivot-result-columns","ariaLabel":"looking up 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":"Looking up Pivot Result Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As mentioned above, the Pivot Result Columns in the grid are created by the grid by cross referencing Pivot Columns with Value Columns. The result of which are new Pivot Result Columns that have Column ID's generated by the grid. If you want to use the Column API to manage the Pivot Result Columns (e.g. to set width, apply sort etc) you look up the column using the Columns API "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getPivotResultColumn(pivotCols, valueCol)"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-api/api.json","section":"Pivoting","names":"[\"getPivotResultColumn\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|// look up the Column that pivots on country Ireland and aggregates Gold\n|const irelandGoldColumn = gridOptions.columnApi.getPivotResultColumn(['Ireland'],'gold');\n|\n|// change the width of the Pivot Result Column\n|gridOptions.columnApi.setColumnWidth(irelandGoldColumn, newWidth);\n|\n|// look up the Column that pivots on country SausageKingdom and year 2002 and aggregates silver\n|const sausageKingdomColumn = gridOptions.columnApi.getPivotResultColumn(['SausageKingdom','2002'],'silver');\n|\n|console.log('found column with id ' + sausageKingdomColumn.getId());\n"}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-result-column-definitions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-result-column-definitions","ariaLabel":"pivot result column definitions 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":"Pivot Result Column Definitions"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to manipulate the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/column-definitions/"},"children":[{"type":"text","value":"Column Definition"}]},{"type":"text","value":" of the Pivot Result Columns using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"processPivotResultColDef"}]},{"type":"text","value":" callback (or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"processPivotResultColGroupDef"}]},{"type":"text","value":" callback for Column Groups)."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" properties of the Pivot Result Column definitions should not be overwritten."}]}]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    processPivotResultColDef: (colDef) => {\n|        if (colDef.pivotValueColumn.getId() === 'gold') {\n|            colDef.headerName = colDef.headerName.toUpperCase();\n|        }\n|    },\n|    processPivotResultColGroupDef: (colGroupDef) => {\n|        if (colGroupDef.pivotKeys.length && colGroupDef.pivotKeys[0] === '2010') {\n|            colGroupDef.headerClass = 'color-background'\n|        }\n|        colGroupDef.headerName = 'Year ' + colGroupDef.headerName\n|    },\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, notice how applying these functions can be used to manipulate the headers"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Group Headers have had "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" prefixed onto each value"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Group "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Year 2010"}]},{"type":"text","value":" has been coloured yellow"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Columns pivoted from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":" Column have been uppercased"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Pivot Result Columns","name":"secondary-columns","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 650, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"filtering","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filtering","ariaLabel":"filtering 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":"Filtering"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to filter on both grid options supplied columns and pivot result columns when pivoting is active in the grid. However, there are\nsome differences in how users can filter on both column types. These differences are described in sections below:"}]},{"type":"element","tagName":"h3","properties":{"id":"filtering-on-regular-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filtering-on-regular-columns","ariaLabel":"filtering on regular 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":"Filtering on Regular Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When pivoting is active in the grid,  "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filtering-overview/"},"children":[{"type":"text","value":"Filtering"}]},{"type":"text","value":" on columns supplied in the grid options is possible through the\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/tool-panel-filters/"},"children":[{"type":"text","value":"Filters Tool Panel"}]},{"type":"text","value":" and the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/grid-api/#reference-filter"},"children":[{"type":"text","value":"Filter API"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When pivoting is active, it is not possible to filter on regular columns using "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filtering/"},"children":[{"type":"text","value":"Column Filters"}]},{"type":"text","value":" as the grid only displays group and pivot result columns."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"These filters are applied to the data before it is pivoted, as such a change in these filters can effect not only the resulting\nvalues and rows, but also the columns generated from the pivot."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|   columnDefs: [\n|       { field: 'country', rowGroup: true, filter: true },\n|       { field: 'year', pivot: true, filter: true },\n|       { field: 'sport', filter: true },\n|       { field: 'gold', aggFunc: 'sum' },\n|       { field: 'silver', aggFunc: 'sum' },\n|       { field: 'bronze', aggFunc: 'sum' },\n|   ],\n|   pivotMode: true,\n|   sideBar: 'filters',\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The snippet above has been used to construct the example below, demonstrating the effects of applying filters to the columns in the grid options while pivot mode is enabled."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filtering on a grouped column:"}]}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the filters tool panel, deselect "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"United States"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" column filters"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Observe how the row has disappeared from the pivot grid"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Make note of the column group for the year "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2002"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Now, using the filters tool panel, deselect "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Norway"}]},{"type":"text","value":", again using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" column filters"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Observe now, how not only the row has disappeared, but so has the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2002"}]},{"type":"text","value":" year column group"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filtering on a pivoted column:"}]}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the filters tool panel, deselect "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2002"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Year"}]},{"type":"text","value":" column filters"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Observe how, rather than reducing the number of rows, the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2002"}]},{"type":"text","value":" column group and the columns belonging to it are now gone."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filtering on any other column:"}]}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the filters tool panel, deselect "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Swimming"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Sport"}]},{"type":"text","value":" column filters"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Observe how in this case, some rows are hidden, and some pivot values change."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filtering With Pivot","name":"filter","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 610, \"modules\": [\"clientside\", \"rowgrouping\", \"filterpanel\", \"menu\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"filtering-on-pivot-result-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filtering-on-pivot-result-columns","ariaLabel":"filtering on 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":"Filtering on Pivot Result Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When pivot mode is enabled, you may also "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filtering-overview/"},"children":[{"type":"text","value":"Filter"}]},{"type":"text","value":" on the generated pivot result columns using the column menu, or "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/floating-filters/"},"children":[{"type":"text","value":"Floating Filters"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|   columnDefs: [\n|       { field: 'country', rowGroup: true },\n|       { field: 'year', pivot: true },\n|       { field: 'sport' },\n|       { field: 'gold', aggFunc: 'sum', filter: true },\n|       { field: 'silver', aggFunc: 'sum', filter: 'agNumberColumnFilter' },\n|       { field: 'bronze', aggFunc: 'sum' },\n|   ],\n|   pivotMode: true,\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As shown in the snippet above, filters are enabled on pivot result columns by inheriting properties from the underlying value column. The below example demonstrates this behaviour."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While pivot result columns inherit the properties of the value column from which they are generated, setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filter: true"}]},{"type":"text","value":" will instead\ndefault to a "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filter-number/"},"children":[{"type":"text","value":"Number Filter"}]},{"type":"text","value":" in the case of a pivot result column.\nYou can use "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filter-text/"},"children":[{"type":"text","value":"Text Filter"}]},{"type":"text","value":" or "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filter-date/"},"children":[{"type":"text","value":"Date Filter"}]},{"type":"text","value":". However, "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filter-set/"},"children":[{"type":"text","value":"Set Filter"}]},{"type":"text","value":" cannot\nbe used for filtering pivot result columns."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filtering on a pivot result column:"}]}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Using the filters tool panel, select the filter "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Not Blank"}]},{"type":"text","value":" using the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2000, gold"}]},{"type":"text","value":" column filter"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Observe how in this case, all rows which did not have a value for the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"2000, gold"}]},{"type":"text","value":" column have been hidden."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filtering Pivot Result Columns","name":"secondary-columns-filter","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 610, \"modules\": [\"clientside\", \"rowgrouping\", \"filterpanel\", \"menu\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"filtering-using-the-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#filtering-using-the-api","ariaLabel":"filtering using the api 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":"Filtering using the API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When pivot mode is enabled, you may also "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filtering-overview/"},"children":[{"type":"text","value":"Filter"}]},{"type":"text","value":" on both the pivot result columns, and the regular columns using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/filter-api/"},"children":[{"type":"text","value":"Filter API"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const filterNotBlank2000Silvers = () => {\n|  const targetCol = gridOptions.columnApi.getPivotResultColumn(['2000'], 'silver');\n|  if (targetCol) {\n|    gridOptions.api.setFilterModel({\n|      [targetCol.getId()]: {\n|        filterType: 'number',\n|        type: 'notBlank'\n|      },\n|    })\n|  }\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As shown in the snippet above, you can also set filters on pivot result columns using the API."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Filtering using the API","name":"filter-api","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 610, \"modules\": [\"clientside\", \"rowgrouping\", \"filterpanel\", \"menu\", \"setfilter\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-column-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-column-groups","ariaLabel":"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":"Pivot Column Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Multiple group columns will be shown in the grid when there is more than one active pivot column. These columns can be collapsed, expanded or fixed as described in the sections below:"}]},{"type":"element","tagName":"h3","properties":{"id":"expandable-pivot-column-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#expandable-pivot-column-groups","ariaLabel":"expandable 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":"Expandable Pivot Column Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When there is more than one active pivot column, multiple group columns will appear in a collapsed state by default. Each value column will be aggregated based on the configured "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.aggFunc"}]},{"type":"text","value":" at each column group level."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"grouping","names":"[\"aggFunc\"]"},"children":[]}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Expandable Pivot Column Groups","name":"expandable-pivot-column-groups","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 655, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"fixed-pivot-column-groups","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fixed-pivot-column-groups","ariaLabel":"fixed 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":"Fixed Pivot Column Groups"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To fix the pivot column groups without the ability to expand and collapse the column groups, enable the following grid option property: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressExpandablePivotGroups=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Fixed Pivot Column Groups","name":"fixed-pivot-column-groups","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 655, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-row-totals","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-row-totals","ariaLabel":"pivot row totals 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":"Pivot Row Totals"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When in pivot mode you can also include automatically calculated Row Total Columns. These total columns will use the provided aggregation function on the value columns to 'roll-up' each group level."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable Pivot Row Totals, declare the following property: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOption.pivotRowTotals = 'before' | 'after'"}]},{"type":"text","value":". The values "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"before"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"after"}]},{"type":"text","value":" are used to control the position of the row total columns relative to the other pivot columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates Pivot Row Totals as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pivot Row Totals are positioned before the other pivot group columns using: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOption.pivotRowTotals = 'before'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pivot Row Totals are added for each of the value columns: 'gold', 'silver' and 'bronze'."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Pivot Row Totals","name":"row-totals","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 655, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-column-group-totals","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-column-group-totals","ariaLabel":"pivot column group totals 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":"Pivot Column Group Totals"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When in pivot mode you can also include automatically calculated total pivot columns. These total columns will use the provided aggregation function on the value columns to 'roll-up' each group level."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pivot column groups that contain more than one child will have a total column included. Expanding this group will reveal the columns that make up this total value."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To enable total columns set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.pivotColumnGroupTotals = 'before' | 'after'"}]},{"type":"text","value":". The values "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"before"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"after"}]},{"type":"text","value":" are used to control the relative position of the total column when the group is expanded."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All value columns must use the same aggregation function for the total column to make sense, otherwise the total column will not be included."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates Pivot Column Group Totals as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Pivot Column Group Totals added on ['sport', 'year'] columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Expanding pivot groups reveals columns that make up totals."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Pivot Column Group Totals","name":"totals","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 655, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"hiding-repeated-value-column-labels","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hiding-repeated-value-column-labels","ariaLabel":"hiding repeated value column labels 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":"Hiding Repeated Value Column Labels"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When pivoting with only one value column, it can appear redundant to have the value column label repeated for each pivot\nkey. To address this, you can enable the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"removePivotHeaderRowWhenSingleValueColumn"}]},{"type":"text","value":", when set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" it\nwill cause the value column labels to be skipped, instead using the pivot keys for the column label."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates hiding repeated column labels. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"removePivotHeaderRowWhenSingleValueColumn"}]},{"type":"text","value":" grid option is enabled."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"As "},{"type":"element","tagName":"b","properties":{},"children":[{"type":"text","value":"Gold"}]},{"type":"text","value":" is the only value column, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'sum(Gold)'"}]},{"type":"text","value":" columns labels are hidden."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If more than one value column is used, the option is disabled and the row showing all the value column labels is displayed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Hiding Repeated Column Labels","name":"hidden-single-value-column-header","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 655, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"saving--restoring-column-state-with-pivot","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#saving--restoring-column-state-with-pivot","ariaLabel":"saving  restoring column state with 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":"Saving & Restoring Column State with Pivot"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Saving and restoring column state is also possible when pivoting. The generated pivot result columns have IDs dependant on the pivot setup, so assuming the row data is the same, the same pivot result columns will be created and it will be possible to apply saved states to the columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows some examples of saving and restoring state with pivot in mind. Note that "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode"}]},{"type":"text","value":" is not stored as part of the column state. If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotMode"}]},{"type":"text","value":" is important to your columns state, it needs to be stored separately."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Saving & Restoring Column State","name":"state","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 630, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"setfilter\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"pivot-api","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pivot-api","ariaLabel":"pivot api 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":"Pivot API"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows examples of using the pivot API directly. Use this is you want to build out your own toolPanel."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example also demonstrates exporting to CSV while using Pivot. Basically what you see inside the grid is what will be exported."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Pivot API","name":"api","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 620, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"setfilter\", \"columnpanel\", \"filterpanel\", \"csv\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"ordering-pivot-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#ordering-pivot-columns","ariaLabel":"ordering pivot 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":"Ordering Pivot Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The user is free to drag columns to reorder them and you are able to reorder columns via the columnApi in the normal way. However you may want to change the default order of the pivot columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Order of Pivot Value Column Groups"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPivot value columns are the column groups created by the pivot values - eg if 'Country' is a pivot column, thn the Pivot Value Column Groups are 'Ireland', 'UK', etc. These columns are ordered alphabetically by default. To override this, provide "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotComparator(a,b)"}]},{"type":"text","value":" function in the column definition. See the example below for a demonstration."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"pivoting","names":"[\"pivotComparator\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Order of Pivot Value Columns"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPivot value columns are the lowest level column and correspond to the values selected in your pivot. For example, if value columns are the months of the year, then the values will be 'Jan', 'Feb', 'Mar' etc, one for each value column added. The order of these will either be a) the order the value columns appear in the original column definitions if you provide 'aggFunc' as part of the columns or b) the order you add the columns as value columns."}]},{"type":"element","tagName":"h2","properties":{"id":"hide-open-parents","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#hide-open-parents","ariaLabel":"hide open parents 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":"Hide Open Parents"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows mixing in different options for the row group column. For more info on these properties, see "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/grouping/"},"children":[{"type":"text","value":"Grouping Rows"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupHideOpenParents=true:"}]},{"type":"text","value":" So that when the row group is expanded, the parent row is not shown."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupMultiAutoColumn=true:"}]},{"type":"text","value":" So that one group column is created for each row group column (country and athlete)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupDefaultExpanded=2:"}]},{"type":"text","value":" So that all the groups are opened by default."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Hide Open Parents","name":"hide-open-parents","type":"generated","options":"{ \"enterprise\": true, \"exampleHeight\": 650, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\", \"filterpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"change-detection-and-pivot","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#change-detection-and-pivot","ariaLabel":"change detection and 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":"Change Detection and Pivot"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"While pivoting, you can do delta changes to your data and have the grid reflect this delta changes with animations."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is demonstrated in the section on "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/change-detection/#change-detection-and-pivot"},"children":[{"type":"text","value":"Change Detection and Pivot"}]},{"type":"text","value":", so rather than repeat that, check out the example there."}]}]},"frontmatter":{"title":"Pivoting","version":null,"enterprise":true,"description":null},"headings":[{"id":"pivot-mode","depth":2,"value":"Pivot Mode"},{"id":"specifying-pivot-columns","depth":2,"value":"Specifying Pivot Columns"},{"id":"example-simple-pivot","depth":2,"value":"Example: Simple Pivot"},{"id":"pivot-mode-vs-pivot-active","depth":2,"value":"Pivot Mode vs Pivot Active"},{"id":"pivot-mode--visible-columns","depth":2,"value":"Pivot Mode & Visible Columns"},{"id":"columns-vs-pivot-result-columns","depth":2,"value":"Columns vs Pivot Result Columns"},{"id":"looking-up-pivot-result-columns","depth":2,"value":"Looking up Pivot Result Columns"},{"id":"pivot-result-column-definitions","depth":2,"value":"Pivot Result Column Definitions"},{"id":"filtering","depth":2,"value":"Filtering"},{"id":"filtering-on-regular-columns","depth":3,"value":"Filtering on Regular Columns"},{"id":"filtering-on-pivot-result-columns","depth":3,"value":"Filtering on Pivot Result Columns"},{"id":"filtering-using-the-api","depth":3,"value":"Filtering using the API"},{"id":"pivot-column-groups","depth":2,"value":"Pivot Column Groups"},{"id":"expandable-pivot-column-groups","depth":3,"value":"Expandable Pivot Column Groups"},{"id":"fixed-pivot-column-groups","depth":3,"value":"Fixed Pivot Column Groups"},{"id":"pivot-row-totals","depth":2,"value":"Pivot Row Totals"},{"id":"pivot-column-group-totals","depth":2,"value":"Pivot Column Group Totals"},{"id":"hiding-repeated-value-column-labels","depth":2,"value":"Hiding Repeated Value Column Labels"},{"id":"saving--restoring-column-state-with-pivot","depth":2,"value":"Saving & Restoring Column State with Pivot"},{"id":"pivot-api","depth":2,"value":"Pivot API"},{"id":"ordering-pivot-columns","depth":2,"value":"Ordering Pivot Columns"},{"id":"hide-open-parents","depth":2,"value":"Hide Open Parents"},{"id":"change-detection-and-pivot","depth":2,"value":"Change Detection and Pivot"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/pivoting","pageName":"pivoting"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}