@tetrascience-npm/tetrascience-react-ui 1.0.0-beta.145.1 → 1.0.0-beta.146.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/data-table/data-table-pagination.cjs +1 -1
- package/dist/components/ui/data-table/data-table-pagination.cjs.map +1 -1
- package/dist/components/ui/data-table/data-table-pagination.js +59 -51
- package/dist/components/ui/data-table/data-table-pagination.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("lucide-react"),b=require("./data-table.cjs"),u=require("../../../ui/button.cjs"),r=require("../../../ui/select.cjs"),j=require("../../../lib/utils.cjs"),P=5,S=10,v=25,w=7;function _(t,n){if(t<=w)return Array.from({length:t},(g,l)=>l);const s=n+1;return s<=4?[0,1,2,3,4,"ellipsis",t-1]:s>=t-3?[0,"ellipsis",t-5,t-4,t-3,t-2,t-1]:[0,"ellipsis",n-1,n,n+1,"ellipsis",t-1]}function E({pageSizeOptions:t=[P,S,v],className:n}){const{table:s,grouping:g,enableGrouping:l}=b.useDataTable(),d=s.getPageCount(),{pageIndex:i,pageSize:c}=s.getState().pagination,o=s.getFilteredRowModel().rows.length,p=_(d,i);if(o===0||l&&g)return null;const h=i*c+1,f=Math.min((i+1)*c,o);return e.jsxs("div",{"data-slot":"data-table-pagination",className:j.cn("flex flex-wrap items-center justify-between gap-4 text-sm text-muted-foreground",n),children:[e.jsxs("div",{className:"flex min-w-0 flex-wrap items-center gap-2",children:[e.jsx("span",{className:"whitespace-nowrap",children:"Rows per page:"}),e.jsxs(r.Select,{value:String(c),onValueChange:a=>s.setPageSize(Number(a)),children:[e.jsx(r.SelectTrigger,{"aria-label":"Rows per page",className:"h-7 w-16",children:e.jsx(r.SelectValue,{})}),e.jsx(r.SelectContent,{children:t.map(a=>e.jsx(r.SelectItem,{value:String(a),children:a},a))})]}),e.jsxs("span",{className:"whitespace-nowrap tabular-nums",children:[h,"–",f," of ",o]})]}),d>1&&e.jsxs("div",{className:"flex flex-wrap items-center gap-1",children:[e.jsx(u.Button,{variant:"ghost",size:"icon-sm",onClick:()=>s.previousPage(),disabled:!s.getCanPreviousPage(),"aria-label":"Previous page",children:e.jsx(x.ChevronLeftIcon,{})}),p.map((a,m)=>a==="ellipsis"?e.jsx("span",{className:"px-1","aria-hidden":"true",children:"..."},`ellipsis-${m}`):e.jsx(u.Button,{variant:a===i?"default":"link",size:"icon-xs",onClick:()=>s.setPageIndex(a),"aria-label":`Page ${a+1}`,"aria-current":a===i?"page":void 0,children:a+1},a)),e.jsx(u.Button,{variant:"ghost",size:"icon-sm",onClick:()=>s.nextPage(),disabled:!s.getCanNextPage(),"aria-label":"Next page",children:e.jsx(x.ChevronRightIcon,{})})]})]})}exports.DataTablePagination=E;
|
|
2
2
|
//# sourceMappingURL=data-table-pagination.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-pagination.cjs","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataTablePaginationProps {\n pageSizeOptions?: number[]\n className?: string\n}\n\nconst DEFAULT_PAGE_SIZE_SMALL = 5\nconst DEFAULT_PAGE_SIZE_MEDIUM = 10\nconst DEFAULT_PAGE_SIZE_LARGE = 25\n\nfunction DataTablePagination({\n pageSizeOptions = [DEFAULT_PAGE_SIZE_SMALL, DEFAULT_PAGE_SIZE_MEDIUM, DEFAULT_PAGE_SIZE_LARGE],\n className,\n}: DataTablePaginationProps) {\n const { table, grouping, enableGrouping } = useDataTable()\n\n const pageCount = table.getPageCount()\n const { pageIndex, pageSize } = table.getState().pagination\n const totalRows = table.getFilteredRowModel().rows.length\n\n if (totalRows === 0) return null\n if (enableGrouping && grouping) return null\n\n const start = pageIndex * pageSize + 1\n const end = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n return (\n <div\n data-slot=\"data-table-pagination\"\n className={cn(\n \"flex items-center justify-between gap-4 text-sm text-muted-foreground\",\n className,\n )}\n >\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap\">Rows per page:</span>\n <Select\n value={String(pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger aria-label=\"Rows per page\" className=\"h-7 w-16\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {pageSizeOptions.map((size) => (\n <SelectItem key={size} value={String(size)}>\n {size}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <span className=\"whitespace-nowrap tabular-nums\">\n {start}–{end} of {totalRows}\n </span>\n </div>\n\n {pageCount > 1 && (\n <div className=\"flex items-center gap-1\">\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n aria-label=\"Previous page\"\n >\n <ChevronLeftIcon />\n </Button>\n\n {
|
|
1
|
+
{"version":3,"file":"data-table-pagination.cjs","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataTablePaginationProps {\n pageSizeOptions?: number[]\n className?: string\n}\n\nconst DEFAULT_PAGE_SIZE_SMALL = 5\nconst DEFAULT_PAGE_SIZE_MEDIUM = 10\nconst DEFAULT_PAGE_SIZE_LARGE = 25\nconst MAX_VISIBLE_PAGE_ITEMS = 7\n\nfunction getPageItems(pageCount: number, pageIndex: number): Array<number | \"ellipsis\"> {\n if (pageCount <= MAX_VISIBLE_PAGE_ITEMS) {\n return Array.from({ length: pageCount }, (_, index) => index)\n }\n\n const currentPage = pageIndex + 1\n if (currentPage <= 4) {\n return [0, 1, 2, 3, 4, \"ellipsis\", pageCount - 1]\n }\n\n if (currentPage >= pageCount - 3) {\n return [0, \"ellipsis\", pageCount - 5, pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1]\n }\n\n return [0, \"ellipsis\", pageIndex - 1, pageIndex, pageIndex + 1, \"ellipsis\", pageCount - 1]\n}\n\nfunction DataTablePagination({\n pageSizeOptions = [DEFAULT_PAGE_SIZE_SMALL, DEFAULT_PAGE_SIZE_MEDIUM, DEFAULT_PAGE_SIZE_LARGE],\n className,\n}: DataTablePaginationProps) {\n const { table, grouping, enableGrouping } = useDataTable()\n\n const pageCount = table.getPageCount()\n const { pageIndex, pageSize } = table.getState().pagination\n const totalRows = table.getFilteredRowModel().rows.length\n const pageItems = getPageItems(pageCount, pageIndex)\n\n if (totalRows === 0) return null\n if (enableGrouping && grouping) return null\n\n const start = pageIndex * pageSize + 1\n const end = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n return (\n <div\n data-slot=\"data-table-pagination\"\n className={cn(\n \"flex flex-wrap items-center justify-between gap-4 text-sm text-muted-foreground\",\n className,\n )}\n >\n <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n <span className=\"whitespace-nowrap\">Rows per page:</span>\n <Select\n value={String(pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger aria-label=\"Rows per page\" className=\"h-7 w-16\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {pageSizeOptions.map((size) => (\n <SelectItem key={size} value={String(size)}>\n {size}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <span className=\"whitespace-nowrap tabular-nums\">\n {start}–{end} of {totalRows}\n </span>\n </div>\n\n {pageCount > 1 && (\n <div className=\"flex flex-wrap items-center gap-1\">\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n aria-label=\"Previous page\"\n >\n <ChevronLeftIcon />\n </Button>\n\n {pageItems.map((item, index) =>\n item === \"ellipsis\" ? (\n <span key={`ellipsis-${index}`} className=\"px-1\" aria-hidden=\"true\">\n ...\n </span>\n ) : (\n <Button\n key={item}\n variant={item === pageIndex ? \"default\" : \"link\"}\n size=\"icon-xs\"\n onClick={() => table.setPageIndex(item)}\n aria-label={`Page ${item + 1}`}\n aria-current={item === pageIndex ? \"page\" : undefined}\n >\n {item + 1}\n </Button>\n ),\n )}\n\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n aria-label=\"Next page\"\n >\n <ChevronRightIcon />\n </Button>\n </div>\n )}\n </div>\n )\n}\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],"names":["DEFAULT_PAGE_SIZE_SMALL","DEFAULT_PAGE_SIZE_MEDIUM","DEFAULT_PAGE_SIZE_LARGE","MAX_VISIBLE_PAGE_ITEMS","getPageItems","pageCount","pageIndex","_","index","currentPage","DataTablePagination","pageSizeOptions","className","table","grouping","enableGrouping","useDataTable","pageSize","totalRows","pageItems","start","end","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","size","SelectItem","Button","ChevronLeftIcon","item","ChevronRightIcon"],"mappings":"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"}
|
|
@@ -1,80 +1,88 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { ChevronLeftIcon as
|
|
3
|
-
import { useDataTable as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Select as x, SelectTrigger as
|
|
6
|
-
import { cn as
|
|
7
|
-
const
|
|
8
|
-
function
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { ChevronLeftIcon as P, ChevronRightIcon as S } from "lucide-react";
|
|
3
|
+
import { useDataTable as w } from "./data-table.js";
|
|
4
|
+
import { Button as g } from "../../../ui/button.js";
|
|
5
|
+
import { Select as x, SelectTrigger as b, SelectValue as v, SelectContent as E, SelectItem as _ } from "../../../ui/select.js";
|
|
6
|
+
import { cn as A } from "../../../lib/utils.js";
|
|
7
|
+
const I = 5, N = 10, L = 25, M = 7;
|
|
8
|
+
function T(a, n) {
|
|
9
|
+
if (a <= M)
|
|
10
|
+
return Array.from({ length: a }, (p, s) => s);
|
|
11
|
+
const t = n + 1;
|
|
12
|
+
return t <= 4 ? [0, 1, 2, 3, 4, "ellipsis", a - 1] : t >= a - 3 ? [0, "ellipsis", a - 5, a - 4, a - 3, a - 2, a - 1] : [0, "ellipsis", n - 1, n, n + 1, "ellipsis", a - 1];
|
|
13
|
+
}
|
|
14
|
+
function j({
|
|
15
|
+
pageSizeOptions: a = [I, N, L],
|
|
16
|
+
className: n
|
|
11
17
|
}) {
|
|
12
|
-
const { table:
|
|
13
|
-
if (
|
|
14
|
-
const
|
|
15
|
-
return /* @__PURE__ */
|
|
18
|
+
const { table: t, grouping: p, enableGrouping: s } = w(), d = t.getPageCount(), { pageIndex: i, pageSize: o } = t.getState().pagination, c = t.getFilteredRowModel().rows.length, m = T(d, i);
|
|
19
|
+
if (c === 0 || s && p) return null;
|
|
20
|
+
const h = i * o + 1, f = Math.min((i + 1) * o, c);
|
|
21
|
+
return /* @__PURE__ */ l(
|
|
16
22
|
"div",
|
|
17
23
|
{
|
|
18
24
|
"data-slot": "data-table-pagination",
|
|
19
|
-
className:
|
|
20
|
-
"flex items-center justify-between gap-4 text-sm text-muted-foreground",
|
|
21
|
-
|
|
25
|
+
className: A(
|
|
26
|
+
"flex flex-wrap items-center justify-between gap-4 text-sm text-muted-foreground",
|
|
27
|
+
n
|
|
22
28
|
),
|
|
23
29
|
children: [
|
|
24
|
-
/* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */
|
|
26
|
-
/* @__PURE__ */
|
|
30
|
+
/* @__PURE__ */ l("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
|
|
31
|
+
/* @__PURE__ */ r("span", { className: "whitespace-nowrap", children: "Rows per page:" }),
|
|
32
|
+
/* @__PURE__ */ l(
|
|
27
33
|
x,
|
|
28
34
|
{
|
|
29
35
|
value: String(o),
|
|
30
|
-
onValueChange: (
|
|
36
|
+
onValueChange: (e) => t.setPageSize(Number(e)),
|
|
31
37
|
children: [
|
|
32
|
-
/* @__PURE__ */
|
|
33
|
-
/* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ r(b, { "aria-label": "Rows per page", className: "h-7 w-16", children: /* @__PURE__ */ r(v, {}) }),
|
|
39
|
+
/* @__PURE__ */ r(E, { children: a.map((e) => /* @__PURE__ */ r(_, { value: String(e), children: e }, e)) })
|
|
34
40
|
]
|
|
35
41
|
}
|
|
36
42
|
),
|
|
37
|
-
/* @__PURE__ */
|
|
38
|
-
u,
|
|
39
|
-
"–",
|
|
43
|
+
/* @__PURE__ */ l("span", { className: "whitespace-nowrap tabular-nums", children: [
|
|
40
44
|
h,
|
|
45
|
+
"–",
|
|
46
|
+
f,
|
|
41
47
|
" of ",
|
|
42
|
-
|
|
48
|
+
c
|
|
43
49
|
] })
|
|
44
50
|
] }),
|
|
45
|
-
|
|
46
|
-
/* @__PURE__ */
|
|
47
|
-
|
|
51
|
+
d > 1 && /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center gap-1", children: [
|
|
52
|
+
/* @__PURE__ */ r(
|
|
53
|
+
g,
|
|
48
54
|
{
|
|
49
55
|
variant: "ghost",
|
|
50
56
|
size: "icon-sm",
|
|
51
|
-
onClick: () =>
|
|
52
|
-
disabled: !
|
|
57
|
+
onClick: () => t.previousPage(),
|
|
58
|
+
disabled: !t.getCanPreviousPage(),
|
|
53
59
|
"aria-label": "Previous page",
|
|
54
|
-
children: /* @__PURE__ */
|
|
60
|
+
children: /* @__PURE__ */ r(P, {})
|
|
55
61
|
}
|
|
56
62
|
),
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
63
|
+
m.map(
|
|
64
|
+
(e, u) => e === "ellipsis" ? /* @__PURE__ */ r("span", { className: "px-1", "aria-hidden": "true", children: "..." }, `ellipsis-${u}`) : /* @__PURE__ */ r(
|
|
65
|
+
g,
|
|
66
|
+
{
|
|
67
|
+
variant: e === i ? "default" : "link",
|
|
68
|
+
size: "icon-xs",
|
|
69
|
+
onClick: () => t.setPageIndex(e),
|
|
70
|
+
"aria-label": `Page ${e + 1}`,
|
|
71
|
+
"aria-current": e === i ? "page" : void 0,
|
|
72
|
+
children: e + 1
|
|
73
|
+
},
|
|
74
|
+
e
|
|
75
|
+
)
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ r(
|
|
78
|
+
g,
|
|
71
79
|
{
|
|
72
80
|
variant: "ghost",
|
|
73
81
|
size: "icon-sm",
|
|
74
|
-
onClick: () =>
|
|
75
|
-
disabled: !
|
|
82
|
+
onClick: () => t.nextPage(),
|
|
83
|
+
disabled: !t.getCanNextPage(),
|
|
76
84
|
"aria-label": "Next page",
|
|
77
|
-
children: /* @__PURE__ */
|
|
85
|
+
children: /* @__PURE__ */ r(S, {})
|
|
78
86
|
}
|
|
79
87
|
)
|
|
80
88
|
] })
|
|
@@ -83,6 +91,6 @@ function M({
|
|
|
83
91
|
);
|
|
84
92
|
}
|
|
85
93
|
export {
|
|
86
|
-
|
|
94
|
+
j as DataTablePagination
|
|
87
95
|
};
|
|
88
96
|
//# sourceMappingURL=data-table-pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataTablePaginationProps {\n pageSizeOptions?: number[]\n className?: string\n}\n\nconst DEFAULT_PAGE_SIZE_SMALL = 5\nconst DEFAULT_PAGE_SIZE_MEDIUM = 10\nconst DEFAULT_PAGE_SIZE_LARGE = 25\n\nfunction DataTablePagination({\n pageSizeOptions = [DEFAULT_PAGE_SIZE_SMALL, DEFAULT_PAGE_SIZE_MEDIUM, DEFAULT_PAGE_SIZE_LARGE],\n className,\n}: DataTablePaginationProps) {\n const { table, grouping, enableGrouping } = useDataTable()\n\n const pageCount = table.getPageCount()\n const { pageIndex, pageSize } = table.getState().pagination\n const totalRows = table.getFilteredRowModel().rows.length\n\n if (totalRows === 0) return null\n if (enableGrouping && grouping) return null\n\n const start = pageIndex * pageSize + 1\n const end = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n return (\n <div\n data-slot=\"data-table-pagination\"\n className={cn(\n \"flex items-center justify-between gap-4 text-sm text-muted-foreground\",\n className,\n )}\n >\n <div className=\"flex items-center gap-2\">\n <span className=\"whitespace-nowrap\">Rows per page:</span>\n <Select\n value={String(pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger aria-label=\"Rows per page\" className=\"h-7 w-16\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {pageSizeOptions.map((size) => (\n <SelectItem key={size} value={String(size)}>\n {size}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <span className=\"whitespace-nowrap tabular-nums\">\n {start}–{end} of {totalRows}\n </span>\n </div>\n\n {pageCount > 1 && (\n <div className=\"flex items-center gap-1\">\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n aria-label=\"Previous page\"\n >\n <ChevronLeftIcon />\n </Button>\n\n {
|
|
1
|
+
{"version":3,"file":"data-table-pagination.js","sources":["../../../../src/components/ui/data-table/data-table-pagination.tsx"],"sourcesContent":["\"use client\"\n\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DataTablePaginationProps {\n pageSizeOptions?: number[]\n className?: string\n}\n\nconst DEFAULT_PAGE_SIZE_SMALL = 5\nconst DEFAULT_PAGE_SIZE_MEDIUM = 10\nconst DEFAULT_PAGE_SIZE_LARGE = 25\nconst MAX_VISIBLE_PAGE_ITEMS = 7\n\nfunction getPageItems(pageCount: number, pageIndex: number): Array<number | \"ellipsis\"> {\n if (pageCount <= MAX_VISIBLE_PAGE_ITEMS) {\n return Array.from({ length: pageCount }, (_, index) => index)\n }\n\n const currentPage = pageIndex + 1\n if (currentPage <= 4) {\n return [0, 1, 2, 3, 4, \"ellipsis\", pageCount - 1]\n }\n\n if (currentPage >= pageCount - 3) {\n return [0, \"ellipsis\", pageCount - 5, pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1]\n }\n\n return [0, \"ellipsis\", pageIndex - 1, pageIndex, pageIndex + 1, \"ellipsis\", pageCount - 1]\n}\n\nfunction DataTablePagination({\n pageSizeOptions = [DEFAULT_PAGE_SIZE_SMALL, DEFAULT_PAGE_SIZE_MEDIUM, DEFAULT_PAGE_SIZE_LARGE],\n className,\n}: DataTablePaginationProps) {\n const { table, grouping, enableGrouping } = useDataTable()\n\n const pageCount = table.getPageCount()\n const { pageIndex, pageSize } = table.getState().pagination\n const totalRows = table.getFilteredRowModel().rows.length\n const pageItems = getPageItems(pageCount, pageIndex)\n\n if (totalRows === 0) return null\n if (enableGrouping && grouping) return null\n\n const start = pageIndex * pageSize + 1\n const end = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n return (\n <div\n data-slot=\"data-table-pagination\"\n className={cn(\n \"flex flex-wrap items-center justify-between gap-4 text-sm text-muted-foreground\",\n className,\n )}\n >\n <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n <span className=\"whitespace-nowrap\">Rows per page:</span>\n <Select\n value={String(pageSize)}\n onValueChange={(value) => table.setPageSize(Number(value))}\n >\n <SelectTrigger aria-label=\"Rows per page\" className=\"h-7 w-16\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {pageSizeOptions.map((size) => (\n <SelectItem key={size} value={String(size)}>\n {size}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n <span className=\"whitespace-nowrap tabular-nums\">\n {start}–{end} of {totalRows}\n </span>\n </div>\n\n {pageCount > 1 && (\n <div className=\"flex flex-wrap items-center gap-1\">\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n onClick={() => table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n aria-label=\"Previous page\"\n >\n <ChevronLeftIcon />\n </Button>\n\n {pageItems.map((item, index) =>\n item === \"ellipsis\" ? (\n <span key={`ellipsis-${index}`} className=\"px-1\" aria-hidden=\"true\">\n ...\n </span>\n ) : (\n <Button\n key={item}\n variant={item === pageIndex ? \"default\" : \"link\"}\n size=\"icon-xs\"\n onClick={() => table.setPageIndex(item)}\n aria-label={`Page ${item + 1}`}\n aria-current={item === pageIndex ? \"page\" : undefined}\n >\n {item + 1}\n </Button>\n ),\n )}\n\n <Button\n variant=\"ghost\"\n size=\"icon-sm\"\n onClick={() => table.nextPage()}\n disabled={!table.getCanNextPage()}\n aria-label=\"Next page\"\n >\n <ChevronRightIcon />\n </Button>\n </div>\n )}\n </div>\n )\n}\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],"names":["DEFAULT_PAGE_SIZE_SMALL","DEFAULT_PAGE_SIZE_MEDIUM","DEFAULT_PAGE_SIZE_LARGE","MAX_VISIBLE_PAGE_ITEMS","getPageItems","pageCount","pageIndex","_","index","currentPage","DataTablePagination","pageSizeOptions","className","table","grouping","enableGrouping","useDataTable","pageSize","totalRows","pageItems","start","end","jsxs","cn","jsx","Select","value","SelectTrigger","SelectValue","SelectContent","size","SelectItem","Button","ChevronLeftIcon","item","ChevronRightIcon"],"mappings":"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"}
|