{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/column-updating-definitions/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The section "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/column-definitions/"},"children":[{"type":"text","value":"Column Definitions"}]},{"type":"text","value":" explained how to configure columns. It is possible to change the\nconfiguration of the Columns after they are initially set. This section goes through how to update Column Definitions."}]},{"type":"element","tagName":"h2","properties":{"id":"adding-removing-columns","style":"position:relative;"},"children":[{"type":"text","value":"Adding & Removing Columns"},{"type":"element","tagName":"a","properties":{"href":"#adding--removing-columns","ariaLabel":"adding  removing columns permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to add and remove columns by updating the list of Column Definitions provided to the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When new columns are set, the grid will compare with current columns and work out which columns are old (to be removed),\nnew (new columns created) or kept."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates adding and removing columns from a grid. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Selecting the buttons to toggle between including or excluding the medal columns."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Add & Remove Columns","name":"add-remove-columns","type":"mixed","options":"{ \"modules\": true }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example above, note that any state applied to any column (e.g. sort, filter, width) will be kept\nif the column still exists after the new definitions are applied. For example try the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Resize Country column. Note changing columns doesn't impact its width."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sort Country column. Note changing columns doesn't impact its sort."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"changing-column-definition","style":"position:relative;"},"children":[{"type":"text","value":"Updating Column Definitions"},{"type":"element","tagName":"a","properties":{"href":"#updating-column-definitions","ariaLabel":"updating column definitions permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All properties of a column definition can be updated. For example if you want to change the Header Name of a column, you\nupdate the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerName"}]},{"type":"text","value":" on the Column Definition and then set the list of Column Definitions into the grid again."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is not possible to update the Column Definition of just one column in isolation. Only a new set of Column Definitions\ncan be applied."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates updating column definitions to change how columns are configured. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All Columns are provided with just the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" attribute set on the Column Definition."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"'Set Header Names' and 'Remove Header Names' sets and then subsequently removes the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerName"}]},{"type":"text","value":" attribute on all\nColumns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"'Set Value Formatter' and 'Remove Value Formatter' sets and then subsequently removes the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"valueFormatter"}]},{"type":"text","value":" attribute\non all Columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Note that any resizing, sorting etc of the Columns is kept intact between updates to the Column Definitions."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Updating Column Definition","name":"update-column-definition","type":"mixed","options":"{ \"modules\": true }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"changing-column-state","style":"position:relative;"},"children":[{"type":"text","value":"Changing Column State"},{"type":"element","tagName":"a","properties":{"href":"#changing-column-state","ariaLabel":"changing column state permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Parts of the Column Definitions represent Column State. Column State is stateful information and represents changing\nvalues of the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All stateful attributes of Column Definitions are as follows:"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Stateful Attribute"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Initial Attribute"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Description"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"width"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialWidth"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Width of the column."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"flex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialFlex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"The flex value for setting this column's width."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"hide"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialHide"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Whether this column should be hidden."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"pinned"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialPinned"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Whether this column should be pinned."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"sort"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialSort"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"The sort to apply to this column."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"sortIndex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialSortIndex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"The order to apply sorting, if multi column sorting."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialRowGroup"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Whether this column should be a row group."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"rowGroupIndex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialRowGroupIndex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Whether this column should be a row group and in what order."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"pivot"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialPivot"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"If this column should be a pivot."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"pivotIndex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialPivotIndex"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Whether this column should be a pivot and in what order."}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"aggFunc"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"initialAggFunc"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"The function to aggregate this column by if row grouping or pivoting."}]}]}]}]},{"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":"If you are interested in changing Column State only and not the other parts of the column definitions, then consider\nworking with the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/column-state/"},"children":[{"type":"text","value":"Column State"}]},{"type":"text","value":" API instead."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column State is provided as part of Column Definitions to enable these properties to be reactive. Some developers wish\nto update Column Definitions and expect the grid to respond. Other developers may find this non-intuitive and will\nprefer interacting with "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/column-state/"},"children":[{"type":"text","value":"Column State"}]},{"type":"text","value":" directly."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Initial Attribute"}]},{"type":"text","value":" will be used only when the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Column is Created"}]},{"type":"text","value":". The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Stateful Attribute"}]},{"type":"text","value":" will be used when the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Column is Created or Updated"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // using initial values, get applied when Column is created\n        { field: 'country', initialWidth: 200, initialPinned: 'left' },\n        // using stateful values, get applied when Column is created or updated\n        { field: 'country', width: 200, pinned: 'left' }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows Column Definitions using "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"initial attributes"}]},{"type":"text","value":". 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":"initialWidth"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initialSort"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"initialPinned"}]},{"type":"text","value":" are applied only when the columns are created."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you update the width, sort or pinned of a column by interacting with the grid's UI and then hit 'Set Columns with\nInitials', the columns state will not change."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Removing the columns first and then setting them again will use the initial values again."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Updating Column Initial Attributes","name":"changing-default","type":"mixed","options":"{ \"modules\": true }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows Column Definitions using "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"stateful attributes"}]},{"type":"text","value":". 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":"width"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sort"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinned"}]},{"type":"text","value":" stateful attributes are applied whenever Column Definitions are set."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If you update the width, sort or pinned of a column by interacting with the grid's UI and then hit 'Set Columns with\nState', the columns state will change and the changes made via the UI will be lost."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Note the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef"}]},{"type":"text","value":" is used to remove state. For example "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sort=null"}]},{"type":"text","value":" is set so that any sorting the user might of\ndone on another column is cleared down. Otherwise the grid would see the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sort"}]},{"type":"text","value":" attribute as "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" which means the\nstate should not be changed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Updating Column State","name":"changing-state","type":"mixed","options":"{ \"modules\": true }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"null-vs-undefined","style":"position:relative;"},"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":"a","properties":{"href":"#null-vs-undefined","ariaLabel":"null vs undefined permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a stateful attribute is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":" the grid ignores the attribute."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a stateful attribute is set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" the grid clears the attribute."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example the setting "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinned=null"}]},{"type":"text","value":" will clear pinning on a column whereas "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinned=undefined"}]},{"type":"text","value":" means the grid will\nleave pinned state as it is for that column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you don't want to upset any column state (e.g. if you don't want to undo any change the user has made to the columns\nvia the grid's UI, such as applying a sort by clicking on a header, or dragging a column's width) then do not set the\nstate attributes as by default they will be "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"matching-columns","style":"position:relative;"},"children":[{"type":"text","value":"Matching Columns"},{"type":"element","tagName":"a","properties":{"href":"#matching-columns","ariaLabel":"matching columns permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When a new Column Definition is passed to the grid, the grid needs to work out if it's an update of a Column or a new\nColumn."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Most of the time the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" attribute will match the Column. However "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" is both an optional and non-unique\nattribute, e.g. a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"valueGetter"}]},{"type":"text","value":" could be used instead of field, or two columns could share the same field."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Given the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" is not a unique identifier, the grid uses the following rules to match columns:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" provided, match using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Otherwise if "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" provided, match using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Otherwise match using object equality on Column Definition instance"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In other words, to have the grid correctly match Columns make sure each Column has either a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates the different matching strategies. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All columns, with the exception of Country, are matched correctly. This means any column width, sort etc\nwill be kept between changes to the columns. Country will have its state reset, as it will be treated as a new column\neach time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Athlete column is matched by object equality as the same column definition instance is provided to the grid each time."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Age column is matched by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":". The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" is needed as the column has no "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" attribute."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All other columns except Country are matched using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" attribute."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Country column is not matched as it's a different object instance and has no "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" attributes."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Matching Columns","name":"matching-columns","type":"mixed","options":"{ \"modules\": true }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"maintain-column-order","style":"position:relative;"},"children":[{"type":"text","value":"Maintain Column Order"},{"type":"element","tagName":"a","properties":{"href":"#maintain-column-order","ariaLabel":"maintain column order permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When Column Definitions are provided to the grid, the order of the Columns inside the grid is set to\nmatch the order of the newly provided Column Definitions. This means every time Columns are set, the order\nis guaranteed to match the order of the definitions. This is usually the desired and expected behaviour."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may wish for the order of the Columns to not match the Column Definitions. For example suppose the user\nhas rearranged Columns to their desired order, and then the application updates the Column Definitions (e.g.\nchanges the Cell Renderer used), then it would be undesirable to reset the Column order, as the user's\narranged order would be lost."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the desired behaviour is that Column's order should be maintained, set the grid\nproperty "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maintainColumnOrder=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates suppressing the Column order when Column Definitions are updated. The example has two sets of Columns, A and B. The order of the Column Definitions are different, however when switching between the Column sets, the order in the grid is maintained. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the Columns are cleared out (clicking Clear) then when columns are set again the order will match the Column Definition order."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Definition Order","name":"col-def-order","type":"mixed","options":"{ \"modules\": true }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If there are new Columns added (eg the new set of Column Definitions has additional Columns to those currently\npresent), then these new Columns will always be added at the end."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In order for the Column Order to be maintained, the grid needs to match the Columns. This can be done by ensuring\neach Column has a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" defined. Any Columns that can't be matched will be treated as new Columns and\nplaced at the end."}]},{"type":"element","tagName":"h2","properties":{"id":"column-events","style":"position:relative;"},"children":[{"type":"text","value":"Column Events"},{"type":"element","tagName":"a","properties":{"href":"#column-events","ariaLabel":"column events permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column Events will get raised when setting new Column Definitions that update the current Columns. For example\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnPinned"}]},{"type":"text","value":" event will get raised if applying the 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 Definition changes. The example logs event\ninformation to the console, so best open the example in a 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":"mixed","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"refreshing-headers","style":"position:relative;"},"children":[{"type":"text","value":"Refreshing Headers"},{"type":"element","tagName":"a","properties":{"href":"#refreshing-headers","ariaLabel":"refreshing headers permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are creating your own "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/component-header/"},"children":[{"type":"text","value":"Header Components"}]},{"type":"text","value":" then you will need to be aware of\nhow Header Components are refreshed."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All Header Components that still exist after the new Column Definitions are applied (in other words, the Column still\nexists after the update, it was not removed) will have its "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"refresh"}]},{"type":"text","value":" method called."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is up to the Header Component to update based on any changes it may find in the Column Definition."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates refreshing of the headers. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Each column is configured to use a custom Header Component."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The Header Component logs to the console when its lifecycle methods/functions are called."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Toggling between 'Upper Header Names' and 'Lower Header Names' causes the Header Component to refresh."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Toggling between 'Filter On' and 'Filter Off' causes the Header Component to refresh. For frameworks where possible, the Header Component returns "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" which results in the component getting destroyed and recreated."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Toggling between 'Resize On' and 'Resize Off' causes the Header Component to refresh. However there is no change to\nthe Header Component as it doesn't depend on resize - the resize UI is provided by the grid."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Refresh Headers","name":"refresh-headers","type":"mixed"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"column-definition-retrieval","style":"position:relative;"},"children":[{"type":"text","value":"Column Definition Retrieval"},{"type":"element","tagName":"a","properties":{"href":"#column-definition-retrieval","ariaLabel":"column definition retrieval permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There will be times where you'll want to retrieve the current Column Definition in order to perhaps persist them, or\nperhaps retrieve, alter and then re-apply the modified columns."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The current column definitions can be retrieved with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getColumnDefs"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","javascript-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"gridOptions"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"api"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getColumnDefs"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-or-vue-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"gridApi"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getColumnDefs"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","react-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"gridApi"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"getColumnDefs"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"column-groups","style":"position:relative;"},"children":[{"type":"text","value":"Column Groups"},{"type":"element","tagName":"a","properties":{"href":"#column-groups","ariaLabel":"column groups permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column Groups can be updated in the same way as Columns, you just update the Column Group Definition. For expandable\ngroups, to have open / closed state to be maintained, you need to assign "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupId"}]},{"type":"text","value":" in the Column Group Definition."}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            headerName: 'Group A',\n            groupId: 'groupA',\n            children: [\n                { field: 'name' },\n                { field: 'age', columnGroupShow: 'open' }\n            ]\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, note the following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Clicking the top buttons alternates the columns from two sets of definitions."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column Group A - "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupId"}]},{"type":"text","value":" is provided, so expand / collapse is preserved. The Header Name also changes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column Group B - "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupId"}]},{"type":"text","value":" is NOT provided, so expand / collapse is lost, group always closes when updates happen."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column Group C - "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupId"}]},{"type":"text","value":" is provided, so expand / collapse is preserved. Child columns are changed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Groups","name":"column-groups","type":"mixed","options":"{ \"modules\": true }"},"children":[]}]}]},"frontmatter":{"title":"Updating Column Definitions","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"adding--removing-columns","depth":2,"value":"Adding & Removing Columns"},{"id":"updating-column-definitions","depth":2,"value":"Updating Column Definitions"},{"id":"changing-column-state","depth":2,"value":"Changing Column State"},{"id":"null-vs-undefined","depth":2,"value":"null vs undefined"},{"id":"matching-columns","depth":2,"value":"Matching Columns"},{"id":"maintain-column-order","depth":2,"value":"Maintain Column Order"},{"id":"column-events","depth":2,"value":"Column Events"},{"id":"refreshing-headers","depth":2,"value":"Refreshing Headers"},{"id":"column-definition-retrieval","depth":2,"value":"Column Definition Retrieval"},{"id":"column-groups","depth":2,"value":"Column Groups"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"react","srcPath":"/column-updating-definitions","pageName":"column-updating-definitions"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}