Pagination Controlled

import {useMemo, useState} from "react"

import {useQuery} from "@tanstack/react-query"

import {CodeHighlight} from "@qui/mdx-docs"
import {QPagination, QProgressCircle} from "@qui/react"
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  PaginationState,
  QTable,
  QTbody,
  QTd,
  QTh,
  QThead,
  QTr,
  useReactTable,
  useTablePagination,
} from "@qui/react-table"

import {fetchData, Person} from "./fetch-data"

export default function PaginationControlled() {
  const columns = useMemo<ColumnDef<Person>[]>(
    () => [
      {
        columns: [
          {
            accessorKey: "firstName",
            cell: (info) => info.getValue(),
            header: "First Name",
          },
          {
            accessorFn: (row) => row.lastName,
            cell: (info) => info.getValue(),
            header: "Last Name",
            id: "lastName",
          },
        ],
        header: "Name",
      },
      {
        columns: [
          {
            accessorKey: "age",
            header: "Age",
          },
          {
            accessorKey: "visits",
            header: "Visits",
          },
          {
            accessorKey: "status",
            header: "Status",
          },
          {
            accessorKey: "progress",
            header: "Profile Progress",
          },
        ],
        header: "Info",
      },
    ],
    [],
  )

  const [{pageIndex, pageSize}, setPagination] = useState<PaginationState>({
    pageIndex: 0,
    pageSize: 10,
  })

  const pagination = useMemo(
    () => ({
      pageIndex,
      pageSize,
    }),
    [pageIndex, pageSize],
  )

  const {data, fetchStatus, isFetching} = useQuery({
    placeholderData: (previousData) => previousData,
    queryFn: () => fetchData(pagination),
    queryKey: ["data", pagination],
  })

  const table = useReactTable({
    columns,
    data: data?.rows ?? [],
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    onPaginationChange: setPagination,
    pageCount: data?.pageCount ?? -1,
    state: {
      pagination,
    },
  })

  const paginationProps = useTablePagination(table)

  return (
    <div className="flex flex-col gap-4 p-2">
      <div className="flex items-center gap-1">
        <span>Query:</span>
        <span>{fetchStatus}</span>{" "}
        {isFetching ? <QProgressCircle className="ml-1" size="xs" /> : null}
      </div>
      <QTable>
        <QThead>
          {table.getHeaderGroups().map((headerGroup) => (
            <QTr key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <QTh
                    key={header.id}
                    colSpan={header.colSpan}
                    style={{width: header.getSize()}}
                  >
                    {header.isPlaceholder ? null : (
                      <div>
                        {flexRender(
                          header.column.columnDef.header,
                          header.getContext(),
                        )}
                      </div>
                    )}
                  </QTh>
                )
              })}
            </QTr>
          ))}
        </QThead>
        <QTbody>
          {table.getRowModel().rows.map((row) => {
            return (
              <QTr key={row.id}>
                {row.getVisibleCells().map((cell) => {
                  return (
                    <QTd key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </QTd>
                  )
                })}
              </QTr>
            )
          })}
        </QTbody>
      </QTable>

      <div className="mt-4">
        <QPagination
          {...paginationProps}
          pageMetadataPlacement="after"
          renderPageMeta={(context) =>
            `${context.currentPage} of ${context.totalPages}`
          }
          rowsPerPageLabel="Show"
          rowsPerPageOptions={[10, 20, 50]}
        />
      </div>

      <CodeHighlight
        className="mt-4 w-fit"
        code={JSON.stringify({pagination}, null, 2)}
        disableCopy
        language="json"
      />
    </div>
  )
}