react에서 사용하기 좋은 무료 데이터 그리드 2가지

1. react-data-grid

npm: https://www.npmjs.com/package/react-data-grid

demo: https://comcast.github.io/react-data-grid/

demo code: https://github.com/Comcast/react-data-grid/tree/main/website

특징: headless 아님

장점: 컬럼 순서 변경하기 등은 자체 제작하여 내장되어있고, 가상화가 기본 동작으로, 별다른 커스텀 없이 가볍게 동작함. 그룹화, export 기능등 예제도 풍부함.

단점: 정렬 코어, 필터 코어 등은 내장이 안되어 있어서 자체 제작 필요. 그 외 커스텀 속성을 추가할 만한 자리를 기본제공하지 않아서 타입을 약간 손볼 필요있음. 컬럼 숨기기는 없는데 여긴 rows, columns 같이 한번에 지정하는 grid 방식이라 사실상 columns를 새로 보내야 해서... 이 리렌더는 좀 무거운 편.

사담으로는 베타 버전 하나 올라갈때도 내부 코드가 엄청 바뀌고, 내부에서 사용하는 라이브러리도 잘 바뀌는 편이라 여러가지로 공부가 됨(p)

 

 

2. tanstack table (구 react table)

npm: https://www.npmjs.com/package/@tanstack/react-table

demo: https://tanstack.com/table/latest/docs/framework/react/examples/basic

특징: headless 임

장점: 내장된 필터가 다양해서 골라쓰는 맛이 있음. 출력용 값과 그룹핑용 값 등을 달리하는데 아무 문제 없으며, 커스텀 속성을 추가할 만한 자리가 기본 제공되어 있어 커스텀해서 쓰기 좋음. 컬럼 숨기기 기능도 기본 제공. 기본으로 출력용 컬럼, 그룹핑용 컬럼, 검색용 컬럼 다 다르게 설정이 가능한 것도 개인적으로는 큰 장점.

단점: 가상화가 기본이 아닌데, dnd 결합한 방식의 예제가 있지만 굉장히 느림. 컬럼순서변경도 심하게 느림... memo를 적절하게 써서 리렌더를 줄이는 것도 중요

virtualized-rows 예제는 노답이고 virtualized-rows-experimental는 낫지만 이것도 실사용은 못할 수준으로 느린데 transform으로 row 위치 변경하던걸 react-data-grid 코드를 분석해서 그 방식으로 뜯어고치니 쓸만해지긴 함.

 

table {
	display: grid;
	text-align: center;
	flex-grow: 1;
	block-size: 350px;
	overflow: auto;
	grid-template-rows:
		calc(var(--header-rows) * var(--header-row-height) + var(--header-filter-height)) auto
		calc(var(--summary-rows) * var(--summary-row-height));
    ... 
    /* column-resizing-performant예제에서 소개한 방식대로 컬럼 크기들도 미리 변수로 선언해 놓으면
    th, td에서 width 크기 확인 호출 안해도 되서 좀 더 빠른 느낌 */
}
tbody {
	display: grid;
    grid-template-rows: repeat(var(--rows-count), var(--row-height));
}
tbody tr {
    grid-row-start: calc(var(--virtual-row-index) + 1);
    display: flex;    
    ... 
    /* 이 방식은 position: absolute 이거 안해도 됨  */
}

 

컬럼들도 grid columns로 처리하면 더 빨라지기도 하고, auto-fit등을 써서 남은 공간도 채워서 알차게 쓸 수 있을 것 같긴 한데, 컬럼 숨기기 할 때 지금 방식이 주어진 예제에서 크게 고칠게 없어서 지금은 이 정도만 했음. 나중에 시간이 되면 이 부분도 좀 더 개선해볼 수 있지 않을까 생각중.

excel로 export 하는 건 react-data-grid 코드를 참고해서 붙여봤는데 table 태그를 쓰다보니 header group 을 colspan, rowspan 등을 쓸 수 있어서 결과물이 잘 나옴(?). 다만, colspan은 주는거 그대로 쓸 수 있지만, rowspan이 0만 나와서 새로 계산해서 만들어야 했다는 건 함정

 

react-daga-grid는 key, name으로 key가 고정이라 주어진 columns를 가지고 가공하기 편한 부분도 있고, 자료구조가 심플해서 러닝커브가 완만한 편인데, tanstack table은 header가 고정이지만, 영어권이 아닌 우리나라는 컬럼명 출력으로 써야 하다보니 재쳐놓고나면, id고, accessorKey가 옵션이고,  accessorFn만 나중에 공식적(?)으로 확실하게 꺼내쓸 수 있어서 가공할때 다소 불편한 구석이 있다. 데이터도 구조가 복잡해서 처음에 익숙해지기 까지 다소 시간이 걸리는 편.

둘 다 장단이 확실한 편인데 가볍게 도입해서 쓰기에는 react-data-grid가 좋고,
주어진 예제만 믿지 말고, 지속적으로 뜯어고쳐가며 헤비하게 쓸 생각이라면 tanstack table이 좋겠다라는 결론이다.