ag-grid：滚动时将标题保持在顶部

Question

I cannot keep table header on top of div while scrolling an ag-grid div. Is there a specific ag- class to use to obtain this?

Thanks

EDIT:

there is the code:

HTML:

<md-tab ng-repeat="tab in mbpTabs"> 
        <md-tab-label>{{tab.title}}</md-tab-label>  
        <md-tab-body>
            <div ag-grid="tab.mbpTable.table" class="ag-dark ag-scrolls"></div>
        </md-tab-body> 
    </md-tab> 

JS grid definition following:

this.cols = [{headerName: "Security",marryChildren: true,
    children: [{headerName: "CTRL", field: this.FIELD_KEY_CTRL,hide: true,cellRenderer: MbpTable.prototype.ctrlRenderer.bind(this)},
               {headerName: "Id", field: this.FIELD_KEY_ID,width: 0,hide: true},
               {headerName: "Issuer", field: this.FIELD_KEY_ISSUER,width: 100},
               {headerName: "Cusip", field: this.FIELD_KEY_CUSIP,width: 80,},
               {headerName: "Board Label", field: this.FIELD_KEY_BOARD_LABEL,width: 150}]
},
{headerName: 'Best',marryChildren: true,
    children: [{headerName: "Bid Size", field: this.FIELD_KEY_BEST_BID_SIZE, width: 125,cellClass:"mbp-ag-cell-best-bid",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
               {headerName: "Bid Price", field: this.FIELD_KEY_BEST_BID_PRICE, width: 125,cellClass:"mbp-ag-cell-best-bid",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
               {headerName: "Ask Price", field: this.FIELD_KEY_BEST_ASK_PRICE, width: 125,cellClass:"mbp-ag-cell-best-ask",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)},
               {headerName: "Ask Size", field: this.FIELD_KEY_BEST_ASK_SIZE, width: 125,cellClass:"mbp-ag-cell-best-ask",cellRenderer: MbpTable.prototype.szPriceRenderer.bind(this)}]
},
{headerName: this.headerMyOrder,marryChildren: true,
    children: [{headerName: "Bid Size", field: this.FIELD_KEY_ORDER_BID_SIZE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.sizeValueHandler.bind(this)},
               {headerName: "Bid Price", field: this.FIELD_KEY_ORDER_BID_PRICE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.priceValueHandler.bind(this)},//cellEditor: NumericCellEditor},
               {headerName: "",headerCellTemplate:this.headerMyBidOrder, field: this.FIELD_KEY_ORDER_BID_ACTION,minWidth:18,maxWidth:18,width:18,cellClass:["mbp-ag-cell-order","mbp-ag-cell-order-action"],cellRenderer: MbpTable.prototype.bidOrderRenderer.bind(this)},
               {headerName: "Ask Price", field: this.FIELD_KEY_ORDER_ASK_PRICE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.priceValueHandler.bind(this)},//cellEditor: NumericCellEditor},
               {headerName: "Ask Size", field: this.FIELD_KEY_ORDER_ASK_SIZE, width: 80,cellClass:"mbp-ag-cell-order",editable: true,cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this),cellEditor: "text",newValueHandler: MbpTable.prototype.sizeValueHandler.bind(this)},
               {headerName: "",headerCellTemplate:this.headerMyAskOrder, field: this.FIELD_KEY_ORDER_ASK_ACTION,minWidth:18,maxWidth:18,width:18,cellClass:["mbp-ag-cell-order","mbp-ag-cell-order-action"],cellRenderer: MbpTable.prototype.askOrderRenderer.bind(this)}]}];



    this.table={
        columnDefs: this.cols,
        rowData: MbpTable.prototype.createRndRows(numRows,offset,this),
        rowSelection: 'multiple',
        enableColResize: true,
        enableSorting: true,
        enableFilter: true,
        groupHeaders: true,
        ...
};

I omitted following options in table definition here for business reasons.

ag- header classes in CSS have not been modified.

Answer 1

I want the header in my table always visible even if you scroll down in the window like this. Not sure if this is what the OP want but here is my solution.

First you need to get the header element and the body element of the table

header = document.querySelector('[ref="headerRoot"]');
body = document.querySelector('[ref="eBodyViewport"]');

