React-Table에서 정렬 기능 끄는 방법

리액트 테이블에서 정렬 비활성화하기

리액트 애플리케이션에서 테이블을 생성하는 데 유용한 라이브러리인 리액트 테이블. 리액트 테이블을 사용할 때 일반적인 요구사항 중 하나는 특정 열에서 정렬을 비활성화하는 것입니다. 이 블로그 포스트에서는 이 작업을 수행하는 다양한 접근법을 살펴보겠습니다.

접근법 1: disableSortBy 사용

리액트 테이블 7버전에서는 열 정의에서 disableSortBy 옵션을 사용하여 특정 열에서 정렬을 비활성화할 수 있습니다. 다음은 예시입니다:

{
  Header: '열 제목',
  accessor: 'title',
  disableSortBy: true
}

특정 열에 대해 disableSortBy를 true로 설정하여 해당 열에서 정렬을 방지할 수 있습니다.

접근법 2: useSortBy 훅 사용

useSortBy 훅을 사용하는 경우, 모든 열에 대해 정렬을 전역적으로 비활성화하거나 선택적으로 활성화할 수 있습니다. 다음은 이를 구현하는 방법입니다:

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  prepareRow,
  page,
  canPreviousPage,
  canNextPage,
  nextPage,
  previousPage,
  state: { pageIndex, sortBy }
} = useTable(
  {
    columns,
    data,
    manualPagination: true,
    manualSortBy: true,
    disableSortBy: disabledSort // 여기에 disableSortBy 추가
  },
  useSortBy,
  usePagination
);

원하는 값(예: true)과 함께 disableSortBy 옵션을 제공하여 전체적으로 또는 특정 열에 대해 정렬을 비활성화할 수 있습니다.

접근법 3: TypeScript 버전

TypeScript를 사용하는 경우, disableSortBy 옵션과 열 정의를 UseSortByColumnOptions와 결합할 수 있습니다. 다음은 예시입니다:

const MyColumns: (Column<IMyRow> & UseSortByColumnOptions<IMyRow>)[] = useMemo(() => [
  {
    Header: '날짜',
    accessor: 'date',
    disableSortBy: true,
  }
], [])

이 TypeScript 버전을 사용하면 disableSortBy를 true로 설정하여 특정 열에서 정렬을 비활성화할 수 있습니다.

결론

리액트 테이블에서 정렬 비활성화는 많은 애플리케이션에 필수적인 요구사항입니다. disableSortBy 옵션이나 useSortBy 훅 중 어느 것을 사용하든 이 기능을 쉽게 구현할 수 있습니다. 프로젝트의 요구사항에 가장 적합한 접근법을 선택하고, 특정 열에서 원하지 않는 정렬 없이 리액트 테이블의 유연성과 강력함을 즐기세요.

참고 자료 : 

reactjs