@rubi_who/shadcn-table-pagination/dist/index.esm.js

A reusable Shadcn DataTable component with pagination

import e,{useState as r,useMemo as t}from"react";import{useReactTable as n,getCoreRowModel as a,flexRender as o}from"@tanstack/react-table";import{clsx as s}from"clsx";import{twMerge as i}from"tailwind-merge";import{ChevronLeftIcon as l,MoreHorizontalIcon as c,ChevronRightIcon as u}from"lucide-react";import{Slot as f}from"@radix-ui/react-slot";import{cva as d}from"class-variance-authority";function m(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=Array(r);t<r;t++)n[t]=e[t];return n}function p(e,r,t){return(r=function(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var n=t.call(e,r);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(e)}(e,"string");return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function b(){return b=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},b.apply(null,arguments)}function y(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,n)}return t}function v(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?y(Object(t),!0).forEach(function(r){p(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):y(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function g(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==r.indexOf(n))continue;t[n]=e[n]}return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],-1===r.indexOf(t)&&{}.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}function h(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var n,a,o,s,i=[],l=!0,c=!1;try{if(o=(t=t.call(e)).next,0===r);else for(;!(l=(n=o.call(t)).done)&&(i.push(n.value),i.length!==r);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=t.return&&(s=t.return(),Object(s)!==s))return}finally{if(c)throw a}}return i}}(e,r)||function(e,r){if(e){if("string"==typeof e)return m(e,r);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?m(e,r):void 0}}(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}var x,j={exports:{}},N={};var w,k,O={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */function S(){return w||(w=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===k?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case m:return"Fragment";case b:return"Profiler";case p:return"StrictMode";case h:return"Suspense";case x:return"SuspenseList";case w:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case d:return"Portal";case v:return(e.displayName||"Context")+".Provider";case y:return(e._context.displayName||"Context")+".Consumer";case g:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(t=e.displayName||null)?t:r(e.type)||"Memo";case N:t=e._payload,e=e._init;try{return r(e(t))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,a="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),t(e)}}function a(e){if(e===m)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===N)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function o(){return Error("react-stack-top-frame")}function s(){var e=r(this.type);return z[e]||(z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,t,a,o,i,u,d,m){var p,b=t.children;if(void 0!==b)if(o)if(P(b)){for(o=0;o<b.length;o++)l(b[o]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else l(b);if(_.call(t,"key")){b=r(e);var y=Object.keys(t).filter(function(e){return"key"!==e});o=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",R[b+o]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',o,b,y,b),R[b+o]=!0)}if(b=null,void 0!==a&&(n(a),b=""+a),function(e){if(_.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(t)&&(n(t.key),b=""+t.key),"key"in t)for(var v in a={},t)"key"!==v&&(a[v]=t[v]);else a=t;return b&&function(e,r){function t(){c||(c=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(a,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,t,n,a,o,i,l){return t=o.ref,e={$$typeof:f,type:e,key:r,props:o,_owner:a},null!==(void 0!==t?t:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:s}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,b,u,0,null===(p=S.A)?null:p.getOwner(),a,d,m)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var c,u=e,f=Symbol.for("react.transitional.element"),d=Symbol.for("react.portal"),m=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),b=Symbol.for("react.profiler"),y=Symbol.for("react.consumer"),v=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),h=Symbol.for("react.suspense"),x=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),N=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),k=Symbol.for("react.client.reference"),S=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,P=Array.isArray,C=console.createTask?console.createTask:function(){return null},z={},E=(u={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(u,o)(),A=C(a(o)),R={};O.Fragment=m,O.jsx=function(e,r,t,n,o){var s=1e4>S.recentlyCreatedOwnerStacks++;return i(e,r,t,!1,0,o,s?Error("react-stack-top-frame"):E,s?C(a(e)):A)},O.jsxs=function(e,r,t,n,o){var s=1e4>S.recentlyCreatedOwnerStacks++;return i(e,r,t,!0,0,o,s?Error("react-stack-top-frame"):E,s?C(a(e)):A)}}()),O}var _=(k||(k=1,"production"===process.env.NODE_ENV?j.exports=function(){if(x)return N;x=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function t(r,t,n){var a=null;if(void 0!==n&&(a=""+n),void 0!==t.key&&(a=""+t.key),"key"in t)for(var o in n={},t)"key"!==o&&(n[o]=t[o]);else n=t;return t=n.ref,{$$typeof:e,type:r,key:a,ref:void 0!==t?t:null,props:n}}return N.Fragment=r,N.jsx=t,N.jsxs=t,N}():j.exports=S()),j.exports);function P(){for(var e=arguments.length,r=new Array(e),t=0;t<e;t++)r[t]=arguments[t];return i(s(r))}var C=["className"],z=["className"],E=["className"],A=["className"],R=["className"],T=["className"];function $(e){var r=e.className,t=g(e,C);return _.jsx("div",{"data-slot":"table-container",className:"relative w-full overflow-x-auto",children:_.jsx("table",v({"data-slot":"table",className:P("w-full caption-bottom text-sm",r)},t))})}function D(e){var r=e.className,t=g(e,z);return _.jsx("thead",v({"data-slot":"table-header",className:P("[&_tr]:border-b",r)},t))}function I(e){var r=e.className,t=g(e,E);return _.jsx("tbody",v({"data-slot":"table-body",className:P("[&_tr:last-child]:border-0",r)},t))}function M(e){var r=e.className,t=g(e,A);return _.jsx("tr",v({"data-slot":"table-row",className:P("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",r)},t))}function F(e){var r=e.className,t=g(e,R);return _.jsx("th",v({"data-slot":"table-head",className:P("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",r)},t))}function L(e){var r=e.className,t=g(e,T);return _.jsx("td",v({"data-slot":"table-cell",className:P("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",r)},t))}var U=["className","variant","size","asChild"],V=d("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",{variants:{variant:{default:"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",destructive:"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",secondary:"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2 has-[>svg]:px-3",sm:"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",lg:"h-10 rounded-md px-6 has-[>svg]:px-4",icon:"size-9"}},defaultVariants:{variant:"default",size:"default"}});function G(e){var r=e.className,t=e.variant,n=e.size,a=e.asChild,o=void 0!==a&&a,s=g(e,U),i=o?f:"button";return _.jsx(i,v({"data-slot":"button",className:P(V({variant:t,size:n,className:r}))},s))}var H=["className"],W=["className"],J=["className","isActive","size"],K=["className"],X=["className"],B=["className"];function Y(e){var r=e.className,t=g(e,H);return _.jsx("nav",v({role:"navigation","aria-label":"pagination","data-slot":"pagination",className:P("mx-auto flex w-full justify-center",r)},t))}function q(e){var r=e.className,t=g(e,W);return _.jsx("ul",v({"data-slot":"pagination-content",className:P("flex flex-row items-center gap-1",r)},t))}function Q(e){var r=b({},(function(e){if(null==e)throw new TypeError("Cannot destructure "+e)}(e),e));return _.jsx("li",v({"data-slot":"pagination-item"},r))}function Z(e){var r=e.className,t=e.isActive,n=e.size,a=void 0===n?"icon":n,o=g(e,J);return _.jsx("a",v({"aria-current":t?"page":void 0,"data-slot":"pagination-link","data-active":t,className:P(V({variant:t?"outline":"ghost",size:a}),r)},o))}function ee(e){var r=e.className,t=g(e,K);return _.jsxs(Z,v(v({"aria-label":"Go to previous page",size:"default",className:P("gap-1 px-2.5 sm:pl-2.5",r)},t),{},{children:[_.jsx(l,{}),_.jsx("span",{className:"hidden sm:block",children:"Previous"})]}))}function re(e){var r=e.className,t=g(e,X);return _.jsxs(Z,v(v({"aria-label":"Go to next page",size:"default",className:P("gap-1 px-2.5 sm:pr-2.5",r)},t),{},{children:[_.jsx("span",{className:"hidden sm:block",children:"Next"}),_.jsx(u,{})]}))}function te(e){var r=e.className,t=g(e,B);return _.jsxs("span",v(v({"aria-hidden":!0,"data-slot":"pagination-ellipsis",className:P("flex size-9 items-center justify-center",r)},t),{},{children:[_.jsx(c,{className:"size-4"}),_.jsx("span",{className:"sr-only",children:"More pages"})]}))}function ne(e){var s,i=e.columns,l=e.data,c=e.noCase,u=void 0===c?"No data available":c,f=e.itemsPerPage,d=void 0===f?3:f,m=e.tableContainerClassName,p=e.tableHeadClassName,b=e.tableRowClassName,y=e.tableCellClassName,v=e.paginationWrapperClassName,g=e.paginationButtonClassName,x=e.paginationLinkActiveClassName,j=e.paginationLinkInactiveClassName,N=h(r(1),2),w=N[0],k=N[1],O=Math.ceil(l.length/d),S=t(function(){var e=(w-1)*d;return l.slice(e,e+d)},[l,w,d]),C=n({data:S,columns:i,getCoreRowModel:a()}),z=function(e){k(e>0&&e<=O?e:1)};return _.jsxs("div",{children:[_.jsx("div",{className:P("rounded-md border",m),children:_.jsxs($,{children:[_.jsx(D,{children:C.getHeaderGroups().map(function(e){return _.jsx(M,{children:e.headers.map(function(e){return _.jsx(F,{className:P("text-center w-[200px]",p),children:e.isPlaceholder?null:o(e.column.columnDef.header,e.getContext())},e.id)})},e.id)})}),_.jsx(I,{children:null!==(s=C.getRowModel().rows)&&void 0!==s&&s.length?C.getRowModel().rows.map(function(e){return _.jsx(M,{"data-state":e.getIsSelected()&&"selected",className:P("border-b hover:bg-muted/50 data-[state=selected]:bg-muted",b),children:e.getVisibleCells().map(function(e){return _.jsx(L,{className:P("p-4",y),children:o(e.column.columnDef.cell,e.getContext())},e.id)})},e.id)}):_.jsx(M,{children:_.jsx(L,{colSpan:i.length,className:P("h-24 text-center",y),children:_.jsx("span",{dangerouslySetInnerHTML:{__html:u}})})})})]})}),_.jsx(Y,{className:P("mt-5 flex justify-end mb-3",v),children:_.jsxs(q,{className:"flex",children:[_.jsx(Q,{children:_.jsx(ee,{onClick:function(){z(w-1)},className:P("mr-2 px-3 py-1",1===w,"pointer-events-none opacity-50",g)})}),function(){var e=[];if(O<=3){for(var r=1;r<=O;r++)e.push(r);return e}for(var t=Math.max(1,w-1),n=Math.min(O,t+3-1),a=t;a<=n;a++)e.push(a);return e}().map(function(e){return _.jsx(Q,{children:_.jsx(Z,{href:"#",onClick:function(){z(e)},className:P(w===e?x||"bg-teal-600 text-white":j),children:e})},e)}),O>3&&w<O-1&&_.jsx(Q,{children:_.jsx(te,{})}),_.jsx(Q,{children:_.jsx(re,{onClick:function(){z(w+1)},className:P(w===O?"pointer-events-none opacity-50":"",g)})})]})})]})}export{G as Button,ne as DataTable,V as buttonVariants};
//# sourceMappingURL=index.esm.js.map