Analytics

TablePagination

Dark Mode

테이블 하단 페이지네이션. useDataTable의 paginationProps를 스프레드하면 자동 연동됩니다.

import { TablePagination } from "@/shared/ui/widget/analytics/table"

기본 사용

페이지 입력 필드에 직접 번호를 입력하거나, 좌우 화살표 버튼으로 페이지를 이동합니다. 첫 페이지에서 이전 버튼, 마지막 페이지에서 다음 버튼이 비활성화됩니다.

paginationProps 스프레드 (권장)

// useDataTable의 paginationProps 스프레드 (권장)
const table = useDataTable({ data, columns, pageSize: 10 });

<TablePagination {...table.paginationProps} />

현재 페이지: 1 / 5

페이지 크기 선택 + 총 건수

pageSize와 onPageSizeChange를 전달하면 rows per page 드롭다운이 표시됩니다. totalCount를 전달하면 총 건수가 함께 표시됩니다.

전체 옵션

// 전체 옵션 수동 구성
<TablePagination
  currentPage={page}
  totalPages={totalPages}
  onPageChange={setPage}
  pageSize={pageSize}
  onPageSizeChange={setPageSize}
  totalCount={filteredData.length}
  pageSizeOptions={[10, 20, 50, 100]}
/>

현재 페이지: 5 / 20 · 페이지 크기: 10

단일 페이지

총 1페이지인 경우에도 컴포넌트가 표시됩니다. 양쪽 버튼이 모두 비활성화되어 현재 페이지 정보만 확인할 수 있습니다.

그룹화 시 자동 비활성화

useDataTable에 groupBy를 설정하면 페이지네이션이 자동으로 비활성화됩니다. 그룹화된 데이터는 전체를 한 번에 표시하며, 필요 시 table.isGrouped를 확인하여 컴포넌트를 조건부로 렌더링합니다.

그룹화 시 조건부 렌더링

// 그룹화 시 페이지네이션 자동 비활성화
const table = useDataTable({ data, columns, pageSize: 10, groupBy });

// table.isGrouped === true이면 페이지네이션 숨김
{!table.isGrouped && (
  <TablePagination {...table.paginationProps} />
)}

현재 페이지: 1 / 3

Props

TablePagination

Prop	Type	Required	Default	설명
`currentPage`	`number`	✓	—	현재 페이지 (1부터).
`totalPages`	`number`	✓	—	총 페이지 수.
`onPageChange`	`(page: number) => void`	✓	—	페이지 변경 콜백.
`pageSize`	`number`	—	—	페이지당 행 수. 설정 시 선택기 표시.
`onPageSizeChange`	`(size: number) => void`	—	—	페이지 사이즈 변경 콜백.
`totalCount`	`number`	—	—	전체 레코드 수.
`pageSizeOptions`	`number[]`	—	[10, 20, 50, 100]	페이지 사이즈 옵션.
`className`	`string`	—	—	추가 클래스.