CODEWITHSUNDEEP
javascriptangularag-gridag-grid-angular
Ollie F
Ollie F

Reputation: 67

AG-Grid: Is it possible to move the status bar / status panel to the top of the grid, between the header & rows?

We have a requirement to display a custom Angular component at the top of the grid, between the header rows and data rows, similar to a Pinned Row, but with our own custom content that spans all the columns.

The Status Bar Panel looks very similar to what we need, but the examples only show it rendered at the bottom of the grid. I was wondering if there was a way we could make it render at the top. Are there any alternatives?

The example renders like this: Status Bar Bottom

We want to acheive something like this: Status Bar Top

Upvotes: 0

Views: 3650

Answers (1)

Paritosh
Paritosh

Reputation: 11570

You can achieve this by CSS trick.

Have a look at this plunk: Status Bar Panel - at top

.ag-theme-alpine .ag-status-bar {
  font-weight: normal;
  position: absolute;
  top: 50px;
  right: 5px;
  border-top: none !important;
}
.ag-theme-alpine .ag-body-viewport {
  top: 50px;
  border-top: solid 1px lightgrey;
}

Upvotes: 3

Related Questions