soom 숨의 블로그 frontend developer

210311 TIL ag-grid Column Sizing

Mar 11, 2021 » 1.5막, TIL (Today I Learned), ag-grid

ag-grid Column Sizing

예전에 문서를 훑고 빠르게 사이징을해서 쓰고 있었는데, 특정 컬럼은 오토사이징을 하지 않고, width 값을 정해줬으면 좋겠다는 요청이 있어서 다시 한번 문서를 찬찬히 봤다.

그냥 보면 또 슥 지나갈 거 같아서, 간단하게나마 번역을 하면서 공부해보았다.

원문링크

#

Size Columns to Fit

api.sizeColumnsToFit()

현재 보이는 컬럼들을 화면에 맞춰줌. 컬럼들은 가능한 너비에 맞게 scale됨 (확대/축소)

auto resize에 특정 컬럼이 추가되는 것을 원하지 않는다면, 컬럼 definition을 suppressSizeToFit=true 로 세팅하면 된다. 이는, 첫번째 컬럼을 고정된 너비로 유지하고 싶은데 다른 컬럼들은 테이블 너비로 채우고 싶을 때 쓸 수 있다.

그리드는 default 너비 컬럼들의 비율을 유지하면서 새로운 컬럼의 너비들을 계산한다. 그래서 예를 들어, 만약 컬럼A가 컬럼B 너비의 두 배 정도 되는 사이즈를 가지고 있다면, api.sizeColumnsToFit() 을 호출한 뒤 컬럼A는 여전히 컬럼B의 두배 사이즈를 유지할 것이다. (컬럼의 min-width나 max-width가 방해하지 않는다는 가정하에)

새로운 너비들을 계산할 땐 현재 너비들보다 컬럼 default 너비들이 사용된다. 이것은 유저가 직접 리사이징한 어떠한 컬럼에 영향을 받지 않고 결과를 결정론적임을 확실하게 한다.

예를 들어, 세 컬럼의 그리드를 가정한다고 할 때, 알고리즘은 아래와 같다. 

scale = 가능한너비 / (w1+w2+w2)
w1 = round(w1*scale)
w2 = round(w2*scale)
w3 = total그리드Width - (w1 + w2)

그리드가 1200px이고, 컬럼들의 기본 너비가 50, 120, 300이라고 가정했을때 계산은 아래와 같다. 
가능한 너비 = 1,198 (좌우 보더 때문에 보통 그리드보다 작다)
scale = 1198 / (50 + 120 + 300) = 2.548936170212766
col 1 = 50 * 2.54 = 127.44 -> rounded = 127
col 2 = 120 * 2.54 = 305.87 -> rounded = 306
col 3 = 1198 - (127 + 306) = 765 // 마지막 col은 모든 공간이 사용되도록 남은 공간 만큼 갖는다.

### Auto-Size Columns

엑셀처럼 각 컬럼은 드래그 하지 않고 헤더 오른쪽을 더블클릭하면 오토 리사이즈될 수 있다. 오토 리사이즈시, 그리드는 컬럼의 셀 내용들에 맞게 최상의 너비를 계산할 것이다.

오토사이징 컬럼과 관련해서는 아래 내용을 참고하라

  • 그리드는 virtually 렌더된 로우만 고려하여 최상의 너비를 계산한다. 예를 들어, 만약 그리드가 10,000 로우를 갖고 있지만 로우 가상화 때문에 오직 50개만 렌더되었다면, 이 50개만이 화면에 표현되는데 고려될 것이다. 렌더된 로우들은 가로 스크롤시 스크린으로 (약간의 buffer 포함. default buffer 사이즈는 20) 볼 수 있는 모든 로우다.

  • 컬럼 오토사이징은 스크린에 렌더된 셀 들을 보고 보이는 것에 기반하여 너비를 계산한다. 컬럼 가상화 때문에 렌더가 안된 컬럼들은 볼 수 없다. 그러므로 스크린에 보이지 않는 컬럼은 오토사이즈 할 수 없다.

    컬럼 가상화는 그리드가 퍼포먼스를 떨어뜨리는 많은 양의 컬럼을 렌더할 때 가로 스크롤 포지션으로 보이는 컬럼들만 렌더하는 테크닉이다. 예를 들어, 그리드는 1,000개 컬럼을 갖고 있지만 만약 가로 스크롤이 오직 10개 컬럼만 보여준다면, 10개만 렌더된다.

    suppressColumnVirtualisation=true 로 값을 주면 컬럼 가상화를 끌 수 있다. 선택은 당신의 것, 컬럼 가상화를 하거나 스크린에서 보이지 않는 컬럼들도 오토사이즈를 하거나

default로 그리드는 헤더에 맞게 컬럼을 리사이즈 할 것이다. 만약 오토사이즈 계산에 헤더가 포함되는 것을 원하지 않는다면 그리드 값에 skipHeaderOnAutoSize=true 를 줘라.

### Auto-Size Column API

컬럼을 오토사이징 하는 것은 그리드 API 메서드를 사용해서 할 수도 있다.

  • autoSizeColumn(colKey, skipHeader): Autosize one column.
  • autoSizeColumns(colKeys, skipHeader): Autosize many columns.
  • autoSizeAllColumns(colKey, skipHeader): Autosize all columns.

만약 skipHeader = true 라면, 헤더는 컬럼 너비를 계산하는데 포함되지 않을 것이다. 컬럼 그룹은 컬럼 너비 계산에 고려되지 않는다.

#

실제 사용 코드

    const autoSizeAll = () => {
        const allColumnIds = [];
        gridColumnApi.getAllColumns().forEach(column => allColumnIds.push(column.colId));;
        gridColumnApi.autoSizeColumns(allColumnIds, false);
    };

    <AgGridReact
    ....
    onFirstDataRendered={() => autoSizeAll()}
    />

AgGridRect 속성중 onGridRead에 sizeColumnsToFil() 값을 줘도 되지만, 렌더 순서에 따라 문제가 있는건지, 잘 될때가 있고 안될떄가 있어서 onFirstDataRendered 값에 size 맞추는 함수를 만들어서 보내줬더니 잘 된다.