TanStack Table로 세로 병합 테이블 만들기

이번에 어드민 툴 개발을 진행하면서 테이블 구현이 필요해 TanStack Table을 사용하게 되었다.
디자인 시스템용 테이블 컴포넌트로 만들었는데, 정렬, 리사이징처럼 TanStack Table이 제공하는 기본 기능을 그대로 가져다 쓰면 되는 부분은 크게 어렵지 않았다. 다만 문제는 세로 병합을 on/off 할 수 있는 옵션이었다. 헤더 쪽에는 이미 rowSpan API가 존재해서 헤더 그룹핑은 비교적 쉽게 처리가 되는데, tbody 영역에는 같은 기능이 없어서 직접 구현이 필요했다. 그래서 어떤 컬럼이든 필요할 때만 rowSpan을 켰다가 끌 수 있는 방식으로 구현을 한 번 만들어보았다.

1. 기본 아이디어

처음에 내가 생각한 구조는 컬럼 메타에 enableRowSpan 옵션을 추가해서 열 단위로 병합 여부를 제어하고, 병합이 켜진 열은 행 데이터를 훑어보면서 같은 값이 연속되는 구간을 찾은 다음 구간의 첫 행에는 병합될 행 수를 넣고, 나머지 행은 0으로 표시해 렌더링에서 제외하는 방식을 일단 생각하였다!

2. rowSpan 계산 로직

rowSpan 기능을 만들기 위해 필요한 건 한 열에서 연속된 값이 몇 행 동안 이어지는지 계산하는 것이었다. 예를 들어 category 열이 아래처럼 되어 있다고 해보자.

0: 과일
1: 과일
2: 과일
3: 과일
4: 채소
5: 채소

여기서 ‘과일’은 연속해서 4번 ‘채소’는 연속해서 2번 나온다.

<td rowspan="4">과일</td>  <!-- 0~3행 -->
<td rowspan="2">채소</td>  <!-- 4~5행 -->

즉, 연속된 구간의 길이를 구간의 시작 셀 정보가 필요했고, 나는 각 행에 대해 rowSpan 값을 다음과 같이 들고 있도록 했다.

[4, 0, 0, 0, 2, 0]

• 인덱스 0: 4 → 0번째 행에서 아래로 4행을 병합한다는 의미
• 인덱스 1~3: 0 → 이미 위의 셀에 병합되어 있으니를 렌더링하지 않음
• 인덱스 4: 2 → 4번째 행에서 아래로 2행 병합
• 인덱스 5: 0 → 마찬가지로 숨김

1. currentValue : 지금 보고 있는 값이 무엇인지 (ex: '과일', '채소'..)
2. spanStartIndex: 현재 값이 시작된 행 인덱스 (ex: '과일'이 0번째에서 시작하면 0, '채소'가 4번째에서 시작하면 4)
3. rowIndex : 현재 몇 번째 행을 순회 중인지!

렌더링 시 rowSpan > 0인 셀만를 렌더링 하고 0이면자체를 렌더링 하지 않는다.

1) 열 단위 반복

rowSpan은 enableRowSpan이 켜진 열만 계산하면 되므로 아래와 같이 조건문을 걸었다.

for column in columns:
  if enableRowSpan이 아니면 스킵
  spans = []
  currentValue = null
  spanStartIndex = 0
  행 반복 시작

2) 첫 번째 행은 무조건 새로운 구간의 시작

rowIndex = 0
currentValue = rows[0][columnId]   // ex. '과일'
spanStartIndex = 0

3) 다음 행부터는 값이 바뀌는지 확인

rowIndex 1: 과일 → 과일 (변화 없음)
rowIndex 2: 과일 → 과일 (변화 없음)
rowIndex 3: 과일 → 과일 (변화 없음)
rowIndex 4: 과일 → 채소 (값 변경!)

값이 바뀌는 순간이 바로 이전 구간을 종료해야 하는 시점이다.

4) 이전 구간 종료 처리

이전 구간은 spanStartIndex부터 rowIndex - 1까지다.

spanStartIndex = 0
rowIndex = 4
구간 = 0,1,2,3 → 길이 = 4

spans[0] = 4
spans[1] = 0
spans[2] = 0
spans[3] = 0

그리고 새로운 구간을 다시 시작한다.

currentValue = '채소'
spanStartIndex = 4

5) 결과

위 과정을 반복하면 하나의 열에 대한 rowSpan 배열이 완성된다.

[4, 0, 0, 0, 2, 0]

이 배열을 렌더링에서 그대로 사용하면 된다.

• 값이 0 → 렌더링 생략
• 값이 1 이상 →렌더링

아래 목데이터를 넣어주면 병합 테이블이 그려진다!

const data: Product[] = [
  { category: "과일", subcategory: "사과", price: 3000 },
  { category: "과일", subcategory: "사과", price: 2500 },
  { category: "과일", subcategory: "배", price: 4000 },
  { category: "과일", subcategory: "배", price: 3500 },
  { category: "채소", subcategory: "배추", price: 5000 },
  { category: "채소", subcategory: "무", price: 2000 },
];

const columns: ColumnDef<Product, any>[] = [
  {
    accessorKey: "category",
    header: "카테고리",
    meta: {
      enableRowSpan: true,
    },
  },
  {
    accessorKey: "subcategory",
    header: "서브카테고리",
    meta: {
      enableRowSpan: true,
    },
  },
  {
    accessorKey: "price",
    header: "가격",
    cell: (info) => `${info.getValue().toLocaleString()}원`,
  },
];