react-glowing-tables/dist/react-cool-tables.umd.js

`react-glowing-tables` is a flexible and stylish React table component that supports editing, pagination, sorting, and glowing hover effects — all out of the box.

(function(E,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],h):(E=typeof globalThis<"u"?globalThis:E||self,h(E.ReactCoolTables={},E.React))})(this,function(E,h){"use strict";var A={exports:{}},S={};/**
 * @license React
 * react-jsx-runtime.production.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.
 */var J;function te(){if(J)return S;J=1;var t=Symbol.for("react.transitional.element"),s=Symbol.for("react.fragment");function a(d,c,u){var o=null;if(u!==void 0&&(o=""+u),c.key!==void 0&&(o=""+c.key),"key"in c){u={};for(var b in c)b!=="key"&&(u[b]=c[b])}else u=c;return c=u.ref,{$$typeof:t,type:d,key:o,ref:c!==void 0?c:null,props:u}}return S.Fragment=s,S.jsx=a,S.jsxs=a,S}var 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.
 */var B;function ne(){return B||(B=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===me?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case P:return"Profiler";case Y:return"StrictMode";case i:return"Suspense";case y:return"SuspenseList";case I:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case T:return"Portal";case W:return(e.displayName||"Context")+".Provider";case D:return(e._context.displayName||"Context")+".Consumer";case F:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case k:return n=e.displayName||null,n!==null?n:t(e.type)||"Memo";case v:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function s(e){return""+e}function a(e){try{s(e);var n=!1}catch{n=!0}if(n){n=console;var l=n.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),s(e)}}function d(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===v)return"<...>";try{var n=t(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function c(){var e=z.A;return e===null?null:e.getOwner()}function u(){return Error("react-stack-top-frame")}function o(e){if(Q.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function b(e,n){function l(){q||(q=!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)",n))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function x(){var e=t(this.type);return K[e]||(K[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.")),e=this.props.ref,e!==void 0?e:null}function C(e,n,l,f,R,g,G,U){return l=g.ref,e={$$typeof:M,type:e,key:n,props:g,_owner:R},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:x}):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:G}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function w(e,n,l,f,R,g,G,U){var m=n.children;if(m!==void 0)if(f)if(he(m)){for(f=0;f<m.length;f++)L(m[f]);Object.freeze&&Object.freeze(m)}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(m);if(Q.call(n,"key")){m=t(e);var N=Object.keys(n).filter(function(xe){return xe!=="key"});f=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",re[m+f]||(N=0<N.length?"{"+N.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,f,m,N,m),re[m+f]=!0)}if(m=null,l!==void 0&&(a(l),m=""+l),o(n)&&(a(n.key),m=""+n.key),"key"in n){l={};for(var H in n)H!=="key"&&(l[H]=n[H])}else l=n;return m&&b(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),C(e,m,g,R,c(),l,G,U)}function L(e){typeof e=="object"&&e!==null&&e.$$typeof===M&&e._store&&(e._store.validated=1)}var p=h,M=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),Y=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),D=Symbol.for("react.consumer"),W=Symbol.for("react.context"),F=Symbol.for("react.forward_ref"),i=Symbol.for("react.suspense"),y=Symbol.for("react.suspense_list"),k=Symbol.for("react.memo"),v=Symbol.for("react.lazy"),I=Symbol.for("react.activity"),me=Symbol.for("react.client.reference"),z=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Q=Object.prototype.hasOwnProperty,he=Array.isArray,V=console.createTask?console.createTask:function(){return null};p={"react-stack-bottom-frame":function(e){return e()}};var q,K={},$=p["react-stack-bottom-frame"].bind(p,u)(),ee=V(d(u)),re={};O.Fragment=_,O.jsx=function(e,n,l,f,R){var g=1e4>z.recentlyCreatedOwnerStacks++;return w(e,n,l,!1,f,R,g?Error("react-stack-top-frame"):$,g?V(d(e)):ee)},O.jsxs=function(e,n,l,f,R){var g=1e4>z.recentlyCreatedOwnerStacks++;return w(e,n,l,!0,f,R,g?Error("react-stack-top-frame"):$,g?V(d(e)):ee)}}()),O}var X;function se(){return X||(X=1,process.env.NODE_ENV==="production"?A.exports=te():A.exports=ne()),A.exports}var r=se();const j={white:"#ffff",primaryRed:"#E53935",secondary:"#222222"},oe=({width:t=28,height:s=28,color:a=j.secondary})=>r.jsxs("svg",{width:t,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("path",{d:"M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z",stroke:a,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z",stroke:a,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),ae=({width:t=28,height:s=28,color:a=j.secondary})=>r.jsxs("svg",{width:t,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[r.jsx("path",{d:"M21.2799 6.40005L11.7399 15.94C10.7899 16.89 7.96987 17.33 7.33987 16.7C6.70987 16.07 7.13987 13.25 8.08987 12.3L17.6399 2.75002C17.8754 2.49308 18.1605 2.28654 18.4781 2.14284C18.7956 1.99914 19.139 1.92124 19.4875 1.9139C19.8359 1.90657 20.1823 1.96991 20.5056 2.10012C20.8289 2.23033 21.1225 2.42473 21.3686 2.67153C21.6147 2.91833 21.8083 3.21243 21.9376 3.53609C22.0669 3.85976 22.1294 4.20626 22.1211 4.55471C22.1128 4.90316 22.0339 5.24635 21.8894 5.5635C21.7448 5.88065 21.5375 6.16524 21.2799 6.40005V6.40005Z",stroke:a,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),r.jsx("path",{d:"M11 4H6C4.93913 4 3.92178 4.42142 3.17163 5.17157C2.42149 5.92172 2 6.93913 2 8V18C2 19.0609 2.42149 20.0783 3.17163 20.8284C3.92178 21.5786 4.93913 22 6 22H17C19.21 22 20 20.2 20 18V13",stroke:a,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),ie=({width:t=28,height:s=28,color:a=j.secondary})=>r.jsx("svg",{width:t,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17",stroke:a,strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),ce=({width:t=28,height:s=28,color:a=j.secondary})=>r.jsx("svg",{width:t,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M4 12.6111L8.92308 17.5L20 6.5",stroke:a,strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),le=({col:t,value:s,row:a,rowIndex:d,onChange:c})=>{if(t.component)return r.jsx(r.Fragment,{children:t.component});if(!t.editable)return r.jsx("span",{children:s==null?void 0:s.toString()});const u=o=>{c==null||c(d,t.key,o.target.value)};switch(t.type){case"select":return t.options?r.jsx("select",{value:s??"",onChange:u,className:"relative z-50 w-full px-2 py-1 border border-gray-800 bg-secondary text-white rounded-sm focus:outline-none cursor-pointer",children:t.options.map(o=>r.jsx("option",{value:o,children:o},o))}):r.jsx("span",{children:s});case"checkbox":return r.jsxs("label",{className:"inline-flex items-center cursor-pointer",children:[r.jsx("input",{type:"checkbox",checked:!!s,onChange:o=>c==null?void 0:c(d,t.key,o.target.checked),className:"sr-only peer"}),r.jsx("div",{className:"z-30 w-5 h-5 border-2 bg-thirdly border-gray-400 rounded-sm peer-checked:bg-secondary peer-checked:border-secondary flex items-center justify-center relative top-1",children:s&&r.jsx(ce,{width:14,height:12,color:j.white})})]});case"button":return r.jsxs("section",{className:"flex items-center gap-3 relative z-30",children:[r.jsx("button",{onClick:()=>{var o;return(o=t.onClick)==null?void 0:o.call(t,a)},className:"cursor-pointer w-8 h-8 flex items-center justify-center bg-secondary hover:opacity-75 transition-all text-white rounded",children:r.jsx(oe,{width:21,height:21,color:j.white})}),r.jsx("button",{onClick:()=>{var o;return(o=t.onClick)==null?void 0:o.call(t,a)},className:"cursor-pointer w-8 h-8 flex items-center justify-center bg-secondary hover:opacity-75 transition-all text-white rounded",children:r.jsx(ae,{width:19,height:21,color:j.white})}),r.jsx("button",{onClick:()=>{var o;return(o=t.onClick)==null?void 0:o.call(t,a)},className:"cursor-pointer w-8 h-8 flex items-center justify-center bg-secondary hover:opacity-75 transition-all text-white rounded",children:r.jsx(ie,{width:22,height:22,color:j.primaryRed})})]});case"date":return r.jsx("input",{type:"date",value:s??"",onChange:u,className:"relative z-30 bg-secondary text-white border-gray-800 border focus:outline-none"});case"number":return r.jsx("input",{type:"number",value:s??"",onChange:u,className:"relative z-30 bg-secondary text-white border-gray-800 border px-2 py-1 rounded-sm focus:outline-none"});case"text":default:return r.jsx("input",{type:"text",value:s??"",onChange:u,className:"relative z-30 w-full px-2 py-1 border bg-secondary border-gray-800 text-white rounded-sm focus:outline-none"})}},ue=({color:t="rgba(255, 255, 255, 0.4)"})=>{const[s,a]=h.useState([]);return h.useEffect(()=>{const d=c=>{const u=Date.now()+Math.random(),o={x:c.clientX,y:c.clientY,id:u};a(b=>[...b,o]),setTimeout(()=>{a(b=>b.filter(x=>x.id!==u))},1e3)};return window.addEventListener("mousemove",d),()=>window.removeEventListener("mousemove",d)},[]),r.jsxs(r.Fragment,{children:[r.jsx("div",{className:"fixed inset-0 pointer-events-none z-0",children:s.map(d=>r.jsx("div",{className:"absolute w-40 h-40 rounded-full",style:{top:d.y,left:d.x,transform:"translate(-50%, -50%)",background:`radial-gradient(circle, ${t} 0%, rgba(255,255,255,0) 80%)`,animation:"fadeGlow 1s ease-out forwards",filter:"blur(22px)",opacity:.3}},d.id))}),r.jsx("style",{children:`
        @keyframes fadeGlow {
          from {
            opacity: 0.3;
            transform: translate(-50%, -50%) scale(1);
          }
          to {
            opacity: 0;
            transform: translate(-50%, -50%) scale(1.2);
          }
        }
      `})]})},Z=({columns:t,data:s,onCellChange:a,className:d,backgroundColor:c,blocksColor:u})=>r.jsxs("div",{className:`overflow-x-auto ${d} bg-thirdly border-gray-400`,children:[r.jsx(ue,{color:"red"}),r.jsxs("table",{className:"min-w-full border border-gray-300 rounded-md",children:[r.jsx("thead",{className:"bg-secondary text-white rounded-md relative z-30",children:r.jsx("tr",{children:t.map(o=>r.jsx("th",{className:"text-left font-medium px-4 py-2",children:o.title},o.key))})}),r.jsx("tbody",{children:s.map((o,b)=>r.jsx("tr",{children:t.map(x=>{const C=o[x.key];return r.jsx("td",{className:"px-4 py-2 border-b border-gray-400 rounded-md",children:r.jsx(le,{col:x,value:C,row:o,rowIndex:b,onChange:a,backgroundColor:c,blocksColor:u})},x.key)})},b))})]})]}),de=({width:t=28,height:s=28,color:a=j.secondary})=>r.jsx("svg",{width:t,height:s,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:r.jsx("path",{d:"M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z",fill:a})}),fe=({columns:t,data:s,onChange:a,className:d,pageSizeOptions:c=[5,10,20],defaultPageSize:u=10,backgroundColor:o,blocksColor:b})=>{const[x,C]=h.useState(1),[w,L]=h.useState(u),[p,M]=h.useState(null),[T,_]=h.useState(s);h.useEffect(()=>{_(s)},[s]),h.useEffect(()=>{C(1)},[w]);const Y=h.useMemo(()=>p?[...T].sort((i,y)=>{const k=i[p.key],v=y[p.key];return k<v?p.direction==="asc"?-1:1:k>v?p.direction==="asc"?1:-1:0}):T,[T,p]),P=Math.ceil(T.length/w),D=h.useMemo(()=>{const i=(x-1)*w;return Y.slice(i,i+w)},[Y,x,w]),W=(i,y,k)=>{const v=[...T],I=(x-1)*w+i;v[I]={...v[I],[y]:k},_(v),a==null||a(v)},F=i=>{!i.key||i.key==="__checkbox__"||M(y=>(y==null?void 0:y.key)===i.key?{key:i.key,direction:y.direction==="asc"?"desc":"asc"}:{key:i.key,direction:"asc"})};return r.jsxs("div",{children:[r.jsx("div",{className:"overflow-x-auto",children:r.jsx(Z,{columns:t.map(i=>({...i,title:r.jsxs("span",{className:"cursor-pointer select-none flex items-center",onClick:()=>F(i),children:[i.title,(p==null?void 0:p.key)===i.key&&r.jsx("div",{className:` transition-all transform ${p.direction==="asc"?"":"rotate-180"}`,children:r.jsx(de,{color:j.white})})]})})),data:D,onCellChange:W,className:d,backgroundColor:o,blocksColor:b})}),r.jsxs("div",{className:"flex items-center justify-between text-sm px-2 py-4 bg-thirdly border-gray-400",children:[r.jsxs("div",{className:"text-white",children:["Page ",x," of ",P]}),r.jsxs("div",{className:"flex items-center gap-2 text-white relative",children:[r.jsx("select",{className:"border px-2 py-1 focus:outline-none",value:w,onChange:i=>L(Number(i.target.value)),children:c.map(i=>r.jsxs("option",{value:i,children:["Show ",i]},i))}),r.jsx("button",{className:"bg-secondary border-md py-1 px-3 rounded-md cursor-pointer",disabled:x===1,onClick:()=>C(i=>i-1),children:"Prev"}),[...Array(P)].map((i,y)=>{const k=y+1;return r.jsx("button",{onClick:()=>C(k),className:`px-3 py-1 border rounded cursor-pointer ${x===k?"bg-secondary text-white":"bg-gray-500 text-white"}`,children:k},k)}),r.jsx("button",{className:"bg-secondary border-md py-1 px-3 rounded-md cursor-pointer",disabled:x>=P,onClick:()=>C(i=>i+1),children:"Next"})]})]})]})};E.CoolTable=Z,E.CoolTablePro=fe,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});