Vue Data GridStatus Bar

The Status Bar appears below the grid and contains Status Bar Panels. Panels can be Grid Provided Panels or Custom Status Bar Panels.

Configure the Status Bar with the statusBar grid property. The property takes a list of Status Bar Panels.

<ag-grid-vue
    :statusBar="statusBar"
    /* other grid options ... */>
</ag-grid-vue>

this.statusBar = {
    statusPanels: [
        { statusPanel: 'agTotalAndFilteredRowCountComponent' },
        { statusPanel: 'agTotalRowCountComponent' },
        { statusPanel: 'agFilteredRowCountComponent' },
        { statusPanel: 'agSelectedRowCountComponent' },
        { statusPanel: 'agAggregationComponent' }
    ]
};

Some Status Panels only show when a Cell Selection is present.

Provided Panels

The Status Bar Panels provided by the grid are as follows:

• agTotalRowCountComponent: Provides the total row count.
• agTotalAndFilteredRowCountComponent: Provides the total and filtered row count.
• agFilteredRowCountComponent: Provides the filtered row count.
• agSelectedRowCountComponent: Provides the selected row count.
• agAggregationComponent: Provides aggregations on the selected range.

Configuration

The align property can be left, center or right (default).

The key is used for Accessing Panel Instances via the grid API getStatusPanel(key). This can be useful for interacting with Custom Panels.

Additional props are passed to Status Panels using statusPanelParams. The provided panel agAggregationComponent can have aggFuncs passed.

<ag-grid-vue
    :statusBar="statusBar"
    /* other grid options ... */>
</ag-grid-vue>

this.statusBar = {
    statusPanels: [
        {
            key: 'aUniqueString',
            statusPanel: 'agTotalRowCountComponent',
            align: 'left'
        },
        {
            statusPanel: 'agAggregationComponent',
            statusPanelParams: {
                // possible values are: 'count', 'sum', 'min', 'max', 'avg'
                aggFuncs: ['avg', 'sum']
            }
        }
    ]
};

Labels (e.g. "Rows", "Total Rows", "Average") and number formatting are changed using the grid's Localisation.

The Aggregation Panel agAggregationComponent will only work on number values.

The Status Bar sizes its height to fit content. When no panels are visible, the Status Bar will have zero height (not be shown). Add CSS to have a fixed height on the Status Bar.

.ag-status-bar {
    min-height: 35px;
}

Custom Panels

Applications that are using Server-side Data or which require bespoke Status Bar Panels can provide their own custom Status Bar panels.

interface IStatusPanel {
    // Called when the `statusBar` grid option is updated.
    // If this method returns `true`, the grid assumes that
    // the status panel has updated with the latest params,
    // and takes no further action. If this method returns `false`,
    // or is not implemented, the grid will destroy and
    // recreate the status panel.
    refresh(params: IStatusPanelParams): boolean;

    // Gets called when the grid is destroyed.
    // If your status bar components needs to do any cleanup, do it here.
    destroy(): void;
}

Custom Panels are configured alongside Provided Panels.

this.gridOptions = {
    statusBar: {
        statusPanels: [
            {
                statusPanel: 'myStatusBarComponent'
            },
            {
                statusPanel: 'agAggregationComponent'
            }
        ]
    },
    // ...other properties
}

Custom Panels can listen to grid events to react to grid changes. An easy way to listen to grid events from inside a Status Panel is using the API provided via props.

export default {
  methods: {
    updateStatusBar() { ... },
  },
  created() {
    // Remove event listener when destroyed
    this.params.api.addEventListener(
      'modelUpdated',
      this.updateStatusBar.bind(this)
    );
  },
};

Accessing Instances

Use the grid API getStatusPanel(key) to access a panel instance. This can be used to expose Custom Panels to the application.