// More on this later
original.position = header.style.position;
original.top = header.style.top;
original.zIndex = header.style.zIndex;

Add a scroll handler to the window object which will execute the logic below every time the user scrolls

window.addEventListener("scroll", () => {
  // More on this below
})

The logic is simple. It makes the header sticky or not depend on its position

const shouldStick = header.getBoundingClientRect().top <= 0;
const shouldUnstick = body.getBoundingClientRect().top -
    header.getBoundingClientRect().height > 0;

if (shouldStick) { stick(header); }
if (shouldUnstick) { unstick(header); }

Finally add some css style to make it fixed at the top of the window

function stick(header) {
  header.style.position = "fixed";
  header.style.top = "0";
  // this is optional, but if you have other contents that overlap the
  // header you may want to adjust the zIndex accordingly
  header.style.zIndex = "2";
}

function unstick(header) {
  header.style.position = original.position;
  header.style.top = original.top;
  header.style.zIndex = original.zIndex;
}

Here is the example implementation in React. All you need to do is copy this hook and paste it in the component's render method. That's it.

import { useCallback, useRef, useEffect } from "react";

const useStickyHeader = () => {
  const headerElementRef = useRef();
  const bodyElementRef = useRef();
  const stickyRef = useRef(false);
  const originalStyles = useRef({ position: "", top: "", zIndex: "" });

  useEffect(() => {
    headerElementRef.current = document.querySelector('[ref="headerRoot"]');
    bodyElementRef.current = document.querySelector('[ref="eBodyViewport"]');

    const header = headerElementRef.current;

    originalStyles.current.position = header.style.position;
    originalStyles.current.top = header.style.top;
    originalStyles.current.zIndex = header.style.zIndex;
  }, []);

  const onScroll = useCallback(() => {
    const header = headerElementRef.current;
    const body = bodyElementRef.current;
    if (!header || !body) return;

    let shouldStick = false;
    let shouldUnstick = false;

    if (!stickyRef.current) {
      shouldStick = header.getBoundingClientRect().top <= 0;
      if (shouldStick) stickyRef.current = true;
    } else {
      shouldUnstick =
        body.getBoundingClientRect().top -
          header.getBoundingClientRect().height >
        0;
      if (shouldUnstick) stickyRef.current = false;
    }

    if (shouldStick) {
      header.style.position = "fixed";
      header.style.top = "0";
      // this is optional, but if you have other contents that overlap the
      // header you may want to adjust zIndex accordingly
      header.style.zIndex = "2";
    }
    if (shouldUnstick) {
      const original = originalStyles.current;
      header.style.position = original.position;
      header.style.top = original.top;
      header.style.zIndex = original.zIndex;
    }
  }, []);

  useEffect(() => {
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  });

  return stickyRef;
};

Usage

function GridExample() {
  useStickyHeader();

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div className="grid-wrapper">
        <div
          style={{
            height: "100%",
            width: "100%"
          }}
          className="ag-theme-balham"
        >
          <AgGridReact
            ...
          />
        </div>
      </div>
    </div>
  );
}

Live example

Answer 2

HTML: gridAutoHeight = true in ag-grid-angular html tag

TS: window.addEventListener('scroll', this.scroll); in ngOnit()

scroll = (event: any): void => {
let headerElementRef;
let bodyElementRef;
headerElementRef = document.querySelector('[ref="headerRoot"]');
bodyElementRef = document.querySelector('[ref="eBodyViewport"]');
const nav = headerElementRef;
const body = bodyElementRef;
const offset = nav.getBoundingClientRect();
if (!nav) return;

  if (window.pageYOffset > offset.top && !(body.getBoundingClientRect().top - nav.getBoundingClientRect().height > 0)) {
    nav.style.position = 'fixed';
    nav.style.top = 0;
    nav.style.zIndex = "2";
    nav.style.width = this.totalGridWidth + 'px';
  } else {
    nav.style.position = 'relative';
    nav.style.top = '';
    nav.style.zIndex = "";
    nav.style.width = this.totalGridWidth + 'px';
  }

}

Answer 3

Simple trick is to add css for rows container.

.ag-body-viewport {
    overflow: scroll;
    height: 300px;
}

Update height or width accordingly.

Answer 4

SOLVED: I needed to add height attribute to the div.

Thank you all