Paginated Table

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Pagination,
7  PaginationContent,
8  PaginationItem,
9  PaginationNext,
10  PaginationPrevious,
11} from "@/components/ui/pagination"
12import { Table } from "@/components/ui/table"
13import { cn } from "@/lib/utils"
14 
15const DEFAULT_TABLE_PAGE_SIZE = 25
16 
17type PaginatedTableProps = React.ComponentProps<typeof Table> & {
18  pageSize?: number
19  pagination?: boolean
20}
21 
22function getTableBodyRows(frame: HTMLDivElement | null): HTMLTableRowElement[] {
23  const table = frame?.querySelector("table")
24 
25  if (!table) {
26    return []
27  }
28 
29  return Array.from(table.tBodies).flatMap((body) => Array.from(body.rows))
30}
31 
32function PaginatedTable({
33  className,
34  children,
35  id,
36  pageSize = DEFAULT_TABLE_PAGE_SIZE,
37  pagination = true,
38  ...props
39}: PaginatedTableProps) {
40  const generatedTableId = React.useId()
41  const tableId = id ?? generatedTableId
42  const frameRef = React.useRef<HTMLDivElement>(null)
43  const [rowCount, setRowCount] = React.useState(0)
44  const [pageIndex, setPageIndex] = React.useState(0)
45  const safePageSize = Number.isFinite(pageSize) && pageSize > 0
46    ? pageSize
47    : DEFAULT_TABLE_PAGE_SIZE
48  const shouldPaginate = pagination && rowCount > safePageSize
49  const pageCount = shouldPaginate ? Math.ceil(rowCount / safePageSize) : 1
50  const safePageIndex = shouldPaginate
51    ? Math.min(pageIndex, Math.max(0, pageCount - 1))
52    : 0
53  const firstRow = shouldPaginate ? safePageIndex * safePageSize + 1 : 1
54  const lastRow = shouldPaginate
55    ? Math.min(rowCount, (safePageIndex + 1) * safePageSize)
56    : rowCount
57  const isFirstPage = safePageIndex === 0
58  const isLastPage = safePageIndex >= pageCount - 1
59 
60  const refreshRowCount = React.useCallback(() => {
61    setRowCount(getTableBodyRows(frameRef.current).length)
62  }, [])
63 
64  React.useEffect(() => {
65    refreshRowCount()
66 
67    const frame = frameRef.current
68    if (!frame || typeof MutationObserver === "undefined") {
69      return
70    }
71 
72    const observer = new MutationObserver(refreshRowCount)
73    observer.observe(frame, { childList: true, subtree: true })
74 
75    return () => observer.disconnect()
76  }, [children, refreshRowCount])
77 
78  React.useEffect(() => {
79    setPageIndex((current) => Math.min(current, Math.max(0, pageCount - 1)))
80  }, [pageCount])
81 
82  React.useEffect(() => {
83    const frame = frameRef.current
84    const rows = getTableBodyRows(frame)
85    const firstVisibleRow = safePageIndex * safePageSize
86    const lastVisibleRow = firstVisibleRow + safePageSize
87 
88// … truncated