grids
대량의 데이터를 화면에 보이는 칸만 그려 다루는 표입니다. 정렬과 필터는 검증된 라이브러리(TanStack Table)에 맡기고, 스크롤과 고정 영역 계산은 직접 설계했습니다.
2가로와 세로 두 방향 모두 보이는 칸만 그리도록 직접 계산
- 2026.02 ~ 현재
- Firstage
- 설계와 구현 (1인)
핵심 가치
정렬하거나 필터를 바꾸고 스크롤해도 고른 행이 바뀌지 않아, 일괄 작업이 고른 기록에만 적용됩니다.
성과
- 보이는 칸만 그리는 가로세로 스크롤, 행과 열 고정, 묶음과 트리, 피벗 집계, 칸 편집, 서버에서 나눠 불러오기를 한 표에서 제공
- 사내 운영 대시보드의 CSV 내보내기에 사용
- 선택, 열 너비와 순서, 키보드 조작이 한 상태를 함께 써서 서로 어긋나지 않음
- 칸 위치 계산을 화면과 분리해 따로 테스트
기술 스택
배경
기록이 많은 운영 화면에서는 화면에 그려지지 않은 행까지 선택하고, 열의 순서와 크기를 바꿀 수 있어야 합니다. 이때 정렬이나 필터, 스크롤 때문에 선택 대상이 바뀌면 대량 작업이 엉뚱한 기록에 적용됩니다. 기록과 필드의 논리 ID를 화면 좌표와 떼어 두는 그리드가 필요해서, 사내 운영 화면에 쓸 목적으로 만들었습니다.
결정과 구현
- TanStack Table은 정렬과 필터 데이터 모델을 맡고, 양축 가상화와 고정 영역의 좌표 계산은 직접 설계했습니다.
- 행 ID와 화면 좌표를 분리해 정렬, 필터, 스크롤이 선택 대상을 바꾸지 않게 했습니다. 선택한 ID는 숨겨진 대상까지 포함해 정렬과 필터 뒤에도 남기 때문에, 대량 작업 전에는 호스트가 그 대상을 확인하도록 계약에 적었습니다.
- 선택, 열 크기, 열 순서, 키보드 조작은 같은 코어 상태를 공유합니다. 코어는 React에 의존하지 않아서 기하 계산을 React 밖에서 검증합니다.
- 명령 막대와 키보드 동작은 같은 명령 레지스트리를 씁니다.
현재 상태
사내 Dashboard에서 샘플 데이터로 그리드를 직접 써 보는 화면과 운영용 CSV 내보내기가 이 패키지를 씁니다. 아직 베타이며, 실제 운영 데이터를 그리드로 다루는 화면, kuery와 함께 Dashboard에 연결하는 작업, 서버 전체를 대상으로 한 선택 범위와 여러 셀 붙여넣기가 남아 있습니다.
