정렬 (Sorting)

columnDefs 설정

enableSorting

const columns = [
  columnHelper.accessor("name", {
    header: "이름",
    enableSorting: true,
  }),
  columnHelper.accessor("phone", {
    header: "휴대폰",
    enableSorting: false,
  }),
  /* ... */
];

enableSorting 옵션을 통해 컬럼에 정렬 기능을 사용할지 사용하지 않을지를 선택할 수 있습니다. 예제에서는 이해를 위해 굳이 적었지만 명시하지 않더라도 기본값은 true이기 때문에, 정렬을 사용하고 싶지 않은 컬럼에만 false를 보내주면 됩니다.

sortingFn

const columns = [
  columnHelper.accessor("name", {
    header: "이름",
    size: 60,
    enableSorting: true,
    sortingFn: "auto"
  }),
  /* ... */
]

sortingFn 옵션을 통해 컬럼에 적용하고 싶은 정렬 함수를 지정해 줄 수 있습니다. 기본으로 제공하는 제공하는 여섯 개의 함수명 중 하나를 스트링 형식으로 넘겨도 되지만, 기본값인 "auto"로도 대부분 개발자의 의도대로 잘 작동하기 때문에 특수한 정렬 방법을 사용하는 것이 아니라면 굳이 작성하지 않아도 괜찮습니다.

커스텀 정렬을 적용하고 싶다면 공식 문서를 참고하세요. 정렬 함수의 작성 방법에 대해서 자세히 나와있습니다!

Table 설정

getSortedRowModel

import {
  getCoreRowModel,
  getSortedRowModel,
  useReactTable
} from "@tanstack/react-table";

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
});

테이블에 소팅을 적용하기 위해서는 getSortedRowModel 함수를 임포트하여 보내줄 필요가 있습니다.

정렬 함수 적용

getToggleSortingHandler

return (
  /* ... */
  <thead>
    {table.getHeaderGroups().map((headerGroup) => (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map((header) => (
          <th
            key={header.id}
            style={{ width: header.getSize() }}
            onClick={header.column.getToggleSortingHandler()}
            >
              {header.isPlaceholder
                ? null
            	  : flexRender(
              		header.column.columnDef.header,
              		header.getContext()
            	)}
          </th>
        ))}
      </tr>
    ))}
  </thead>
  /* ... */
)

테이블 각 컬럼의 헤더 부분에 해당하는 th 태그의 onClick 이벤트에 getToggleSortingHandler 함수를 걸어주면, 헤더를 클릭할 때마다 '오름차순', '내림차순', '정렬안함'의 순서로 정렬이 변경됩니다. 여기까지만 해도 정렬 기능 자체는 완성된겁니다!

getCanSort, getIsSorted

import { FaSortUp, FaSortDown, FaSort } from "react-icons/fa";
/* ... */
return (
  /* ... */
  <thead>
    {table.getHeaderGroups().map((headerGroup) => (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map((header) => (
          <th
            key={header.id}
            style={{
              width: header.getSize(),
              cursor: header.column.getCanSort() ? "pointer" : "default",
            }}
            onClick={header.column.getToggleSortingHandler()}
            >
              {header.isPlaceholder
              	? null
            	  : flexRender(
              		header.column.columnDef.header,
              		header.getContext()
            	)}
              {
              	{
                  asc: <FaSortUp />,
                  desc: <FaSortDown />,
              	}[header.column.getIsSorted()]
              }
			  {header.column.getCanSort() && !header.column.getIsSorted() ? (
				<FaSort />
			  ) : null}
          </th>
        ))}
      </tr>
    ))}
  </thead>
  /* ... */
)

getCanSort 함수는 columnDefs에서 정의한 컬럼 설정을 바탕으로 해당 컬럼이 정렬 가능한 컬럼인지 아닌지를 반환하는 함수입니다. getIsSorted 함수는 호출된 컬럼의 소팅 상태를 반환해주는 함수로, 오름차순일때는 'asc', 내림차순일때는 'desc', 정렬이 적용되지 않은 상태일때는 false를 반환합니다.

이 둘을 잘 활용하면 예제처럼 정렬 상태에 따른 스타일링이 가능합니다. react-table은 Headless UI 라이브러리이기 때문에 어떤 스타일을 적용하든 편견을 가지지 않으므로 디자인 자유도가 굉장히 높습니다.

TanStack Table v8 Documents | Sorting API