240712_TIL : AG Grid의 domLayout

 

기존에는 테이블(그리드: <AgGridReact>)에서 page size(row 갯수)를 변경할때마다 스크롤이 제일 아래로 계속 붙어서 기존 위치에 그대로 있도록 하고싶었다.

 

처음에는 어디를 수정해야 이 부분이 변경될지 몰라서 헤메었는데 domLayout을 autoHeight에서 print로 바꿨더니 그리드의 내용을 화면에 전체적으로 다 보여주고, 그리드 내에는 스크롤이 생기지 않고 화면에 스크롤이 생기면서 사이즈를 변경해도 스크롤이 아래로 이동하지 않았다.

 

그래서 알아본 domLayout 속성!

 

domLayout 속성의 옵션으로는 세가지가 있다.

1. Normal (기본) : 스타일이 주어지면 그 크기에 맞게 레이아웃 된다
2. autoHeight : 화면의 높이가 테이블의 크기에 따라 자동조절 된다
3. Print : 인쇄 친화적인 레이아웃

조금 더 그리드 스타일과 관련하여 얘기를 해보자면

일단 스크롤이 생기는 부분은 브라우저화면 또는 그리드이다.

그런데 그리드에 스크롤이 생긴다는 것은 그리드의 크기(스타일)를 조절할 수 있다는 것을 뜻한다.

 

1. normal을 선택하면 그리드의 스타일(사이즈)을 설정할 수 있고 row 데이터에 따라 그리드에 스크롤이 생성된다.

2. autoHeight는 그리드의 높이가 자동으로 설정되므로 따로 높이를 설정할 수는 없다. row 데이터가 늘어나면 화면에 상하로 그리드가 채워지면서 화면 스크롤이 생성된다(그리드 내에 스크롤이 생성되는 것이 아니라)

3. Print은 그리드의 높이, 너비 둘다 설정할 수 없음. 설정할 수 없다기 보다 데이터에 따라 그리드의 사이즈가 조절되고, 데이터가 화면을 넘어가면 전체화면의 스크롤로 이동이 가능하다. 

 

 

나는 그리드가 화면을 넘어가지 않고, 그리드 내에 스크롤이 생겨야 했기 때문에 domLayout을 normal로 변경하고 <AgGridReact> 컴포넌트의 상위 <div>에 그리드 사이즈 스타일을 줬다. 그래서 데이터(row)가 해당 사이즈를 넘어가면 그리드 내에 스크롤이 생기고, 페이지 사이즈를 변경 할 때 스크롤이 같이 이동하지 않게 되었다.

 

const gridStyle = { height: "700px", width: "100%" };

<div style={gridStyle}>
  <AgGridReact domLayout={normal} />
</div>

 

 

 

https://www.ag-grid.com/react-data-grid/row-pagination/

React Grid: Row Pagination | AG Grid