{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-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.1.0/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.1.0/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":"element","tagName":"a","properties":{"href":"#accessing-row-data-values","ariaLabel":"accessing row data values 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":"Accessing Row Data Values"}]},{"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.1.0/value-getters/"},"children":[{"type":"text","value":"Value Getters"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"suppress-field-dot-notation","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#suppress-field-dot-notation","ariaLabel":"suppress field dot notation 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":"Suppress Field Dot Notation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If your row data objects have dots in their property names, that should not 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":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Nested Row Data Example","name":"column-fields","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"default-column-definitions","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#custom-column-types","ariaLabel":"custom column types 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":"Custom Column Types"}]},{"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.1.0/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":"element","tagName":"a","properties":{"href":"#right-aligned-and-numeric-columns","ariaLabel":"right aligned and numeric columns permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Right Aligned and Numeric Columns"}]},{"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":"element","tagName":"a","properties":{"href":"#column-ids","ariaLabel":"column ids 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 IDs"}]},{"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,"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":"react","srcPath":"/column-definitions","pageName":"column-definitions"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}