[React] 라이브러리 사용 없이 Ag-grid 헤더 고정하기

Ag grid는 편리하게 표를 그리게 해줄 수 있는 도구이다.

 

자바 스크립트 기반이기 때문에 Angular, View, React 등 자바스크립트를 기반으로 하는 웹 프레임워크에서 사용할 수 있다.

 

https://www.ag-grid.com/

Data Grid: AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid

현재 회사에서는 Enterprise 버전을 사용하고 있어서 다양한 기능을 사용할 수 있다.

 

그럼에도 지원하지 않는 기능중에 하나가 바로 헤더 고정!

 

 

 

 

 

스크롤을 훅훅 내렸을때 테이블 열 이름을 위쪽에 고정시키고 싶을때 사용하는 트릭이다.

 

https://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/

Sticky Table Headers & Columns | Codrops

회사에서 쓰는거라 이미지 첨부가 안된당 히히

 

대략 위 처럼 작동한다고 생각하면 된다.

 

 

 

 

 

나는 리액트 js를 사용했다.

 

구현법이 생각보다 어렵지는 않다.

 

자바스크립트와 CSS를 사용하면 쉽게 가능!

 

 

 

 

 

1. 고정하고자 하는 Ag grid header를 선택하기

const agGridHeader = documnet.getElementsByClassName("ag-header")

ag-grid 헤더는 "ag-header"라는 클래스 이름을 사용한다. 구조를 살펴봤을때 헤더를 감싸고 있는 가장 위에있는 div를 선택해야 완전히 CSS를 적용할 수 있다.

 

 

 

 

2. Scroll위치에 따라 헤더의 위치를 고정하는 CSS를 붙였다 땟다 하기

const item = agGridHeader.item(0)

위에 getElementsByClassName으로 element를 가져오게 되면 json형태가 아니라 HTML Element로 가져오게 된다.

이때 해당하는 객체에 접근하기 위해서는 item이라는 함수를 사용해야 한다.

 

나는 한 페이지에 한개의 ag grid의 헤더를 고정해야 하므로 0번째에 있는 객체만 가져왔다.

 

 

 

 

const headerTopPositoin = item.getBoundingClientReact().top;

우리는 현재 헤더가 보이지 않으면 -> 헤더를 보이는 화면안에 고정해야 하므로 현재 헤더의 위치가 필요하다.

 

이때 getBoundingClientReact()의 top정보를 가져오면 된다.

 

 

 

 

window.addEventListner("scroll", () => {        //스크롤 할때
    if(window.scrollY > headerTopPositoin){    // 윈도우의 스크롤 위치가 헤더보다 밑에 있으면
       item.classList.add("columns-fixed");       // 헤더를 고정하는 CSS를 입힌다
    }else{
       item.classList.remove("columns-fixed");
    }
})

addEventListner를 통해 스크롤 시 이벤트를 입힌다.

 

위에 계산한 헤더의 위치와 현재 윈도우의 위치를 비교해서 필요할때 CSS를 입히고 필요 없으면 제거하면 된다.

 

 

 

 

 

3. CSS 업데이트하기

.columns-fixed {
    top : 0px;
    z-index : 10;
    position : fixed;
}

고정된 position을 이용해서 윈도우에 무슨일이 일어나든 위치가 top 0px을 유지하도록 만들어준다.

 

그리고 내용이 겹칠 수 있으므로  z-index까지 설정해주면 완료!

 

 

 

 

 

이렇게 하면 고정된 ag-grid header로 설정할 수 있다.