{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/column-definitions/",
    "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":"Each column in the grid is defined using a Column Definition ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ColDef"}]},{"type":"text","value":"). Columns are positioned in the grid according to the order the Column Definitions are specified in the Grid Options."}]}]}]},{"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":"aDCepyF_DUY","title":"React Column Definitions","header":"true"},"children":[{"type":"text","value":"\nEach column in the grid is defined using a Column Definition ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ColDef"}]},{"type":"text","value":"). Columns are positioned in the grid according to the order the Column Definitions are specified in the Grid Options.\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example shows a simple grid with 3 columns defined:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // define 3 columns\n    columnDefs: [\n        { field: 'athlete' },\n        { field: 'sport' },\n        { field: 'age' },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/column-properties/"},"children":[{"type":"text","value":"Column Properties"}]},{"type":"text","value":" for a list of all properties that can be applied to a column."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want the columns to be grouped, you can include them as children like so:"}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // put the three columns into a group\n    columnDefs: [\n        {\n            headerName: 'Group A',\n            children: [\n                { field: 'athlete' },\n                { field: 'sport' },\n                { field: 'age' }\n            ]\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Groups are explained in more detail in the section "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/column-groups/"},"children":[{"type":"text","value":"Column Groups"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"accessing-row-data-values","style":"position:relative;"},"children":[{"type":"text","value":"Accessing Row Data Values"},{"type":"element","tagName":"a","properties":{"href":"#accessing-row-data-values","ariaLabel":"accessing row data values permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.field"}]},{"type":"text","value":" property is used to access values from the row data object. In most cases the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" will be a property name from the row data object.\nIf, however, the row data contains nested objects, you can use dot notation to reference deep property values. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, if the row data has an object property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"medals"}]},{"type":"text","value":" that contains the individual medal counts, then to display gold medals won use the field value "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'medals.gold'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    rowData: [\n        {\n            athlete: 'Michael Phelps',\n            medals: {\n                gold: 8, silver: 1, bronze: 0\n            }\n        }\n    ],\n    columnDefs: [\n        { field: 'athlete' },\n        // Using dot notation to access nested property\n        { field: 'medals.gold', headerName: 'Gold' },\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For alternative ways to provide cell data, such as value getters, see the documentation on "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/value-getters/"},"children":[{"type":"text","value":"Value Getters"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Nested Row Data Example","name":"column-fields","type":"generated"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"suppress-field-dot-notation","style":"position:relative;"},"children":[{"type":"text","value":"Suppress Field Dot Notation"},{"type":"element","tagName":"a","properties":{"href":"#suppress-field-dot-notation","ariaLabel":"suppress field dot notation 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 your row data objects have dots in their property names, that should "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" be treated as deep references, then set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressFieldDotNotation"}]},{"type":"text","value":" to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":". This prevents the dots being interpreted as deep references across all column definitions."}]},{"type":"element","tagName":"h2","properties":{"id":"default-column-definitions","style":"position:relative;"},"children":[{"type":"text","value":"Custom Column Types"},{"type":"element","tagName":"a","properties":{"href":"#custom-column-types","ariaLabel":"custom column types 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":"In addition to the above, the grid provides additional ways to help simplify and avoid duplication of column definitions. This is done through the following:"}]},{"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":"defaultColDef"}]},{"type":"text","value":": contains properties that all columns will inherit."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColGroupDef"}]},{"type":"text","value":": contains properties that all column groups will inherit."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnTypes"}]},{"type":"text","value":": specific column types containing properties that column definitions can inherit."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Default columns and column types can specify any of the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.4/column-properties/"},"children":[{"type":"text","value":"column properties"}]},{"type":"text","value":" available on a column."}]},{"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":"Column Types are designed to work on Columns only, i.e. they won't be applied to Column Groups."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following code snippet demonstrates these three properties:"}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        // uses the default column properties\n        { headerName: 'Col A', field: 'a'},\n        // overrides the default with a number filter\n        { headerName: 'Col B', field: 'b', filter: 'agNumberColumnFilter' },\n        // overrides the default using a column type\n        { headerName: 'Col C', field: 'c', type: 'nonEditableColumn' },\n        // overrides the default using a multiple column types\n        { headerName: 'Col D', field: 'd', type: ['dateColumn', 'nonEditableColumn'] }\n    ],\n    // a default column definition with properties that get applied to every column\n    defaultColDef: {\n        // set every column width\n        width: 100,\n        // make every column editable\n        editable: true,\n        // make every column use 'text' filter by default\n        filter: 'agTextColumnFilter',\n    },\n    // if we had column groups, we could provide default group items here\n    defaultColGroupDef: {},\n    // define a column type (you can define as many as you like)\n    columnTypes: {\n        nonEditableColumn: { editable: false },\n        dateColumn: {\n            filter: 'agDateColumnFilter',\n            filterParams: { comparator: myDateComparator },\n            suppressMenu: true\n        }\n    }\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When the grid creates a column it starts with the default column definition, then adds properties defined via column types and then finally adds in properties from the specific column definition."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"At each stage if a column property already exists, the latter will override the existing value. For example, if the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"defaultColDef"}]},{"type":"text","value":" sets "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"editable: true"}]},{"type":"text","value":" but a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnType"}]},{"type":"text","value":" sets "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"editable: false"}]},{"type":"text","value":" then this column will not be editable. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example, the following is an outline of the steps used when creating 'Col C' shown above:"}]},{"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","comment"]},"children":[{"type":"text","value":"// Step 1: the grid starts with an empty definition"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Step 2: default column properties are merged in"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" width"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" editable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'agTextColumnFilter'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Step 3: column type properties are merged in (using the 'type' property), overriding where necessary"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" width"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" editable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'agTextColumnFilter'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Step 4: finally column definition properties are merged in, overriding where necessary"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" headerName"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Col C'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" field"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'c'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" width"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" editable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'agTextColumnFilter'"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following example demonstrates the different configuration properties in action."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Definition Example","name":"column-definition","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"right-aligned-and-numeric-columns","style":"position:relative;"},"children":[{"type":"text","value":"Right Aligned and Numeric Columns"},{"type":"element","tagName":"a","properties":{"href":"#right-aligned-and-numeric-columns","ariaLabel":"right aligned and numeric 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":"The grid provides a handy shortcut for aligning columns to the right. Setting the column definition type to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rightAligned"}]},{"type":"text","value":" aligns the column header and contents to the right, which makes the scanning of the data easier for the user."}]},{"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":"Because right alignment is used for numbers, we also provided an alias "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"numericColumn"}]},{"type":"text","value":" that can be used to align the header and cell text to the right."}]}]}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { headerName: 'Column A', field: 'a' },\n        { headerName: 'Column B', field: 'b', type: 'rightAligned' },\n        { headerName: 'Column C', field: 'c', type: 'numericColumn' },\n    ]\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rightAligned"}]},{"type":"text","value":" column type works by setting the header and cell class properties as follows. If you manually set either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"headerClass"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellClass"}]},{"type":"text","value":" then you may need to include the right aligned CSS classes yourself as column type properties are overridden by explicitly defined column properties."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"ts"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-ts"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-ts"]},"children":[{"type":"text","value":"rightAligned"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    headerClass"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ag-right-aligned-header'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    cellClass"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ag-right-aligned-cell'"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"column-ids","style":"position:relative;"},"children":[{"type":"text","value":"Column IDs"},{"type":"element","tagName":"a","properties":{"href":"#column-ids","ariaLabel":"column ids 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":"Each column generated by the grid is given a unique Column ID, which is used in parts of the Grid API."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using the API and the column IDs are a little complex (e.g. if two columns have the same "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":", or if you are using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"valueGetter"}]},{"type":"text","value":" instead of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":") then it is useful to understand how column IDs are generated."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the user provides "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" in the column definition, then this is used, otherwise the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" is used. If both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" exist then "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" gets preference. If neither "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":" nor "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":" exists then a number is assigned. Finally, the ID is ensured to be unique by appending "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'_n'"}]},{"type":"text","value":" if necessary, where "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" is the first positive number that allows uniqueness."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the example below, columns are set up to demonstrate the different ways IDs are generated. Open the example in a new tab and observe the output in the dev console. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Col 1 and Col 2 both use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colId"}]},{"type":"text","value":". The grid appends "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'_1'"}]},{"type":"text","value":" to Col 2 to make the ID unique."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Col 3 and Col 4 both use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"field"}]},{"type":"text","value":". The grid appends "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'_1'"}]},{"type":"text","value":" to Col 4 to make the ID unique."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Col 5 and Col 6 have neither "},{"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":" so the grid generates column IDs."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column IDs","name":"column-ids","type":"generated"},"children":[]}]}]},"frontmatter":{"title":"Column Definitions","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"accessing-row-data-values","depth":2,"value":"Accessing Row Data Values"},{"id":"suppress-field-dot-notation","depth":3,"value":"Suppress Field Dot Notation"},{"id":"custom-column-types","depth":2,"value":"Custom Column Types"},{"id":"right-aligned-and-numeric-columns","depth":2,"value":"Right Aligned and Numeric Columns"},{"id":"column-ids","depth":2,"value":"Column IDs"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"angular","srcPath":"/column-definitions","pageName":"column-definitions"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}