{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/status-bar/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The Status Bar appears below the grid and holds components that typically display information about the data in the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Within the Status Bar you can specify which Status Bar Panels you want to display."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Status Bar Panels allow you to add your own "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-status-bar/"},"children":[{"type":"text","value":"Custom Components"}]},{"type":"text","value":" to the grid's Status Bar. Use this when the provided Status Bar Panels do not meet your requirements."}]},{"type":"element","tagName":"h2","properties":{"id":"grid-provided-status-bar-components","style":"position:relative;"},"children":[{"type":"text","value":"Grid-Provided Status Bar Components"},{"type":"element","tagName":"a","properties":{"href":"#grid-provided-status-bar-components","ariaLabel":"grid provided status bar components 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 Status Bar components provided by the grid are as follows:"}]},{"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":"agTotalRowCountComponent"}]},{"type":"text","value":": Provides the total row count."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agTotalAndFilteredRowCountComponent"}]},{"type":"text","value":": Provides the total and filtered row count."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agFilteredRowCountComponent"}]},{"type":"text","value":": Provides the filtered row count."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agSelectedRowCountComponent"}]},{"type":"text","value":": Provides the selected row count."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agAggregationComponent"}]},{"type":"text","value":": Provides aggregations on the selected range."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"configuring-the-status-bar","style":"position:relative;"},"children":[{"type":"text","value":"Configuring the Status Bar"},{"type":"element","tagName":"a","properties":{"href":"#configuring-the-status-bar","ariaLabel":"configuring the status bar 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 Status Bar is configured using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"statusBar"}]},{"type":"text","value":" grid option. The option takes a list of components identified by component name, alignment and additionally component parameters."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" is not specified the components will default to being aligned to the right."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"key"}]},{"type":"text","value":" is useful for "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-status-bar/#accessing-status-bar-panel-instances"},"children":[{"type":"text","value":"Accessing Status Bar Panel Instances"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The snippet below shows a Status Bar configured with the grid-provided components."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    statusBar: {\n        statusPanels: [\n            {\n                statusPanel: 'agTotalAndFilteredRowCountComponent',\n                align: 'left',\n            }\n        ]\n    }\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"component-alignment","style":"position:relative;"},"children":[{"type":"text","value":"Component Alignment"},{"type":"element","tagName":"a","properties":{"href":"#component-alignment","ariaLabel":"component alignment 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":"Components can be aligned either to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"left"}]},{"type":"text","value":", in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"center"}]},{"type":"text","value":" of the bar or on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"right"}]},{"type":"text","value":" (the default). Components within these alignments will be added in the order specified."}]},{"type":"element","tagName":"h3","properties":{"id":"labels-and-number-formats","style":"position:relative;"},"children":[{"type":"text","value":"Labels and Number Formats"},{"type":"element","tagName":"a","properties":{"href":"#labels-and-number-formats","ariaLabel":"labels and number formats 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":"Labels within the Status Bar (ie. \"Rows\", \"Total Rows\", \"Average\") and number formatters such as the decimal and thousand separators can be changed by using the grid's "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/localisation/"},"children":[{"type":"text","value":"Localisation"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"simple-status-bar-example","style":"position:relative;"},"children":[{"type":"text","value":"Simple Status Bar Example"},{"type":"element","tagName":"a","properties":{"href":"#simple-status-bar-example","ariaLabel":"simple status bar example 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 example below shows a Status Bar with a simple configuration. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The total and filtered row count is displayed using the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agTotalAndFilteredRowCountComponent"}]},{"type":"text","value":" component (aligned to the left)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The total row count is displayed by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agTotalRowCountComponent"}]},{"type":"text","value":" component (centered)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The row count after filtering is displayed by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agFilteredRowCountComponent"}]},{"type":"text","value":" component."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The selected row count is displayed by the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agSelectedRowCountComponent"}]},{"type":"text","value":" component."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a range is selected (by dragging the mouse over a range of cells) the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agAggregationComponent"}]},{"type":"text","value":" displays the summary information Average, Count, Min, Max and Sum. Only Count is displayed if the range contains no numeric data."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Status Bar Simple","name":"status-bar-simple","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"statusbar\", \"range\"], \"exampleHeight\": 640 }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"configuring-the-aggregation-panel","style":"position:relative;"},"children":[{"type":"text","value":"Configuring the Aggregation Panel"},{"type":"element","tagName":"a","properties":{"href":"#configuring-the-aggregation-panel","ariaLabel":"configuring the aggregation panel 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 have multiple ranges selected (by holding down "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Ctrl"}]},{"type":"text","value":" while dragging) and a cell is in multiple ranges, the cell will be only included once in the aggregation."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If the cell does not contain a simple number value, then it will not be included in average, min max or sum, however it will still be included in count."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In the grid below, select a range by dragging the mouse over cells and notice the Status Bar showing the aggregation values as you drag."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Status Bar","name":"status-bar","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"statusbar\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default all of the aggregations available will be displayed but you can configure the aggregation component to only show a subset of the aggregations."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this code snippet we have configured the aggregation component to only show "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"min, max and average"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    statusBar: {\n        statusPanels: [\n            {\n                statusPanel: 'agAggregationComponent',\n                statusPanelParams: {\n                    // possible values are: 'count', 'sum', 'min', 'max', 'avg'\n                    aggFuncs: ['min', 'max', 'avg']\n                }\n            }\n        ]\n    }\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"accessing-status-panels","style":"position:relative;"},"children":[{"type":"text","value":"Accessing Status Panels"},{"type":"element","tagName":"a","properties":{"href":"#accessing-status-panels","ariaLabel":"accessing status panels 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":"Accessing status panel instances is possible using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.getStatusPanel(key)"}]},{"type":"text","value":". The key will be the value provided in the component configuration (see above), but will default to the component name if not provided."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-status-bar/#accessing-status-bar-comp-instances"},"children":[{"type":"text","value":"Accessing Status Bar Panel Instances"}]},{"type":"text","value":" for more information."}]},{"type":"element","tagName":"h2","properties":{"id":"configuration-with-component-parameters","style":"position:relative;"},"children":[{"type":"text","value":"Configuration with Component Parameters"},{"type":"element","tagName":"a","properties":{"href":"#configuration-with-component-parameters","ariaLabel":"configuration with component parameters 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":"Some of the status panel components, or your own custom components, can take further parameters. These are provided using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"statusPanelParams"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The snippet below shows a Status Bar configured with the grid-provided aggregation component only. The component is further configured to only show average and sum functions."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    statusBar: {\n        statusPanels: [\n            {\n                statusPanel: 'agAggregationComponent',\n                statusPanelParams: {\n                    // possible values are: 'count', 'sum', 'min', 'max', 'avg'\n                    aggFuncs: ['avg', 'sum']\n                }\n            }\n        ]\n    }\n}\n"}]},{"type":"element","tagName":"h3","properties":{"id":"example-component-parameters","style":"position:relative;"},"children":[{"type":"text","value":"Example Component Parameters"},{"type":"element","tagName":"a","properties":{"href":"#example-component-parameters","ariaLabel":"example component parameters 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 example below demonstrates providing parameters to the Status Bar components. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The component "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agAggregationComponent"}]},{"type":"text","value":" is provided with parameters "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"aggFuncs: ['avg', 'sum']"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When a range of numbers is selected, only "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"avg"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sum"}]},{"type":"text","value":" functions are displayed."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Status Bar Params","name":"status-bar-params","type":"generated","options":"{ \"enterprise\": true, \"modules\": [\"clientside\", \"statusbar\", \"range\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"status-bar-height","style":"position:relative;"},"children":[{"type":"text","value":"Status Bar Height"},{"type":"element","tagName":"a","properties":{"href":"#status-bar-height","ariaLabel":"status bar height 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 Status Bar sizes its height to fit content. That means when no components are visible, the Status Bar will have zero height - it will not be shown."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To force the the Status Bar to have a fixed height, add CSS to the Status Bar div as follows:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"css"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","selector"]},"children":[{"type":"text","value":".ag-status-bar"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"min-height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 35px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"custom-status-bar-components","style":"position:relative;"},"children":[{"type":"text","value":"Custom Status Bar Components"},{"type":"element","tagName":"a","properties":{"href":"#custom-status-bar-components","ariaLabel":"custom status bar components 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":"Applications that are not using the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/client-side-model/"},"children":[{"type":"text","value":"Client-Side Row Model"}]},{"type":"text","value":" or which require bespoke Status Bar Panels can provide their own custom Status Bar components."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more details see the following section: "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/component-status-bar/"},"children":[{"type":"text","value":"Status Bar Panels (Components)"}]},{"type":"text","value":"."}]}]},"frontmatter":{"title":"Status Bar","version":null,"enterprise":true,"sideMenu":null,"description":null},"headings":[{"id":"grid-provided-status-bar-components","depth":2,"value":"Grid-Provided Status Bar Components"},{"id":"configuring-the-status-bar","depth":2,"value":"Configuring the Status Bar"},{"id":"component-alignment","depth":3,"value":"Component Alignment"},{"id":"labels-and-number-formats","depth":3,"value":"Labels and Number Formats"},{"id":"simple-status-bar-example","depth":3,"value":"Simple Status Bar Example"},{"id":"configuring-the-aggregation-panel","depth":3,"value":"Configuring the Aggregation Panel"},{"id":"accessing-status-panels","depth":3,"value":"Accessing Status Panels"},{"id":"configuration-with-component-parameters","depth":2,"value":"Configuration with Component Parameters"},{"id":"example-component-parameters","depth":3,"value":"Example Component Parameters"},{"id":"status-bar-height","depth":2,"value":"Status Bar Height"},{"id":"custom-status-bar-components","depth":2,"value":"Custom Status Bar Components"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/status-bar","pageName":"status-bar"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}