{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/column-state/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-or-vue-or-javascript-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column Definitions contain both stateful and non-stateful attributes. Stateful attributes can have their values changed by the grid (e.g. Column sort can be changed by the user clicking on the column header). Non-stateful attributes do not change from what is set in the Column Definition (e.g. once the Header Name is set as part of a Column Definition, it typically does not change)."}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","react-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"video-section","properties":{"id":"d9Kohpbt42M","title":"React Column State","header":"true"},"children":[{"type":"text","value":"\nColumn Definitions contain both stateful and non-stateful attributes. Stateful attributes can have their values changed by the grid (e.g. Column sort can be changed by the user clicking on the column header). Non-stateful attributes do not change from what is set in the Column Definition (e.g. once the Header Name is set as part of a Column Definition, it typically does not change).\n"}]}]}]},{"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 DOM also has stateful vs non-stateful attributes. For example consider a DOM element and setting\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"element.style.width=\"100px\""}]},{"type":"text","value":" will indefinitely set width to 100 pixels, the browser will not change this value.\nHowever setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"element.scrollTop=200"}]},{"type":"text","value":" will set the scroll position, but the browser can change the scroll\nposition further following user interaction, thus scroll position is stateful as the browser can change\nthe state."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The full list of stateful attributes of Columns are represented by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ColumnStateParams"}]},{"type":"text","value":" interface:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"ColumnStateParams"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This section details how such state items can be manipulated without having to update Column Definitions."}]},{"type":"element","tagName":"h2","properties":{"id":"save-and-apply","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#save-and-apply-state","ariaLabel":"save and apply state 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":"Save and Apply State"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are two API methods provided for getting and setting Column State. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.getColumnState()"}]},{"type":"text","value":" gets the current\ncolumn state and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.applyColumnState(params)"}]},{"type":"text","value":" sets the column state."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// save the column's state\nconst savedState = gridOptions.columnApi.getColumnState();\n// restore the column state\ngridOptions.columnApi.applyColumnState({ state: savedState });\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates saving and restoring column state. Try the following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click 'Save State' to save the Column State."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Change some column state e.g. resize columns, move columns around, apply column sorting or row grouping etc."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click 'Restore State' and the column's state is set back to where it was when you clicked 'Save State'."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Click 'Reset State' and the state will go back to what was defined in the Column Definitions."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Save and Apply State","name":"save-apply-state","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"column-state-interface","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#column-state-interface","ariaLabel":"column state interface 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":"Column State Interface"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Column State method interfaces are as follows:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-api/api.json","section":"state","names":"[\"getColumnState\", \"applyColumnState\"]"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"partial-state","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#partial-state","ariaLabel":"partial state 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":"Partial State"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to focus on particular columns and / or particular attributes when getting and / or applying a Column\nState. This allows fine grained control over the Column State, e.g. setting what Columns are Pinned, without impacting\nany other state attribute."}]},{"type":"element","tagName":"h3","properties":{"id":"applying-partial-state","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#applying-partial-state","ariaLabel":"applying partial state 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":"Applying Partial State"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When applying a Column State, in cases where some state attributes or columns are missing from the Column State,\nthe following rules apply:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If a Column State is missing attributes, or attributes are provided as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":", then those missing / undefined\nattributes are not updated. For example if a Column has a Column State with just "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinned"}]},{"type":"text","value":", then Pinned is applied to\nthat Column but other attributes, such as Sort, are left intact."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When state is applied and there are additional Columns in the grid that do not appear in the provided state, then the\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params.defaultState"}]},{"type":"text","value":" is applied to those additional Columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"params.defaultState"}]},{"type":"text","value":" is not provided, then any additional Columns in the grid will not be updated."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Combining these rules together leaves for flexible fine grained state control. Take the following code snippets as\nexamples:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n// Sort Athlete column ascending\ngridOptions.columnApi.applyColumnState({\n    state: [\n        {\n            colId: 'athlete',\n            sort: 'asc'\n        }\n    ]\n});\n// Sort Athlete column ascending and clear sort on all other columns\ngridOptions.columnApi.applyColumnState({\n    state: [\n        {\n            colId: 'athlete',\n            sort: 'asc'\n        }\n    ],\n    defaultState: {\n        // important to say 'null' as undefined means 'do nothing'\n        sort: null\n    }\n});\n// Clear sorting on all columns, leave all other attributes untouched\ngridOptions.columnApi.applyColumnState({\n    defaultState: {\n        // important to say 'null' as undefined means 'do nothing'\n        sort: null\n    }\n});\n// Clear sorting, row group, pivot and pinned on all columns, leave all other attributes untouched\ngridOptions.columnApi.applyColumnState({\n    defaultState: {\n        // important to say 'null' as undefined means 'do nothing'\n        sort: null,\n        rowGroup: null,\n        pivot: null,\n        pinned: null\n    }\n});\n// Order columns, but do nothing else\ngridOptions.columnApi.applyColumnState({\n    state: [\n        { colId: 'athlete' },\n        { colId: 'country' },\n        { colId: 'age' },\n        { colId: 'sport' }\n    ],\n    applyOrder: true\n});\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows some fine grained access to Column State."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Fine Grained State","name":"fine-grained-state","type":"mixed","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"saving-partial-state","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#saving-partial-state","ariaLabel":"saving partial state 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 Partial State"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Using the techniques above, it is possible to save and restore a subset of the parameters in the state.\nThe example below demonstrates this by selectively saving and restoring a) sort state and\nb) column visibility and order state."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that when saving and restoring Sort state, other state attributes (width, row group, column order etc)\nare not impacted."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Likewise when saving and restoring visibility and order, only visibility and order will be impacted when\nre-applying the state."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Selective State","name":"selective-state","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"considerations","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#considerations","ariaLabel":"considerations 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":"Considerations"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are a few items to note on specific state attributes. They are as follows:"}]},{"type":"element","tagName":"h3","properties":{"id":"null-vs-undefined","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#null-vs-undefined","ariaLabel":"null vs undefined 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":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" vs "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"undefined"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For all state attributes, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" means "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"do not apply this attribute\""}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" means "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"clear this attribute\""}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sort=null"}]},{"type":"text","value":" will clear sort on a column whereas setting\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sort=undefined"}]},{"type":"text","value":" will leave whatever sort, if any, that is currently present."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The only exception is with regards to Column Width. For width, both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":"\nand "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" will skip the attribute. This is because width is mandatory - there\nis no such thing as a Column with no width."}]},{"type":"element","tagName":"h3","properties":{"id":"width-and-flex","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#width-and-flex","ariaLabel":"width and flex 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":"Width and Flex"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When Flex is active on a Column, the grid ignores the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" attribute when setting the width."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getColumnState()"}]},{"type":"text","value":" is called, both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex"}]},{"type":"text","value":" are returned.\nWhen "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"applyColumnState()"}]},{"type":"text","value":" is called, if "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex"}]},{"type":"text","value":" is present then "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" is\nignored."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to restore a Column's width to the exact same pixel width as specified in the Column State,\nset "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"flex=null"}]},{"type":"text","value":" for that Column's state to turn Flex off."}]},{"type":"element","tagName":"h3","properties":{"id":"row-group-and-pivot","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#row-group-and-pivot","ariaLabel":"row group 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":"Row Group and Pivot"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are two attributes representing both Row Group and Pivot. First using the boolean attributes\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivot"}]},{"type":"text","value":" and then secondly using the index attributes "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":"\nand "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotIndex"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getColumnState()"}]},{"type":"text","value":" is called, all of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivot"}]},{"type":"text","value":",\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pivotIndex"}]},{"type":"text","value":" are returned. When\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"applyColumnState()"}]},{"type":"text","value":" is called, preference is given to the index variants. For example\nif both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":" are present, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"text","value":"\nis applied."}]},{"type":"element","tagName":"h2","properties":{"id":"column-events","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#column-events","ariaLabel":"column events 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":"Column Events"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column Events will get raised when applying a Column State as these events would\nnormally get raised. For example "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnPinned"}]},{"type":"text","value":" event will get raised if applying\nthe state results in a column getting pinned or unpinned."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates events getting raised based on Column State changes.\nThe example logs event information to the console, so best open the example in\na new tab and observe the dev console."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Events","name":"column-events","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"column-group-state","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#column-group-state","ariaLabel":"column group state 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":"Column Group State"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column Group State is concerned with the state of Column Groups. There is only one state attribute for Column Groups,\nwhich is whether the group is open or closed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To get the state of Column Groups use the API method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.getColumnGroupState()"}]},{"type":"text","value":". To\nset the Column Group state use the API method "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnApi.setColumnGroupState(stateItems)"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-api/api.json","section":"state","names":"[\"getColumnGroupState\", \"setColumnGroupState\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates getting and setting Column Group State. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking 'Save State' will save the opened / closed state of column groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking 'Restore State' will restore the previously saved state."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking 'Reset State' will reset the column state to match the Column Definitions,\ni.e. all Column Groups will be closed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Group State","name":"column-group-state","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]}]},"frontmatter":{"title":"Column State","version":null,"enterprise":null,"description":null},"headings":[{"id":"save-and-apply-state","depth":2,"value":"Save and Apply State"},{"id":"column-state-interface","depth":2,"value":"Column State Interface"},{"id":"partial-state","depth":2,"value":"Partial State"},{"id":"applying-partial-state","depth":3,"value":"Applying Partial State"},{"id":"saving-partial-state","depth":3,"value":"Saving Partial State"},{"id":"considerations","depth":2,"value":"Considerations"},{"id":"null-vs-undefined","depth":3,"value":"null vs undefined"},{"id":"width-and-flex","depth":3,"value":"Width and Flex"},{"id":"row-group-and-pivot","depth":3,"value":"Row Group and Pivot"},{"id":"column-events","depth":2,"value":"Column Events"},{"id":"column-group-state","depth":2,"value":"Column Group State"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/column-state","pageName":"column-state"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}