{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"data-grid-pagination","type":"registry:ui","title":"Data Grid Pagination","description":"","dependencies":[],"registryDependencies":["button","@neui/data-grid","select","skeleton"],"files":[{"path":"data-grid-pagination.tsx","type":"registry:ui","content":"\"use client\"\n\"use no memo\"\n\nimport type { JSX, ReactNode } from \"react\"\nimport { useDataGrid } from \"@/components/neui/data-grid/data-grid\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ninterface DataGridPaginationProps {\n  sizes?: number[]\n  sizesInfo?: string\n  sizesLabel?: string\n  sizesDescription?: string\n  sizesSkeleton?: ReactNode\n  more?: boolean\n  moreLimit?: number\n  info?: string\n  infoSkeleton?: ReactNode\n  className?: string\n  rowsPerPageLabel?: string\n  previousPageLabel?: string\n  nextPageLabel?: string\n  ellipsisText?: string\n}\n\nfunction DataGridPagination(props: DataGridPaginationProps): JSX.Element {\n  const { table, recordCount, isLoading } = useDataGrid()\n\n  const defaultProps: Partial<DataGridPaginationProps> = {\n    sizes: [5, 10, 25, 50, 100],\n    sizesSkeleton: <Skeleton className=\"h-8 w-44\" />,\n    moreLimit: 5,\n    info: \"{from} - {to} of {count}\",\n    infoSkeleton: <Skeleton className=\"h-8 w-60\" />,\n    rowsPerPageLabel: \"Rows per page\",\n    previousPageLabel: \"Go to previous page\",\n    nextPageLabel: \"Go to next page\",\n    ellipsisText: \"...\",\n  }\n\n  const mergedProps: DataGridPaginationProps = { ...defaultProps, ...props }\n\n  const btnBaseClasses = \"p-0 text-sm\"\n  const btnArrowClasses = btnBaseClasses + \" rtl:transform rtl:rotate-180\"\n  const pageIndex = table.getState().pagination.pageIndex\n  const pageSize = table.getState().pagination.pageSize\n  const from = recordCount === 0 ? 0 : pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, recordCount)\n  const pageCount = table.getPageCount()\n\n  // Replace placeholders in paginationInfo\n  const paginationInfo = mergedProps.info\n    ? mergedProps.info\n        .replaceAll(\"{from}\", from.toString())\n        .replaceAll(\"{to}\", to.toString())\n        .replaceAll(\"{count}\", recordCount.toString())\n    : `${from} - ${to} of ${recordCount}`\n\n  // Pagination limit logic\n  const paginationMoreLimit = mergedProps.moreLimit || 5\n\n  // Determine the start and end of the pagination group\n  const currentGroupStart =\n    Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit\n  const currentGroupEnd = Math.min(\n    currentGroupStart + paginationMoreLimit,\n    pageCount\n  )\n\n  // Render page buttons based on the current group\n  const renderPageButtons = () => {\n    const buttons = []\n    for (let i = currentGroupStart; i < currentGroupEnd; i++) {\n      buttons.push(\n        <Button\n          key={i}\n          size=\"icon-sm\"\n          variant=\"ghost\"\n          className={cn(btnBaseClasses, \"text-muted-foreground\", {\n            \"bg-accent text-accent-foreground\": pageIndex === i,\n          })}\n          onClick={() => {\n            if (pageIndex !== i) {\n              table.setPageIndex(i)\n            }\n          }}\n        >\n          {i + 1}\n        </Button>\n      )\n    }\n    return buttons\n  }\n\n  // Render a \"previous\" ellipsis button if there are previous pages to show\n  const renderEllipsisPrevButton = () => {\n    if (currentGroupStart > 0) {\n      return (\n        <Button\n          size=\"icon-sm\"\n          className={btnBaseClasses}\n          variant=\"ghost\"\n          onClick={() => table.setPageIndex(currentGroupStart - 1)}\n        >\n          {mergedProps.ellipsisText}\n        </Button>\n      )\n    }\n    return null\n  }\n\n  // Render a \"next\" ellipsis button if there are more pages to show after the current group\n  const renderEllipsisNextButton = () => {\n    if (currentGroupEnd < pageCount) {\n      return (\n        <Button\n          className={btnBaseClasses}\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          onClick={() => table.setPageIndex(currentGroupEnd)}\n        >\n          {mergedProps.ellipsisText}\n        </Button>\n      )\n    }\n    return null\n  }\n\n  return (\n    <div\n      data-slot=\"data-grid-pagination\"\n      className={cn(\n        \"flex grow flex-col flex-wrap items-center justify-between gap-2.5 py-2.5 sm:flex-row sm:py-0\",\n        mergedProps.className\n      )}\n    >\n      <div className=\"order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0\">\n        {isLoading ? (\n          mergedProps.sizesSkeleton\n        ) : (\n          <>\n            <div className=\"text-muted-foreground text-sm\">\n              {mergedProps.rowsPerPageLabel}\n            </div>\n            <Select\n              value={`${pageSize}`}\n              onValueChange={(value) => {\n                const newPageSize = Number(value)\n                table.setPageSize(newPageSize)\n              }}\n            >\n              <SelectTrigger className=\"w-16\" size=\"sm\">\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent\n                position=\"popper\"\n                align=\"start\"\n                className=\"min-w-(--radix-select-trigger-width)\"\n              >\n                {mergedProps.sizes?.map((size: number) => (\n                  <SelectItem key={size} value={`${size}`}>\n                    {size}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </>\n        )}\n      </div>\n      <div className=\"order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0\">\n        {isLoading ? (\n          mergedProps.infoSkeleton\n        ) : (\n          <>\n            <div className=\"text-muted-foreground order-2 text-sm text-nowrap sm:order-1\">\n              {paginationInfo}\n            </div>\n            {pageCount > 1 && (\n              <div className=\"order-1 flex items-center space-x-1\">\n                <Button\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                  className={btnArrowClasses}\n                  onClick={() => table.previousPage()}\n                  disabled={!table.getCanPreviousPage()}\n                >\n                  <span className=\"sr-only\">\n                    {mergedProps.previousPageLabel}\n                  </span>\n                  <IconPlaceholder\n                    lucide=\"ChevronLeftIcon\"\n                    tabler=\"IconChevronLeft\"\n                    hugeicons=\"ArrowLeft01Icon\"\n                    phosphor=\"CaretLeftIcon\"\n                    remixicon=\"RiArrowLeftSLine\"\n                    className=\"size-4\"\n                  />\n                </Button>\n\n                {renderEllipsisPrevButton()}\n\n                {renderPageButtons()}\n\n                {renderEllipsisNextButton()}\n\n                <Button\n                  size=\"icon-sm\"\n                  variant=\"ghost\"\n                  className={btnArrowClasses}\n                  onClick={() => table.nextPage()}\n                  disabled={!table.getCanNextPage()}\n                >\n                  <span className=\"sr-only\">{mergedProps.nextPageLabel}</span>\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"size-4\"\n                  />\n                </Button>\n              </div>\n            )}\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { DataGridPagination, type DataGridPaginationProps }","target":"components/neui/data-grid/data-grid-pagination.tsx"}]}