react-column-drag-resize-table 0.1.2 → 0.1.4

package/README.md

@@ -168,6 +168,8 @@ export function AdvancedExample() {
 | `onPageSizeChange` | no | `(size: number) => void` | — | — | Fires when the user changes page size. |
 | `filterBarClassName` | no | `string` | `''` | — | Extra class on the filter toolbar row. |
 | `paginationClassName` | no | `string` | `''` | — | Extra class on the pagination row. |
+| `ariaLabel` | no | `string` | `'Data table'` | — | Accessible name for the `<table>` (`aria-label`). |
+| `clearFiltersLabel` | no | `string` | `'Clear filters'` | — | Label for the button that resets all active filters. |
 
 ### `Column`
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react");function pt(s,a){if(!a||typeof a!="object")return s;let n=s;for(const c of Object.keys(a)){const x=/(.*)_from$/.exec(c),f=/(.*)_to$/.exec(c),j=/(.*)_datefrom$/.exec(c),g=/(.*)_dateto$/.exec(c);if(x){const l=x[1];if(a[c]===""||a[c]==null)continue;n=n.filter(p=>{const o=p[l];return parseFloat(o)>=parseFloat(a[c])})}else if(f){const l=f[1];if(a[c]===""||a[c]==null)continue;n=n.filter(p=>{const o=p[l];return parseFloat(o)<=parseFloat(a[c])})}else if(j){const l=j[1];if(!a[c])continue;n=n.filter(p=>{const o=p[l];return o==null?!1:String(o).slice(0,10)>=a[c]})}else if(g){const l=g[1];if(!a[c])continue;n=n.filter(p=>{const o=p[l];if(o==null)return!1;const m=String(o).slice(0,10);return a[c]>=m})}else{if(a[c]===""||a[c]==null)continue;n=n.filter(l=>l[c]==a[c])}}return n}function Bt({currentPage:s,totalPages:a,onPageChange:n,className:c="",getPageHref:x}){if(a<=1)return null;const f=[];for(let l=1;l<=a;l+=1)f.push(l);const j=l=>{l<1||l>a||l===s||n(l)},g=({page:l,children:p})=>{const o=l===s;return x?e.jsx("li",{className:o?"active":"waves-effect",children:e.jsx("a",{href:x(l),onClick:m=>{m.preventDefault(),j(l)},children:p})},l):e.jsx("li",{className:o?"active":"waves-effect",onClick:()=>j(l),onKeyDown:m=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),j(l))},role:"button",tabIndex:0,children:e.jsx("a",{href:"#",children:p})},l)};return e.jsx("div",{className:`pagination react-data-table-pagination ${c}`.trim(),children:e.jsxs("ul",{className:"pagination right",children:[s===1?e.jsx("li",{className:"disabled",children:e.jsx("span",{className:"react-data-table-pagination__nav","aria-hidden":!0,children:"‹"})}):e.jsx("li",{className:"waves-effect",children:e.jsx("a",{href:"#",onClick:l=>{l.preventDefault(),j(s-1)},"aria-label":"Previous page",children:"‹"})}),f.map(l=>e.jsx(g,{page:l,children:l},l)),s===a?e.jsx("li",{className:"disabled",children:e.jsx("span",{className:"react-data-table-pagination__nav","aria-hidden":!0,children:"›"})}):e.jsx("li",{className:"waves-effect",children:e.jsx("a",{href:"#",onClick:l=>{l.preventDefault(),j(s+1)},"aria-label":"Next page",children:"›"})})]})})}const Rt="react-column-drag-resize-table:v1:order:",Jt="react-column-drag-resize-table:v1:widths:";function K(s,a){const n=Array.isArray(s)?s:[],c=new Set(a),x=[];for(const f of n)c.has(f)&&x.push(f);for(const f of a)x.includes(f)||x.push(f);return x}function qt(s){if(!s||typeof localStorage>"u")return null;try{const a=localStorage.getItem(s);if(!a)return null;const n=JSON.parse(a);return Array.isArray(n)?n:null}catch{return null}}function Ht(s,a){if(!(!s||typeof localStorage>"u"))try{localStorage.setItem(s,JSON.stringify(a))}catch{}}function Gt(s){if(!s||typeof localStorage>"u")return null;try{const a=localStorage.getItem(s);if(!a)return null;const n=JSON.parse(a);return n&&typeof n=="object"&&!Array.isArray(n)?n:null}catch{return null}}function Ut(s,a){if(!(!s||typeof localStorage>"u"))try{localStorage.setItem(s,JSON.stringify(a))}catch{}}function Qt(s,a){return s&&s.id!=null?String(s.id):String(a)}function Yt(s,a){return s.render?s.render(a):typeof s.accessor=="function"?s.accessor(a):s.accessor!=null?a[s.accessor]:a[s.id]}function Zt(s,a,n,c){const x=a!=null,f=d.useMemo(()=>(s||[]).map(_=>_.id),[s]),[j,g]=d.useState(null),l=d.useRef(c);d.useEffect(()=>{if(x)return;const _=l.current!==c;l.current=c,g(h=>{const b=c?qt(c):null;return K(h===null||_?b??f:h,f)})},[f,x,c]);const p=d.useMemo(()=>{const _=x?a:j||f,h=new Map((s||[]).map(v=>[v.id,v])),b=new Set,L=[];for(const v of _)h.has(v)&&!b.has(v)&&(L.push(v),b.add(v));for(const v of f)b.has(v)||L.push(v);return L},[s,a,j,f,x]),o=d.useMemo(()=>{const _=new Map((s||[]).map(h=>[h.id,h]));return p.map(h=>_.get(h)).filter(Boolean)},[s,p]),m=d.useCallback(_=>{const h=K(_,f);x||(g(h),c&&Ht(c,h)),n==null||n(h)},[x,n,c,f]);return{columns:o,orderedIds:p,setOrder:m}}function Vt({columns:s,rows:a,getRowId:n=Qt,loading:c=!1,emptyMessage:x="No rows to display.",summary:f,className:j="",tableClassName:g="highlight",columnOrder:l,onColumnOrderChange:p,enableColumnReorder:o=!0,columnWidths:m,onColumnWidthsChange:_,enableColumnResize:h=!0,minColumnWidth:b=64,layoutStorageKey:L,enableFiltering:v=!1,filterFields:W=[],filters:P,onFiltersChange:B,defaultFilters:mt,enablePagination:N=!1,defaultPageSize:bt=10,pageSizeOptions:R=[5,10,20,50],currentPage:C,onPageChange:S,pageSize:tt,onPageSizeChange:J,filterBarClassName:et="",paginationClassName:jt="",renderSummary:at}){const z=d.useId(),G=P!==void 0,[vt,Nt]=d.useState(()=>({...mt??{}})),w=C!==void 0,U=tt!==void 0,[yt,q]=d.useState(1),[St,gt]=d.useState(bt),I=G?P:vt,M=U?tt:St,st=d.useMemo(()=>(s||[]).map(t=>t.id),[s]),rt=d.useMemo(()=>L??[...st].sort().join("|"),[L,st]),wt=p==null&&l==null?`${Rt}${rt}`:null,k=_==null&&m===void 0?`${Jt}${rt}`:null,E=m!==void 0,[Dt,lt]=d.useState({}),F=E?m:Dt;d.useEffect(()=>{if(E||!k)return;const t=Gt(k);t&&lt(t)},[E,k]);const Q=d.useCallback((t,r)=>{E?_==null||_({...m,[t]:r}):lt(u=>{const i={...u,[t]:r};return _==null||_(i),k&&Ut(k,i),i})},[E,m,_,k]),Y=d.useRef(null),{columns:Z,orderedIds:ct,setOrder:it}=Zt(s,l,p,wt),T=d.useMemo(()=>v?pt(a,I):a,[a,v,I]),Mt=a.length,It=T.length,D=d.useMemo(()=>N?Math.max(1,Math.ceil(T.length/M)):1,[N,T.length,M]),nt=w?C:yt,H=d.useMemo(()=>N?Math.min(Math.max(1,nt),D):1,[N,nt,D]);d.useEffect(()=>{!N||w||q(t=>t>D?D:t)},[D,N,w]);const dt=d.useMemo(()=>{if(!N)return T;const t=(H-1)*M;return T.slice(t,t+M)},[N,T,H,M]),$t=d.useCallback(t=>{const r=Math.min(Math.max(1,t),D);w?S==null||S(r):q(r)},[D,w,S]),Lt=d.useCallback((t,r)=>{const u=typeof r=="string"?r.trim():r,i={...I};u===""||u==null?delete i[t]:i[t]=u,G?B==null||B(i):Nt(i),N&&(w?S==null||S(1):q(1))},[I,G,B,N,w,S]),ot=d.useCallback(t=>{const r=Number(t.target.value);Number.isNaN(r)||r<1||(U?J==null||J(r):gt(r),w?S==null||S(1):q(1))},[U,J,w,S]),kt=d.useCallback(t=>{var u;const r=(u=t.currentTarget)==null?void 0:u.id;r&&o&&(t.dataTransfer.setData("text",r),t.dataTransfer.effectAllowed="move")},[o]),Tt=d.useCallback(t=>{var xt,_t;if(!o)return;const r=t.dataTransfer.getData("text"),u=(_t=(xt=t.target).closest)==null?void 0:_t.call(xt,"th"),i=u==null?void 0:u.id;if(!i||!r||i===r)return;const y=[...ct],A=y.indexOf(r),O=y.indexOf(i);if(A<0||O<0)return;const $=u.getBoundingClientRect(),V=t.clientX>=$.x+parseFloat($.width)/2,X=y.filter(Xt=>Xt!==r);let ht=X.indexOf(i);V&&(ht+=1),X.splice(ht,0,r),it(X),t.dataTransfer.clearData()},[ct,o,it]),At=d.useCallback((t,r)=>{if(!h)return;r.preventDefault(),r.stopPropagation();const u=r.currentTarget.closest("th"),i=F[t]??(u?u.getBoundingClientRect().width:b);Y.current={colId:t,startX:r.clientX,startW:i},document.body.classList.add("react-data-table--resizing");const y=O=>{const $=Y.current;if(!$)return;const V=O.clientX-$.startX,X=Math.max(b,$.startW+V);Q($.colId,X)},A=()=>{Y.current=null,document.body.classList.remove("react-data-table--resizing"),document.removeEventListener("mousemove",y),document.removeEventListener("mouseup",A)};document.addEventListener("mousemove",y),document.addEventListener("mouseup",A)},[h,F,b,Q]);if(c)return e.jsx("div",{className:`table react-data-table react-data-table--loading ${j}`.trim(),children:e.jsx("div",{className:"react-data-table__spinner","aria-busy":"true","aria-label":"Loading"})});if(!s||s.length===0)return null;const zt=o||h,ut=v&&W.length>0,ft=N&&Array.isArray(R)&&R.length>0,Et=at?at({totalRows:Mt,filteredCount:It,currentPage:H,pageSize:M,totalPages:D}):f,Ft=Z.map(t=>{const r=F[t.id],u=r!=null?{width:r,minWidth:b,maxWidth:r}:{minWidth:b};return e.jsxs("th",{id:t.id,className:["react-data-table__th",o&&"react-data-table__th--draggable"].filter(Boolean).join(" "),style:u,draggable:o?"true":"false",onDrop:Tt,onDragStart:kt,onDragOver:i=>i.preventDefault(),title:o&&h?"Drag to reorder · Drag the right edge to resize":o?"Drag to reorder columns":h?"Drag the right edge to resize":void 0,children:[e.jsxs("div",{className:"react-data-table__th-main",children:[o?e.jsx("span",{className:"react-data-table__drag-grip","aria-hidden":"true",title:"Drag to reorder"}):null,e.jsx("span",{className:"react-data-table__th-title",children:t.title})]}),h?e.jsx("span",{className:"react-data-table__resize-handle",role:"separator","aria-orientation":"vertical",tabIndex:0,"aria-label":"Resize column",title:"Drag to resize",onMouseDown:i=>At(t.id,i),onKeyDown:i=>{var y;if(i.key==="ArrowLeft"||i.key==="ArrowRight"){i.preventDefault();const A=i.key==="ArrowLeft"?-8:8,O=F[t.id]??((y=i.currentTarget.closest("th"))==null?void 0:y.getBoundingClientRect().width)??b;Q(t.id,Math.max(b,O+A))}}}):null]},t.id)}),Ot=dt.length>0?dt.map((t,r)=>e.jsx("tr",{children:Z.map(u=>{const i=F[u.id],y=i!=null?{width:i,minWidth:b,maxWidth:i}:{minWidth:b};return e.jsx("td",{style:y,children:Yt(u,t)},u.id)})},n(t,r))):[e.jsx("tr",{children:e.jsx("td",{colSpan:Z.length,className:"react-data-table__empty",children:x})},"__empty")];return e.jsxs("div",{className:`table react-data-table ${j}`.trim(),children:[ut?e.jsxs("div",{className:`react-data-table__filter-bar ${et}`.trim(),role:"search",children:[W.map(t=>{const r=t.field,u=`${z}-filter-${r}`,i=I[r]!=null&&I[r]!==""?String(I[r]):"";return e.jsxs("div",{className:"react-data-table__filter-field",children:[e.jsx("label",{className:"react-data-table__filter-label",htmlFor:u,children:t.label}),e.jsx("input",{id:u,className:"react-data-table__filter-input",type:"text",placeholder:t.placeholder??"",value:i,onChange:y=>Lt(r,y.target.value),autoComplete:"off"})]},r)}),ft?e.jsxs("div",{className:"react-data-table__filter-field react-data-table__filter-field--page-size",children:[e.jsx("label",{className:"react-data-table__filter-label",htmlFor:`${z}-page-size`,children:"Rows per page"}),e.jsx("select",{id:`${z}-page-size`,className:"react-data-table__filter-select",value:M,onChange:ot,children:R.map(t=>e.jsx("option",{value:t,children:t},t))})]}):null]}):null,!ut&&N&&ft?e.jsx("div",{className:`react-data-table__toolbar react-data-table__toolbar--pagination-only ${et}`.trim(),children:e.jsxs("div",{className:"react-data-table__filter-field react-data-table__filter-field--page-size",children:[e.jsx("label",{className:"react-data-table__filter-label",htmlFor:`${z}-page-size-solo`,children:"Rows per page"}),e.jsx("select",{id:`${z}-page-size-solo`,className:"react-data-table__filter-select",value:M,onChange:ot,children:R.map(t=>e.jsx("option",{value:t,children:t},t))})]})}):null,zt?e.jsxs("div",{className:"react-data-table__hints",role:"note",children:[o?e.jsxs("span",{className:"react-data-table__hint react-data-table__hint--drag",children:[e.jsx("span",{className:"react-data-table__hint-icon react-data-table__hint-icon--grip","aria-hidden":"true"}),"Drag column headers to reorder"]}):null,h?e.jsxs("span",{className:"react-data-table__hint react-data-table__hint--resize",children:[e.jsx("span",{className:"react-data-table__hint-icon react-data-table__hint-icon--arrows","aria-hidden":"true"}),"Drag the right edge of a header to resize"]}):null]}):null,e.jsx("div",{className:"react-data-table__scroll",children:e.jsxs("table",{className:g,style:{tableLayout:"fixed"},children:[e.jsx("thead",{className:"grey lighten-3",children:e.jsx("tr",{children:Ft})}),e.jsx("tbody",{children:Ot})]})}),Et,N?e.jsx(Bt,{currentPage:H,totalPages:D,onPageChange:$t,className:jt}):null]})}exports.DataTable=Vt;exports.filterRows=pt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),Qt=require("react-dom");function yt(s,r){if(!r||typeof r!="object")return s;let o=s;for(const l of Object.keys(r)){const h=/(.*)_from$/.exec(l),d=/(.*)_to$/.exec(l),$=/(.*)_datefrom$/.exec(l),u=/(.*)_dateto$/.exec(l);if(h){const x=h[1];if(r[l]===""||r[l]==null)continue;o=o.filter(b=>{const f=b[x];return parseFloat(f)>=parseFloat(r[l])})}else if(d){const x=d[1];if(r[l]===""||r[l]==null)continue;o=o.filter(b=>{const f=b[x];return parseFloat(f)<=parseFloat(r[l])})}else if($){const x=$[1];if(!r[l])continue;o=o.filter(b=>{const f=b[x];return f==null?!1:String(f).slice(0,10)>=r[l]})}else if(u){const x=u[1];if(!r[l])continue;o=o.filter(b=>{const f=b[x];if(f==null)return!1;const E=String(f).slice(0,10);return r[l]>=E})}else{if(r[l]===""||r[l]==null)continue;o=o.filter(x=>x[l]==r[l])}}return o}function Zt({currentPage:s,totalPages:r,onPageChange:o,className:l=""}){if(r<=1)return null;const h=[];for(let u=1;u<=r;u+=1)h.push(u);const d=u=>{u<1||u>r||u===s||o(u)},$=({page:u,children:x})=>{const b=u===s;return e.jsx("li",{className:b?"active":"waves-effect",children:e.jsx("button",{type:"button",onClick:()=>d(u),"aria-current":b?"page":void 0,children:x})})};return e.jsx("div",{className:`pagination react-data-table-pagination ${l}`.trim(),children:e.jsxs("ul",{className:"pagination right",children:[s===1?e.jsx("li",{className:"disabled",children:e.jsx("span",{className:"react-data-table-pagination__nav","aria-hidden":"true",children:"‹"})}):e.jsx("li",{className:"waves-effect",children:e.jsx("button",{type:"button",onClick:()=>d(s-1),"aria-label":"Previous page",children:"‹"})}),h.map(u=>e.jsx($,{page:u,children:u},u)),s===r?e.jsx("li",{className:"disabled",children:e.jsx("span",{className:"react-data-table-pagination__nav","aria-hidden":"true",children:"›"})}):e.jsx("li",{className:"waves-effect",children:e.jsx("button",{type:"button",onClick:()=>d(s+1),"aria-label":"Next page",children:"›"})})]})})}const Vt="react-column-drag-resize-table:v1:order:",Kt="react-column-drag-resize-table:v1:widths:";function et(s,r){const o=Array.isArray(s)?s:[],l=new Set(r),h=[];for(const d of o)l.has(d)&&h.push(d);for(const d of r)h.includes(d)||h.push(d);return h}function Wt(s){if(!s||typeof localStorage>"u")return null;try{const r=localStorage.getItem(s);if(!r)return null;const o=JSON.parse(r);return Array.isArray(o)?o:null}catch{return null}}function Pt(s,r){if(!(!s||typeof localStorage>"u"))try{localStorage.setItem(s,JSON.stringify(r))}catch{}}function Ct(s){if(!s||typeof localStorage>"u")return null;try{const r=localStorage.getItem(s);if(!r)return null;const o=JSON.parse(r);return o&&typeof o=="object"&&!Array.isArray(o)?o:null}catch{return null}}function te(s,r){if(!(!s||typeof localStorage>"u"))try{localStorage.setItem(s,JSON.stringify(r))}catch{}}function ee(s,r){return s&&s.id!=null?String(s.id):String(r)}function re(s,r){return s.render?s.render(r):typeof s.accessor=="function"?s.accessor(r):s.accessor!=null?r[s.accessor]:r[s.id]}function ae(s,r,o,l){const h=r!=null,d=n.useMemo(()=>(s||[]).map(_=>_.id),[s]),[$,u]=n.useState(null),x=n.useRef(l);n.useEffect(()=>{if(h)return;const _=x.current!==l;x.current=l,u(p=>{const j=l?Wt(l):null;return et(p===null||_?j??d:p,d)})},[d,h,l]);const b=n.useMemo(()=>{const _=h?r:$||d,p=new Map((s||[]).map(m=>[m.id,m])),j=new Set,O=[];for(const m of _)p.has(m)&&!j.has(m)&&(O.push(m),j.add(m));for(const m of d)j.has(m)||O.push(m);return O},[s,r,$,d,h]),f=n.useMemo(()=>{const _=new Map((s||[]).map(p=>[p.id,p]));return b.map(p=>_.get(p)).filter(Boolean)},[s,b]),E=n.useCallback(_=>{const p=et(_,d);h||(u(p),l&&Pt(l,p)),o==null||o(p)},[h,o,l,d]);return{columns:f,orderedIds:b,setOrder:E}}function se({columns:s,rows:r,getRowId:o=ee,loading:l=!1,emptyMessage:h="No rows to display.",summary:d,className:$="",tableClassName:u="highlight",columnOrder:x,onColumnOrderChange:b,enableColumnReorder:f=!0,columnWidths:E,onColumnWidthsChange:_,enableColumnResize:p=!0,minColumnWidth:j=64,layoutStorageKey:O,enableFiltering:m=!1,filterFields:rt=[],filters:at,onFiltersChange:X,defaultFilters:Nt,enablePagination:y=!1,defaultPageSize:St=10,pageSizeOptions:Q=[5,10,20,50],currentPage:st,onPageChange:v,pageSize:it,onPageSizeChange:Z,filterBarClassName:ct="",paginationClassName:wt="",renderSummary:lt,ariaLabel:It="Data table",clearFiltersLabel:Mt="Clear filters"}){const q=n.useId(),H=at!==void 0,[Dt,nt]=n.useState(()=>({...Nt??{}})),D=st!==void 0,K=it!==void 0,[Lt,J]=n.useState(1),[$t,Et]=n.useState(St),A=H?at:Dt,R=K?it:$t,ot=n.useMemo(()=>(s||[]).map(t=>t.id),[s]),dt=n.useMemo(()=>O??[...ot].sort().join("|"),[O,ot]),zt=b==null&&x==null?`${Vt}${dt}`:null,Y=_==null&&E===void 0?`${Kt}${dt}`:null,G=E!==void 0,[At,ut]=n.useState({}),U=G?E:At;n.useEffect(()=>{if(G||!Y)return;const t=Ct(Y);t&&ut(t)},[G,Y]);const W=n.useCallback((t,a)=>{G?_==null||_({...E,[t]:a}):ut(c=>{const i={...c,[t]:a};return _==null||_(i),Y&&te(Y,i),i})},[G,E,_,Y]),P=n.useRef(null),ft=n.useRef([]),[L,C]=n.useState(null),{columns:tt,orderedIds:gt,setOrder:pt}=ae(s,x,b,zt);ft.current=gt;const ht=n.useCallback((t,a,c)=>{var jt;const i=document.elementFromPoint(a,c);if(!i)return;const N=(jt=i.closest)==null?void 0:jt.call(i,"th.react-data-table__th"),w=N==null?void 0:N.id;if(!w||!t||w===t)return;const I=[...ft.current],k=I.indexOf(t),M=I.indexOf(w);if(k<0||M<0)return;const z=N.getBoundingClientRect(),F=a>=z.x+parseFloat(z.width)/2,S=I.filter(Ut=>Ut!==t);let T=S.indexOf(w);F&&(T+=1),S.splice(T,0,t),pt(S)},[pt]),kt=n.useCallback((t,a)=>{var z,F;if(!f||!a.isPrimary||a.pointerType==="mouse"&&a.button!==0||(F=(z=a.target).closest)!=null&&F.call(z,".react-data-table__resize-handle"))return;const c=a.currentTarget,i=c.getBoundingClientRect(),N=a.clientX-i.left,w=a.clientY-i.top;a.preventDefault();try{c.setPointerCapture(a.pointerId)}catch{}C({colId:t.id,title:t.title,width:i.width,height:i.height,offsetX:N,offsetY:w,pointerX:a.clientX,pointerY:a.clientY});const I=a.pointerId,k=S=>{S.pointerId===I&&(S.preventDefault(),C(T=>T&&T.colId===t.id?{...T,pointerX:S.clientX,pointerY:S.clientY}:T))},M=S=>{if(S.pointerId===I){try{c.releasePointerCapture(I)}catch{}c.removeEventListener("pointermove",k),c.removeEventListener("pointerup",M),c.removeEventListener("pointercancel",M),C(null),ht(t.id,S.clientX,S.clientY)}};c.addEventListener("pointermove",k,{passive:!1}),c.addEventListener("pointerup",M),c.addEventListener("pointercancel",M)},[f,ht]),B=n.useMemo(()=>m?yt(r,A):r,[r,m,A]),Xt=n.useMemo(()=>m?Object.values(A).some(t=>t!==""&&t!=null):!1,[m,A]),Rt=n.useCallback(()=>{const t={};H?X==null||X(t):nt(t),y&&(D?v==null||v(1):J(1))},[H,X,y,D,v]),Tt=r.length,Ot=B.length,g=n.useMemo(()=>y?Math.max(1,Math.ceil(B.length/R)):1,[y,B.length,R]),_t=D?st:Lt,V=n.useMemo(()=>y?Math.min(Math.max(1,_t),g):1,[y,_t,g]);n.useEffect(()=>{!y||D||J(t=>t>g?g:t)},[g,y,D]);const xt=n.useMemo(()=>{if(!y)return B;const t=(V-1)*R;return B.slice(t,t+R)},[y,B,V,R]),Yt=n.useCallback(t=>{const a=Math.min(Math.max(1,t),g);D?v==null||v(a):J(a)},[g,D,v]),Bt=n.useCallback((t,a)=>{const c=typeof a=="string"?a.trim():a,i={...A};c===""||c==null?delete i[t]:i[t]=c,H?X==null||X(i):nt(i),y&&(D?v==null||v(1):J(1))},[A,H,X,y,D,v]),bt=n.useCallback(t=>{const a=Number(t.target.value);Number.isNaN(a)||a<1||(K?Z==null||Z(a):Et(a),D?v==null||v(1):J(1))},[K,Z,D,v]),Ft=n.useCallback((t,a)=>{if(!p||!a.isPrimary)return;a.preventDefault(),a.stopPropagation();const c=a.currentTarget,i=c.closest("th"),N=U[t]??(i?i.getBoundingClientRect().width:j);P.current={colId:t,startX:a.clientX,startW:N},document.body.classList.add("react-data-table--resizing");const w=a.pointerId;try{c.setPointerCapture(w)}catch{}const I=M=>{if(M.pointerId!==w)return;M.preventDefault();const z=P.current;if(!z)return;const F=M.clientX-z.startX,S=Math.max(j,z.startW+F);W(z.colId,S)},k=M=>{if(M.pointerId===w){try{c.releasePointerCapture(w)}catch{}P.current=null,document.body.classList.remove("react-data-table--resizing"),c.removeEventListener("pointermove",I),c.removeEventListener("pointerup",k),c.removeEventListener("pointercancel",k)}};c.addEventListener("pointermove",I,{passive:!1}),c.addEventListener("pointerup",k),c.addEventListener("pointercancel",k)},[p,U,j,W]);if(l)return e.jsx("div",{className:`table react-data-table react-data-table--loading ${$}`.trim(),children:e.jsx("div",{className:"react-data-table__spinner","aria-busy":"true","aria-label":"Loading"})});if(!s||s.length===0)return null;const qt=f||p,mt=m&&rt.length>0,vt=y&&Array.isArray(Q)&&Q.length>0,Ht=lt?lt({totalRows:Tt,filteredCount:Ot,currentPage:V,pageSize:R,totalPages:g}):d,Jt=tt.map(t=>{const a=U[t.id],c=a!=null?{width:a,minWidth:j,maxWidth:a}:{minWidth:j};return e.jsxs("th",{id:t.id,scope:"col",className:["react-data-table__th",f&&"react-data-table__th--draggable",(L==null?void 0:L.colId)===t.id&&"react-data-table__th--reorder-source"].filter(Boolean).join(" "),style:c,onPointerDown:f?i=>kt(t,i):void 0,title:f&&p?"Drag to reorder · Drag the right edge to resize":f?"Drag to reorder columns":p?"Drag the right edge to resize":void 0,children:[e.jsxs("div",{className:"react-data-table__th-main",children:[f?e.jsx("span",{className:"react-data-table__drag-grip","aria-hidden":"true",title:"Drag to reorder"}):null,e.jsx("span",{className:"react-data-table__th-title",children:t.title})]}),p?e.jsx("span",{className:"react-data-table__resize-handle",role:"separator","aria-orientation":"vertical",tabIndex:0,"aria-label":"Resize column",title:"Drag to resize",onPointerDown:i=>Ft(t.id,i),onKeyDown:i=>{var N;if(i.key==="ArrowLeft"||i.key==="ArrowRight"){i.preventDefault();const w=i.key==="ArrowLeft"?-8:8,I=U[t.id]??((N=i.currentTarget.closest("th"))==null?void 0:N.getBoundingClientRect().width)??j;W(t.id,Math.max(j,I+w))}}}):null]},t.id)}),Gt=xt.length>0?xt.map((t,a)=>e.jsx("tr",{children:tt.map(c=>{const i=U[c.id],N=i!=null?{width:i,minWidth:j,maxWidth:i}:{minWidth:j};return e.jsx("td",{style:N,children:re(c,t)},c.id)})},o(t,a))):[e.jsx("tr",{children:e.jsx("td",{colSpan:tt.length,className:"react-data-table__empty",children:h})},"__empty")];return e.jsxs("div",{className:`table react-data-table ${$}`.trim(),children:[mt?e.jsxs("div",{className:`react-data-table__filter-bar ${ct}`.trim(),role:"search",children:[rt.map(t=>{const a=t.field,c=`${q}-filter-${a}`,i=A[a]!=null&&A[a]!==""?String(A[a]):"";return e.jsxs("div",{className:"react-data-table__filter-field",children:[e.jsx("label",{className:"react-data-table__filter-label",htmlFor:c,children:t.label}),e.jsx("input",{id:c,className:"react-data-table__filter-input",type:"text",placeholder:t.placeholder??"",value:i,onChange:N=>Bt(a,N.target.value),autoComplete:"off"})]},a)}),Xt?e.jsx("button",{type:"button",className:"react-data-table__filter-clear",onClick:Rt,children:Mt}):null,vt?e.jsxs("div",{className:"react-data-table__filter-field react-data-table__filter-field--page-size",children:[e.jsx("label",{className:"react-data-table__filter-label",htmlFor:`${q}-page-size`,children:"Rows per page"}),e.jsx("select",{id:`${q}-page-size`,className:"react-data-table__filter-select",value:R,onChange:bt,children:Q.map(t=>e.jsx("option",{value:t,children:t},t))})]}):null]}):null,!mt&&y&&vt?e.jsx("div",{className:`react-data-table__toolbar react-data-table__toolbar--pagination-only ${ct}`.trim(),children:e.jsxs("div",{className:"react-data-table__filter-field react-data-table__filter-field--page-size",children:[e.jsx("label",{className:"react-data-table__filter-label",htmlFor:`${q}-page-size-solo`,children:"Rows per page"}),e.jsx("select",{id:`${q}-page-size-solo`,className:"react-data-table__filter-select",value:R,onChange:bt,children:Q.map(t=>e.jsx("option",{value:t,children:t},t))})]})}):null,qt?e.jsxs("div",{className:"react-data-table__hints",role:"note",children:[f?e.jsxs("span",{className:"react-data-table__hint react-data-table__hint--drag",children:[e.jsx("span",{className:"react-data-table__hint-icon react-data-table__hint-icon--grip","aria-hidden":"true"}),"Drag or touch column headers to reorder"]}):null,p?e.jsxs("span",{className:"react-data-table__hint react-data-table__hint--resize",children:[e.jsx("span",{className:"react-data-table__hint-icon react-data-table__hint-icon--arrows","aria-hidden":"true"}),"Drag or touch the right edge of a header to resize"]}):null]}):null,e.jsx("div",{className:"react-data-table__scroll",children:e.jsxs("table",{className:u,style:{tableLayout:"fixed"},"aria-label":It,children:[e.jsx("thead",{className:"grey lighten-3",children:e.jsx("tr",{children:Jt})}),e.jsx("tbody",{children:Gt})]})}),Ht,y?e.jsx(Zt,{currentPage:V,totalPages:g,onPageChange:Yt,className:wt}):null,typeof document<"u"&&L&&Qt.createPortal(e.jsx("div",{className:"react-data-table__reorder-ghost",style:{position:"fixed",left:0,top:0,width:L.width,minHeight:L.height,pointerEvents:"none",zIndex:1e4,transform:`translate(${L.pointerX-L.offsetX}px, ${L.pointerY-L.offsetY}px)`,boxSizing:"border-box"},"aria-hidden":"true",children:e.jsxs("div",{className:"react-data-table__reorder-ghost-inner",children:[e.jsx("span",{className:"react-data-table__drag-grip","aria-hidden":"true"}),e.jsx("span",{className:"react-data-table__th-title",children:L.title})]})}),document.body)]})}exports.DataTable=se;exports.filterRows=yt;

package/dist/index.d.ts

@@ -54,6 +54,10 @@ export interface DataTableProps<T = Record<string, unknown>> {
   onPageSizeChange?: (size: number) => void;
   filterBarClassName?: string;
   paginationClassName?: string;
+  /** Accessible name for the `<table>` element. */
+  ariaLabel?: string;
+  /** Label for the clear-filters button shown when any filter is active. */
+  clearFiltersLabel?: string;
 }
 
 export function DataTable<T = Record<string, unknown>>(

package/dist/index.js

@@ -1,350 +1,380 @@
-import { jsx as c, jsxs as w } from "react/jsx-runtime";
-import { useId as qt, useState as R, useMemo as $, useEffect as tt, useCallback as L, useRef as yt } from "react";
-function Gt(a, e) {
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
+import { useId as Wt, useState as q, useMemo as X, useEffect as st, useCallback as Y, useRef as nt } from "react";
+import { createPortal as Pt } from "react-dom";
+function Ct(a, e) {
   if (!e || typeof e != "object")
     return a;
-  let n = a;
-  for (const l of Object.keys(e)) {
-    const h = /(.*)_from$/.exec(l), f = /(.*)_to$/.exec(l), b = /(.*)_datefrom$/.exec(l), x = /(.*)_dateto$/.exec(l);
-    if (h) {
-      const s = h[1];
-      if (e[l] === "" || e[l] == null) continue;
-      n = n.filter((p) => {
-        const d = p[s];
-        return parseFloat(d) >= parseFloat(e[l]);
+  let l = a;
+  for (const c of Object.keys(e)) {
+    const p = /(.*)_from$/.exec(c), d = /(.*)_to$/.exec(c), E = /(.*)_datefrom$/.exec(c), o = /(.*)_dateto$/.exec(c);
+    if (p) {
+      const _ = p[1];
+      if (e[c] === "" || e[c] == null) continue;
+      l = l.filter((m) => {
+        const f = m[_];
+        return parseFloat(f) >= parseFloat(e[c]);
       });
-    } else if (f) {
-      const s = f[1];
-      if (e[l] === "" || e[l] == null) continue;
-      n = n.filter((p) => {
-        const d = p[s];
-        return parseFloat(d) <= parseFloat(e[l]);
+    } else if (d) {
+      const _ = d[1];
+      if (e[c] === "" || e[c] == null) continue;
+      l = l.filter((m) => {
+        const f = m[_];
+        return parseFloat(f) <= parseFloat(e[c]);
       });
-    } else if (b) {
-      const s = b[1];
-      if (!e[l]) continue;
-      n = n.filter((p) => {
-        const d = p[s];
-        return d == null ? !1 : String(d).slice(0, 10) >= e[l];
+    } else if (E) {
+      const _ = E[1];
+      if (!e[c]) continue;
+      l = l.filter((m) => {
+        const f = m[_];
+        return f == null ? !1 : String(f).slice(0, 10) >= e[c];
       });
-    } else if (x) {
-      const s = x[1];
-      if (!e[l]) continue;
-      n = n.filter((p) => {
-        const d = p[s];
-        if (d == null) return !1;
-        const m = String(d).slice(0, 10);
-        return e[l] >= m;
+    } else if (o) {
+      const _ = o[1];
+      if (!e[c]) continue;
+      l = l.filter((m) => {
+        const f = m[_];
+        if (f == null) return !1;
+        const z = String(f).slice(0, 10);
+        return e[c] >= z;
       });
     } else {
-      if (e[l] === "" || e[l] == null) continue;
-      n = n.filter((s) => s[l] == e[l]);
+      if (e[c] === "" || e[c] == null) continue;
+      l = l.filter((_) => _[c] == e[c]);
     }
   }
-  return n;
+  return l;
 }
-function Ut({
+function te({
   currentPage: a,
   totalPages: e,
-  onPageChange: n,
-  className: l = "",
-  getPageHref: h
+  onPageChange: l,
+  className: c = ""
 }) {
   if (e <= 1)
     return null;
-  const f = [];
-  for (let s = 1; s <= e; s += 1)
-    f.push(s);
-  const b = (s) => {
-    s < 1 || s > e || s === a || n(s);
-  }, x = ({ page: s, children: p }) => {
-    const d = s === a;
-    return h ? /* @__PURE__ */ c("li", { className: d ? "active" : "waves-effect", children: /* @__PURE__ */ c("a", { href: h(s), onClick: (m) => {
-      m.preventDefault(), b(s);
-    }, children: p }) }, s) : /* @__PURE__ */ c(
-      "li",
-      {
-        className: d ? "active" : "waves-effect",
-        onClick: () => b(s),
-        onKeyDown: (m) => {
-          (m.key === "Enter" || m.key === " ") && (m.preventDefault(), b(s));
-        },
-        role: "button",
-        tabIndex: 0,
-        children: /* @__PURE__ */ c("a", { href: "#", children: p })
-      },
-      s
-    );
-  };
-  return /* @__PURE__ */ c("div", { className: `pagination react-data-table-pagination ${l}`.trim(), children: /* @__PURE__ */ w("ul", { className: "pagination right", children: [
-    a === 1 ? /* @__PURE__ */ c("li", { className: "disabled", children: /* @__PURE__ */ c("span", { className: "react-data-table-pagination__nav", "aria-hidden": !0, children: "‹" }) }) : /* @__PURE__ */ c("li", { className: "waves-effect", children: /* @__PURE__ */ c(
-      "a",
-      {
-        href: "#",
-        onClick: (s) => {
-          s.preventDefault(), b(a - 1);
-        },
-        "aria-label": "Previous page",
-        children: "‹"
-      }
-    ) }),
-    f.map((s) => /* @__PURE__ */ c(x, { page: s, children: s }, s)),
-    a === e ? /* @__PURE__ */ c("li", { className: "disabled", children: /* @__PURE__ */ c("span", { className: "react-data-table-pagination__nav", "aria-hidden": !0, children: "›" }) }) : /* @__PURE__ */ c("li", { className: "waves-effect", children: /* @__PURE__ */ c(
-      "a",
+  const p = [];
+  for (let o = 1; o <= e; o += 1)
+    p.push(o);
+  const d = (o) => {
+    o < 1 || o > e || o === a || l(o);
+  }, E = ({ page: o, children: _ }) => {
+    const m = o === a;
+    return /* @__PURE__ */ i("li", { className: m ? "active" : "waves-effect", children: /* @__PURE__ */ i(
+      "button",
       {
-        href: "#",
-        onClick: (s) => {
-          s.preventDefault(), b(a + 1);
-        },
-        "aria-label": "Next page",
-        children: "›"
+        type: "button",
+        onClick: () => d(o),
+        "aria-current": m ? "page" : void 0,
+        children: _
       }
-    ) })
+    ) });
+  };
+  return /* @__PURE__ */ i("div", { className: `pagination react-data-table-pagination ${c}`.trim(), children: /* @__PURE__ */ S("ul", { className: "pagination right", children: [
+    a === 1 ? /* @__PURE__ */ i("li", { className: "disabled", children: /* @__PURE__ */ i("span", { className: "react-data-table-pagination__nav", "aria-hidden": "true", children: "‹" }) }) : /* @__PURE__ */ i("li", { className: "waves-effect", children: /* @__PURE__ */ i("button", { type: "button", onClick: () => d(a - 1), "aria-label": "Previous page", children: "‹" }) }),
+    p.map((o) => /* @__PURE__ */ i(E, { page: o, children: o }, o)),
+    a === e ? /* @__PURE__ */ i("li", { className: "disabled", children: /* @__PURE__ */ i("span", { className: "react-data-table-pagination__nav", "aria-hidden": "true", children: "›" }) }) : /* @__PURE__ */ i("li", { className: "waves-effect", children: /* @__PURE__ */ i("button", { type: "button", onClick: () => d(a + 1), "aria-label": "Next page", children: "›" }) })
   ] }) });
 }
-const Qt = "react-column-drag-resize-table:v1:order:", Yt = "react-column-drag-resize-table:v1:widths:";
-function C(a, e) {
-  const n = Array.isArray(a) ? a : [], l = new Set(e), h = [];
-  for (const f of n)
-    l.has(f) && h.push(f);
-  for (const f of e)
-    h.includes(f) || h.push(f);
-  return h;
+const ee = "react-column-drag-resize-table:v1:order:", re = "react-column-drag-resize-table:v1:widths:";
+function it(a, e) {
+  const l = Array.isArray(a) ? a : [], c = new Set(e), p = [];
+  for (const d of l)
+    c.has(d) && p.push(d);
+  for (const d of e)
+    p.includes(d) || p.push(d);
+  return p;
 }
-function Zt(a) {
+function ae(a) {
   if (!a || typeof localStorage > "u") return null;
   try {
     const e = localStorage.getItem(a);
     if (!e) return null;
-    const n = JSON.parse(e);
-    return Array.isArray(n) ? n : null;
+    const l = JSON.parse(e);
+    return Array.isArray(l) ? l : null;
   } catch {
     return null;
   }
 }
-function Vt(a, e) {
+function ie(a, e) {
   if (!(!a || typeof localStorage > "u"))
     try {
       localStorage.setItem(a, JSON.stringify(e));
     } catch {
     }
 }
-function Kt(a) {
+function se(a) {
   if (!a || typeof localStorage > "u") return null;
   try {
     const e = localStorage.getItem(a);
     if (!e) return null;
-    const n = JSON.parse(e);
-    return n && typeof n == "object" && !Array.isArray(n) ? n : null;
+    const l = JSON.parse(e);
+    return l && typeof l == "object" && !Array.isArray(l) ? l : null;
   } catch {
     return null;
   }
 }
-function Wt(a, e) {
+function ne(a, e) {
   if (!(!a || typeof localStorage > "u"))
     try {
       localStorage.setItem(a, JSON.stringify(e));
     } catch {
     }
 }
-function Pt(a, e) {
+function ce(a, e) {
   return a && a.id != null ? String(a.id) : String(e);
 }
-function Ct(a, e) {
+function le(a, e) {
   return a.render ? a.render(e) : typeof a.accessor == "function" ? a.accessor(e) : a.accessor != null ? e[a.accessor] : e[a.id];
 }
-function te(a, e, n, l) {
-  const h = e != null, f = $(
-    () => (a || []).map((_) => _.id),
+function de(a, e, l, c) {
+  const p = e != null, d = X(
+    () => (a || []).map((h) => h.id),
     [a]
-  ), [b, x] = R(null), s = yt(l);
-  tt(() => {
-    if (h) return;
-    const _ = s.current !== l;
-    s.current = l, x((u) => {
-      const v = l ? Zt(l) : null;
-      return C(u === null || _ ? v ?? f : u, f);
+  ), [E, o] = q(null), _ = nt(c);
+  st(() => {
+    if (p) return;
+    const h = _.current !== c;
+    _.current = c, o((u) => {
+      const y = c ? ae(c) : null;
+      return it(u === null || h ? y ?? d : u, d);
     });
-  }, [f, h, l]);
-  const p = $(() => {
-    const _ = h ? e : b || f, u = new Map((a || []).map((N) => [N.id, N])), v = /* @__PURE__ */ new Set(), z = [];
-    for (const N of _)
-      u.has(N) && !v.has(N) && (z.push(N), v.add(N));
-    for (const N of f)
-      v.has(N) || z.push(N);
-    return z;
-  }, [a, e, b, f, h]), d = $(() => {
-    const _ = new Map((a || []).map((u) => [u.id, u]));
-    return p.map((u) => _.get(u)).filter(Boolean);
-  }, [a, p]), m = L(
-    (_) => {
-      const u = C(_, f);
-      h || (x(u), l && Vt(l, u)), n == null || n(u);
+  }, [d, p, c]);
+  const m = X(() => {
+    const h = p ? e : E || d, u = new Map((a || []).map((b) => [b.id, b])), y = /* @__PURE__ */ new Set(), k = [];
+    for (const b of h)
+      u.has(b) && !y.has(b) && (k.push(b), y.add(b));
+    for (const b of d)
+      y.has(b) || k.push(b);
+    return k;
+  }, [a, e, E, d, p]), f = X(() => {
+    const h = new Map((a || []).map((u) => [u.id, u]));
+    return m.map((u) => h.get(u)).filter(Boolean);
+  }, [a, m]), z = Y(
+    (h) => {
+      const u = it(h, d);
+      p || (o(u), c && ie(c, u)), l == null || l(u);
     },
-    [h, n, l, f]
+    [p, l, c, d]
   );
-  return { columns: d, orderedIds: p, setOrder: m };
+  return { columns: f, orderedIds: m, setOrder: z };
 }
-function se({
+function he({
   columns: a,
   rows: e,
-  getRowId: n = Pt,
-  loading: l = !1,
-  emptyMessage: h = "No rows to display.",
-  summary: f,
-  className: b = "",
-  tableClassName: x = "highlight",
-  columnOrder: s,
-  onColumnOrderChange: p,
-  enableColumnReorder: d = !0,
-  columnWidths: m,
-  onColumnWidthsChange: _,
+  getRowId: l = ce,
+  loading: c = !1,
+  emptyMessage: p = "No rows to display.",
+  summary: d,
+  className: E = "",
+  tableClassName: o = "highlight",
+  columnOrder: _,
+  onColumnOrderChange: m,
+  enableColumnReorder: f = !0,
+  columnWidths: z,
+  onColumnWidthsChange: h,
   enableColumnResize: u = !0,
-  minColumnWidth: v = 64,
-  layoutStorageKey: z,
-  enableFiltering: N = !1,
-  filterFields: et = [],
-  filters: at,
-  onFiltersChange: H,
-  defaultFilters: St,
-  enablePagination: y = !1,
-  defaultPageSize: gt = 10,
-  pageSizeOptions: q = [5, 10, 20, 50],
-  currentPage: rt,
-  onPageChange: g,
-  pageSize: st,
-  onPageSizeChange: G,
-  filterBarClassName: ct = "",
-  paginationClassName: wt = "",
-  renderSummary: lt
+  minColumnWidth: y = 64,
+  layoutStorageKey: k,
+  enableFiltering: b = !1,
+  filterFields: ct = [],
+  filters: lt,
+  onFiltersChange: j,
+  defaultFilters: Dt,
+  enablePagination: N = !1,
+  defaultPageSize: $t = 10,
+  pageSizeOptions: K = [5, 10, 20, 50],
+  currentPage: dt,
+  onPageChange: v,
+  pageSize: ot,
+  onPageSizeChange: W,
+  filterBarClassName: ft = "",
+  paginationClassName: Mt = "",
+  renderSummary: ut,
+  ariaLabel: Et = "Data table",
+  clearFiltersLabel: zt = "Clear filters"
 }) {
-  const O = qt(), Y = at !== void 0, [xt, Dt] = R(() => ({
-    ...St ?? {}
-  })), D = rt !== void 0, Z = st !== void 0, [It, U] = R(1), [$t, Mt] = R(gt), A = Y ? at : xt, M = Z ? st : $t, it = $(
+  const G = Wt(), U = lt !== void 0, [At, pt] = q(() => ({
+    ...Dt ?? {}
+  })), $ = dt !== void 0, C = ot !== void 0, [Xt, Q] = q(1), [gt, Tt] = q($t), g = U ? lt : At, O = C ? ot : gt, ht = X(
     () => (a || []).map((t) => t.id),
     [a]
-  ), nt = $(
-    () => z ?? [...it].sort().join("|"),
-    [z, it]
-  ), Lt = p == null && s == null ? `${Qt}${nt}` : null, F = _ == null && m === void 0 ? `${Yt}${nt}` : null, j = m !== void 0, [At, dt] = R({}), X = j ? m : At;
-  tt(() => {
-    if (j || !F) return;
-    const t = Kt(F);
-    t && dt(t);
-  }, [j, F]);
-  const V = L(
+  ), _t = X(
+    () => k ?? [...ht].sort().join("|"),
+    [k, ht]
+  ), Rt = m == null && _ == null ? `${ee}${_t}` : null, F = h == null && z === void 0 ? `${re}${_t}` : null, Z = z !== void 0, [Yt, mt] = q({}), V = Z ? z : Yt;
+  st(() => {
+    if (Z || !F) return;
+    const t = se(F);
+    t && mt(t);
+  }, [Z, F]);
+  const tt = Y(
     (t, r) => {
-      j ? _ == null || _({ ...m, [t]: r }) : dt((o) => {
-        const i = { ...o, [t]: r };
-        return _ == null || _(i), F && Wt(F, i), i;
+      Z ? h == null || h({ ...z, [t]: r }) : mt((n) => {
+        const s = { ...n, [t]: r };
+        return h == null || h(s), F && ne(F, s), s;
       });
     },
-    [j, m, _, F]
-  ), K = yt(null), { columns: W, orderedIds: ot, setOrder: ft } = te(
+    [Z, z, h, F]
+  ), et = nt(null), bt = nt([]), [M, rt] = q(null), { columns: at, orderedIds: jt, setOrder: vt } = de(
     a,
-    s,
-    p,
-    Lt
-  ), E = $(() => N ? Gt(e, A) : e, [e, N, A]), Tt = e.length, zt = E.length, I = $(() => y ? Math.max(1, Math.ceil(E.length / M)) : 1, [y, E.length, M]), ut = D ? rt : It, Q = $(() => y ? Math.min(Math.max(1, ut), I) : 1, [y, ut, I]);
-  tt(() => {
-    !y || D || U((t) => t > I ? I : t);
-  }, [I, y, D]);
-  const ht = $(() => {
-    if (!y) return E;
-    const t = (Q - 1) * M;
-    return E.slice(t, t + M);
-  }, [y, E, Q, M]), Ft = L(
+    _,
+    m,
+    Rt
+  );
+  bt.current = jt;
+  const yt = Y(
+    (t, r, n) => {
+      var Lt;
+      const s = document.elementFromPoint(r, n);
+      if (!s) return;
+      const x = (Lt = s.closest) == null ? void 0 : Lt.call(s, "th.react-data-table__th"), I = x == null ? void 0 : x.id;
+      if (!I || !t || I === t) return;
+      const L = [...bt.current], R = L.indexOf(t), D = L.indexOf(I);
+      if (R < 0 || D < 0) return;
+      const A = x.getBoundingClientRect(), J = r >= A.x + parseFloat(A.width) / 2, w = L.filter((Kt) => Kt !== t);
+      let B = w.indexOf(I);
+      J && (B += 1), w.splice(B, 0, t), vt(w);
+    },
+    [vt]
+  ), Ot = Y(
+    (t, r) => {
+      var A, J;
+      if (!f || !r.isPrimary || r.pointerType === "mouse" && r.button !== 0 || (J = (A = r.target).closest) != null && J.call(A, ".react-data-table__resize-handle")) return;
+      const n = r.currentTarget, s = n.getBoundingClientRect(), x = r.clientX - s.left, I = r.clientY - s.top;
+      r.preventDefault();
+      try {
+        n.setPointerCapture(r.pointerId);
+      } catch {
+      }
+      rt({
+        colId: t.id,
+        title: t.title,
+        width: s.width,
+        height: s.height,
+        offsetX: x,
+        offsetY: I,
+        pointerX: r.clientX,
+        pointerY: r.clientY
+      });
+      const L = r.pointerId, R = (w) => {
+        w.pointerId === L && (w.preventDefault(), rt(
+          (B) => B && B.colId === t.id ? { ...B, pointerX: w.clientX, pointerY: w.clientY } : B
+        ));
+      }, D = (w) => {
+        if (w.pointerId === L) {
+          try {
+            n.releasePointerCapture(L);
+          } catch {
+          }
+          n.removeEventListener("pointermove", R), n.removeEventListener("pointerup", D), n.removeEventListener("pointercancel", D), rt(null), yt(t.id, w.clientX, w.clientY);
+        }
+      };
+      n.addEventListener("pointermove", R, { passive: !1 }), n.addEventListener("pointerup", D), n.addEventListener("pointercancel", D);
+    },
+    [f, yt]
+  ), H = X(() => b ? Ct(e, g) : e, [e, b, g]), Bt = X(() => b ? Object.values(g).some(
+    (t) => t !== "" && t != null
+  ) : !1, [b, g]), kt = Y(() => {
+    const t = {};
+    U ? j == null || j(t) : pt(t), N && ($ ? v == null || v(1) : Q(1));
+  }, [
+    U,
+    j,
+    N,
+    $,
+    v
+  ]), Ft = e.length, Ht = H.length, T = X(() => N ? Math.max(1, Math.ceil(H.length / O)) : 1, [N, H.length, O]), Nt = $ ? dt : Xt, P = X(() => N ? Math.min(Math.max(1, Nt), T) : 1, [N, Nt, T]);
+  st(() => {
+    !N || $ || Q((t) => t > T ? T : t);
+  }, [T, N, $]);
+  const xt = X(() => {
+    if (!N) return H;
+    const t = (P - 1) * O;
+    return H.slice(t, t + O);
+  }, [N, H, P, O]), Jt = Y(
     (t) => {
-      const r = Math.min(Math.max(1, t), I);
-      D ? g == null || g(r) : U(r);
+      const r = Math.min(Math.max(1, t), T);
+      $ ? v == null || v(r) : Q(r);
     },
-    [I, D, g]
-  ), Et = L(
+    [T, $, v]
+  ), qt = Y(
     (t, r) => {
-      const o = typeof r == "string" ? r.trim() : r, i = { ...A };
-      o === "" || o == null ? delete i[t] : i[t] = o, Y ? H == null || H(i) : Dt(i), y && (D ? g == null || g(1) : U(1));
+      const n = typeof r == "string" ? r.trim() : r, s = { ...g };
+      n === "" || n == null ? delete s[t] : s[t] = n, U ? j == null || j(s) : pt(s), N && ($ ? v == null || v(1) : Q(1));
     },
     [
-      A,
-      Y,
-      H,
-      y,
-      D,
-      g
+      g,
+      U,
+      j,
+      N,
+      $,
+      v
     ]
-  ), _t = L(
+  ), wt = Y(
     (t) => {
       const r = Number(t.target.value);
-      Number.isNaN(r) || r < 1 || (Z ? G == null || G(r) : Mt(r), D ? g == null || g(1) : U(1));
-    },
-    [Z, G, D, g]
-  ), kt = L(
-    (t) => {
-      var o;
-      const r = (o = t.currentTarget) == null ? void 0 : o.id;
-      r && d && (t.dataTransfer.setData("text", r), t.dataTransfer.effectAllowed = "move");
+      Number.isNaN(r) || r < 1 || (C ? W == null || W(r) : Tt(r), $ ? v == null || v(1) : Q(1));
     },
-    [d]
-  ), Ot = L(
-    (t) => {
-      var bt, Nt;
-      if (!d) return;
-      const r = t.dataTransfer.getData("text"), o = (Nt = (bt = t.target).closest) == null ? void 0 : Nt.call(bt, "th"), i = o == null ? void 0 : o.id;
-      if (!i || !r || i === r) return;
-      const S = [...ot], k = S.indexOf(r), B = S.indexOf(i);
-      if (k < 0 || B < 0) return;
-      const T = o.getBoundingClientRect(), P = t.clientX >= T.x + parseFloat(T.width) / 2, J = S.filter((Ht) => Ht !== r);
-      let vt = J.indexOf(i);
-      P && (vt += 1), J.splice(vt, 0, r), ft(J), t.dataTransfer.clearData();
-    },
-    [ot, d, ft]
-  ), jt = L(
+    [C, W, $, v]
+  ), Gt = Y(
     (t, r) => {
-      if (!u) return;
+      if (!u || !r.isPrimary) return;
       r.preventDefault(), r.stopPropagation();
-      const o = r.currentTarget.closest("th"), i = X[t] ?? (o ? o.getBoundingClientRect().width : v);
-      K.current = { colId: t, startX: r.clientX, startW: i }, document.body.classList.add("react-data-table--resizing");
-      const S = (B) => {
-        const T = K.current;
-        if (!T) return;
-        const P = B.clientX - T.startX, J = Math.max(v, T.startW + P);
-        V(T.colId, J);
-      }, k = () => {
-        K.current = null, document.body.classList.remove("react-data-table--resizing"), document.removeEventListener("mousemove", S), document.removeEventListener("mouseup", k);
+      const n = r.currentTarget, s = n.closest("th"), x = V[t] ?? (s ? s.getBoundingClientRect().width : y);
+      et.current = { colId: t, startX: r.clientX, startW: x }, document.body.classList.add("react-data-table--resizing");
+      const I = r.pointerId;
+      try {
+        n.setPointerCapture(I);
+      } catch {
+      }
+      const L = (D) => {
+        if (D.pointerId !== I) return;
+        D.preventDefault();
+        const A = et.current;
+        if (!A) return;
+        const J = D.clientX - A.startX, w = Math.max(y, A.startW + J);
+        tt(A.colId, w);
+      }, R = (D) => {
+        if (D.pointerId === I) {
+          try {
+            n.releasePointerCapture(I);
+          } catch {
+          }
+          et.current = null, document.body.classList.remove("react-data-table--resizing"), n.removeEventListener("pointermove", L), n.removeEventListener("pointerup", R), n.removeEventListener("pointercancel", R);
+        }
       };
-      document.addEventListener("mousemove", S), document.addEventListener("mouseup", k);
+      n.addEventListener("pointermove", L, { passive: !1 }), n.addEventListener("pointerup", R), n.addEventListener("pointercancel", R);
     },
-    [u, X, v, V]
+    [u, V, y, tt]
   );
-  if (l)
-    return /* @__PURE__ */ c("div", { className: `table react-data-table react-data-table--loading ${b}`.trim(), children: /* @__PURE__ */ c("div", { className: "react-data-table__spinner", "aria-busy": "true", "aria-label": "Loading" }) });
+  if (c)
+    return /* @__PURE__ */ i("div", { className: `table react-data-table react-data-table--loading ${E}`.trim(), children: /* @__PURE__ */ i("div", { className: "react-data-table__spinner", "aria-busy": "true", "aria-label": "Loading" }) });
   if (!a || a.length === 0)
     return null;
-  const Xt = d || u, pt = N && et.length > 0, mt = y && Array.isArray(q) && q.length > 0, Bt = lt ? lt({
-    totalRows: Tt,
-    filteredCount: zt,
-    currentPage: Q,
-    pageSize: M,
-    totalPages: I
-  }) : f, Jt = W.map((t) => {
-    const r = X[t.id], o = r != null ? { width: r, minWidth: v, maxWidth: r } : { minWidth: v };
-    return /* @__PURE__ */ w(
+  const Ut = f || u, It = b && ct.length > 0, St = N && Array.isArray(K) && K.length > 0, Qt = ut ? ut({
+    totalRows: Ft,
+    filteredCount: Ht,
+    currentPage: P,
+    pageSize: O,
+    totalPages: T
+  }) : d, Zt = at.map((t) => {
+    const r = V[t.id], n = r != null ? { width: r, minWidth: y, maxWidth: r } : { minWidth: y };
+    return /* @__PURE__ */ S(
       "th",
       {
         id: t.id,
+        scope: "col",
         className: [
           "react-data-table__th",
-          d && "react-data-table__th--draggable"
+          f && "react-data-table__th--draggable",
+          (M == null ? void 0 : M.colId) === t.id && "react-data-table__th--reorder-source"
         ].filter(Boolean).join(" "),
-        style: o,
-        draggable: d ? "true" : "false",
-        onDrop: Ot,
-        onDragStart: kt,
-        onDragOver: (i) => i.preventDefault(),
-        title: d && u ? "Drag to reorder · Drag the right edge to resize" : d ? "Drag to reorder columns" : u ? "Drag the right edge to resize" : void 0,
+        style: n,
+        onPointerDown: f ? (s) => Ot(t, s) : void 0,
+        title: f && u ? "Drag to reorder · Drag the right edge to resize" : f ? "Drag to reorder columns" : u ? "Drag the right edge to resize" : void 0,
         children: [
-          /* @__PURE__ */ w("div", { className: "react-data-table__th-main", children: [
-            d ? /* @__PURE__ */ c(
+          /* @__PURE__ */ S("div", { className: "react-data-table__th-main", children: [
+            f ? /* @__PURE__ */ i(
               "span",
               {
                 className: "react-data-table__drag-grip",
@@ -352,9 +382,9 @@ function se({
                 title: "Drag to reorder"
               }
             ) : null,
-            /* @__PURE__ */ c("span", { className: "react-data-table__th-title", children: t.title })
+            /* @__PURE__ */ i("span", { className: "react-data-table__th-title", children: t.title })
           ] }),
-          u ? /* @__PURE__ */ c(
+          u ? /* @__PURE__ */ i(
             "span",
             {
               className: "react-data-table__resize-handle",
@@ -363,13 +393,13 @@ function se({
               tabIndex: 0,
               "aria-label": "Resize column",
               title: "Drag to resize",
-              onMouseDown: (i) => jt(t.id, i),
-              onKeyDown: (i) => {
-                var S;
-                if (i.key === "ArrowLeft" || i.key === "ArrowRight") {
-                  i.preventDefault();
-                  const k = i.key === "ArrowLeft" ? -8 : 8, B = X[t.id] ?? ((S = i.currentTarget.closest("th")) == null ? void 0 : S.getBoundingClientRect().width) ?? v;
-                  V(t.id, Math.max(v, B + k));
+              onPointerDown: (s) => Gt(t.id, s),
+              onKeyDown: (s) => {
+                var x;
+                if (s.key === "ArrowLeft" || s.key === "ArrowRight") {
+                  s.preventDefault();
+                  const I = s.key === "ArrowLeft" ? -8 : 8, L = V[t.id] ?? ((x = s.currentTarget.closest("th")) == null ? void 0 : x.getBoundingClientRect().width) ?? y;
+                  tt(t.id, Math.max(y, L + I));
                 }
               }
             }
@@ -378,99 +408,133 @@ function se({
       },
       t.id
     );
-  }), Rt = ht.length > 0 ? ht.map((t, r) => /* @__PURE__ */ c("tr", { children: W.map((o) => {
-    const i = X[o.id], S = i != null ? { width: i, minWidth: v, maxWidth: i } : { minWidth: v };
-    return /* @__PURE__ */ c("td", { style: S, children: Ct(o, t) }, o.id);
-  }) }, n(t, r))) : [
-    /* @__PURE__ */ c("tr", { children: /* @__PURE__ */ c("td", { colSpan: W.length, className: "react-data-table__empty", children: h }) }, "__empty")
+  }), Vt = xt.length > 0 ? xt.map((t, r) => /* @__PURE__ */ i("tr", { children: at.map((n) => {
+    const s = V[n.id], x = s != null ? { width: s, minWidth: y, maxWidth: s } : { minWidth: y };
+    return /* @__PURE__ */ i("td", { style: x, children: le(n, t) }, n.id);
+  }) }, l(t, r))) : [
+    /* @__PURE__ */ i("tr", { children: /* @__PURE__ */ i("td", { colSpan: at.length, className: "react-data-table__empty", children: p }) }, "__empty")
   ];
-  return /* @__PURE__ */ w("div", { className: `table react-data-table ${b}`.trim(), children: [
-    pt ? /* @__PURE__ */ w(
+  return /* @__PURE__ */ S("div", { className: `table react-data-table ${E}`.trim(), children: [
+    It ? /* @__PURE__ */ S(
       "div",
       {
-        className: `react-data-table__filter-bar ${ct}`.trim(),
+        className: `react-data-table__filter-bar ${ft}`.trim(),
         role: "search",
         children: [
-          et.map((t) => {
-            const r = t.field, o = `${O}-filter-${r}`, i = A[r] != null && A[r] !== "" ? String(A[r]) : "";
-            return /* @__PURE__ */ w("div", { className: "react-data-table__filter-field", children: [
-              /* @__PURE__ */ c("label", { className: "react-data-table__filter-label", htmlFor: o, children: t.label }),
-              /* @__PURE__ */ c(
+          ct.map((t) => {
+            const r = t.field, n = `${G}-filter-${r}`, s = g[r] != null && g[r] !== "" ? String(g[r]) : "";
+            return /* @__PURE__ */ S("div", { className: "react-data-table__filter-field", children: [
+              /* @__PURE__ */ i("label", { className: "react-data-table__filter-label", htmlFor: n, children: t.label }),
+              /* @__PURE__ */ i(
                 "input",
                 {
-                  id: o,
+                  id: n,
                   className: "react-data-table__filter-input",
                   type: "text",
                   placeholder: t.placeholder ?? "",
-                  value: i,
-                  onChange: (S) => Et(r, S.target.value),
+                  value: s,
+                  onChange: (x) => qt(r, x.target.value),
                   autoComplete: "off"
                 }
               )
             ] }, r);
           }),
-          mt ? /* @__PURE__ */ w("div", { className: "react-data-table__filter-field react-data-table__filter-field--page-size", children: [
-            /* @__PURE__ */ c("label", { className: "react-data-table__filter-label", htmlFor: `${O}-page-size`, children: "Rows per page" }),
-            /* @__PURE__ */ c(
+          Bt ? /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              className: "react-data-table__filter-clear",
+              onClick: kt,
+              children: zt
+            }
+          ) : null,
+          St ? /* @__PURE__ */ S("div", { className: "react-data-table__filter-field react-data-table__filter-field--page-size", children: [
+            /* @__PURE__ */ i("label", { className: "react-data-table__filter-label", htmlFor: `${G}-page-size`, children: "Rows per page" }),
+            /* @__PURE__ */ i(
               "select",
               {
-                id: `${O}-page-size`,
+                id: `${G}-page-size`,
                 className: "react-data-table__filter-select",
-                value: M,
-                onChange: _t,
-                children: q.map((t) => /* @__PURE__ */ c("option", { value: t, children: t }, t))
+                value: O,
+                onChange: wt,
+                children: K.map((t) => /* @__PURE__ */ i("option", { value: t, children: t }, t))
               }
             )
           ] }) : null
         ]
       }
     ) : null,
-    !pt && y && mt ? /* @__PURE__ */ c(
+    !It && N && St ? /* @__PURE__ */ i(
       "div",
       {
-        className: `react-data-table__toolbar react-data-table__toolbar--pagination-only ${ct}`.trim(),
-        children: /* @__PURE__ */ w("div", { className: "react-data-table__filter-field react-data-table__filter-field--page-size", children: [
-          /* @__PURE__ */ c("label", { className: "react-data-table__filter-label", htmlFor: `${O}-page-size-solo`, children: "Rows per page" }),
-          /* @__PURE__ */ c(
+        className: `react-data-table__toolbar react-data-table__toolbar--pagination-only ${ft}`.trim(),
+        children: /* @__PURE__ */ S("div", { className: "react-data-table__filter-field react-data-table__filter-field--page-size", children: [
+          /* @__PURE__ */ i("label", { className: "react-data-table__filter-label", htmlFor: `${G}-page-size-solo`, children: "Rows per page" }),
+          /* @__PURE__ */ i(
             "select",
             {
-              id: `${O}-page-size-solo`,
+              id: `${G}-page-size-solo`,
               className: "react-data-table__filter-select",
-              value: M,
-              onChange: _t,
-              children: q.map((t) => /* @__PURE__ */ c("option", { value: t, children: t }, t))
+              value: O,
+              onChange: wt,
+              children: K.map((t) => /* @__PURE__ */ i("option", { value: t, children: t }, t))
             }
           )
         ] })
       }
     ) : null,
-    Xt ? /* @__PURE__ */ w("div", { className: "react-data-table__hints", role: "note", children: [
-      d ? /* @__PURE__ */ w("span", { className: "react-data-table__hint react-data-table__hint--drag", children: [
-        /* @__PURE__ */ c("span", { className: "react-data-table__hint-icon react-data-table__hint-icon--grip", "aria-hidden": "true" }),
-        "Drag column headers to reorder"
+    Ut ? /* @__PURE__ */ S("div", { className: "react-data-table__hints", role: "note", children: [
+      f ? /* @__PURE__ */ S("span", { className: "react-data-table__hint react-data-table__hint--drag", children: [
+        /* @__PURE__ */ i("span", { className: "react-data-table__hint-icon react-data-table__hint-icon--grip", "aria-hidden": "true" }),
+        "Drag or touch column headers to reorder"
       ] }) : null,
-      u ? /* @__PURE__ */ w("span", { className: "react-data-table__hint react-data-table__hint--resize", children: [
-        /* @__PURE__ */ c("span", { className: "react-data-table__hint-icon react-data-table__hint-icon--arrows", "aria-hidden": "true" }),
-        "Drag the right edge of a header to resize"
+      u ? /* @__PURE__ */ S("span", { className: "react-data-table__hint react-data-table__hint--resize", children: [
+        /* @__PURE__ */ i("span", { className: "react-data-table__hint-icon react-data-table__hint-icon--arrows", "aria-hidden": "true" }),
+        "Drag or touch the right edge of a header to resize"
       ] }) : null
     ] }) : null,
-    /* @__PURE__ */ c("div", { className: "react-data-table__scroll", children: /* @__PURE__ */ w("table", { className: x, style: { tableLayout: "fixed" }, children: [
-      /* @__PURE__ */ c("thead", { className: "grey lighten-3", children: /* @__PURE__ */ c("tr", { children: Jt }) }),
-      /* @__PURE__ */ c("tbody", { children: Rt })
+    /* @__PURE__ */ i("div", { className: "react-data-table__scroll", children: /* @__PURE__ */ S("table", { className: o, style: { tableLayout: "fixed" }, "aria-label": Et, children: [
+      /* @__PURE__ */ i("thead", { className: "grey lighten-3", children: /* @__PURE__ */ i("tr", { children: Zt }) }),
+      /* @__PURE__ */ i("tbody", { children: Vt })
     ] }) }),
-    Bt,
-    y ? /* @__PURE__ */ c(
-      Ut,
+    Qt,
+    N ? /* @__PURE__ */ i(
+      te,
       {
-        currentPage: Q,
-        totalPages: I,
-        onPageChange: Ft,
-        className: wt
+        currentPage: P,
+        totalPages: T,
+        onPageChange: Jt,
+        className: Mt
       }
-    ) : null
+    ) : null,
+    typeof document < "u" && M && Pt(
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: "react-data-table__reorder-ghost",
+          style: {
+            position: "fixed",
+            left: 0,
+            top: 0,
+            width: M.width,
+            minHeight: M.height,
+            pointerEvents: "none",
+            zIndex: 1e4,
+            transform: `translate(${M.pointerX - M.offsetX}px, ${M.pointerY - M.offsetY}px)`,
+            boxSizing: "border-box"
+          },
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ S("div", { className: "react-data-table__reorder-ghost-inner", children: [
+            /* @__PURE__ */ i("span", { className: "react-data-table__drag-grip", "aria-hidden": "true" }),
+            /* @__PURE__ */ i("span", { className: "react-data-table__th-title", children: M.title })
+          ] })
+        }
+      ),
+      document.body
+    )
   ] });
 }
 export {
-  se as DataTable,
-  Gt as filterRows
+  he as DataTable,
+  Ct as filterRows
 };

package/dist/react-column-drag-resize-table.css

@@ -1 +1 @@
-:root{--rdt-border: #c5cae9;--rdt-border-divider: #e0e0e0;--rdt-border-cell: #f0f0f0;--rdt-accent: #3949ab;--rdt-accent-soft: #e8eaf6;--rdt-accent-muted: #5c6bc0;--rdt-accent-blue: #1976d2;--rdt-accent-blue-soft: #e3f2fd;--rdt-pagination-active-bg: var(--rdt-accent-blue);--rdt-pagination-hover-bg: var(--rdt-accent-blue-soft);--rdt-spinner-track: var(--rdt-accent-blue-soft);--rdt-spinner-thumb: var(--rdt-accent-blue);--rdt-resize-hover: rgba(57, 73, 171, .35);--rdt-resize-handle-mid: rgba(25, 118, 210, .12);--rdt-resize-handle-end: rgba(25, 118, 210, .22);--rdt-resize-handle-inset: rgba(25, 118, 210, .12);--rdt-focus-ring: rgba(57, 73, 171, .2);--rdt-focus-outline-contrast: #ffffff;--rdt-surface: #ffffff;--rdt-surface-elevated: #f5f5f5;--rdt-surface-muted: #eeeeee;--rdt-surface-toolbar-start: #ffffff;--rdt-surface-toolbar-end: #f5f5f5;--rdt-surface-hints-start: #fafbff;--rdt-surface-hints-end: #eef0fb;--rdt-surface-header-start: #f5f5f5;--rdt-surface-header-end: #eeeeee;--rdt-surface-summary: #eeeeee;--rdt-surface-row-hover: #f5f5f5;--rdt-text: #424242;--rdt-text-strong: #263238;--rdt-text-muted: #757575;--rdt-text-label: #546e7a;--rdt-text-hint-drag: #283593;--rdt-text-hint-resize: #1565c0;--rdt-input-border: #b0bec5;--rdt-input-border-hover: #78909c;--rdt-pagination-active-fg: #ffffff;--rdt-pagination-disabled-opacity: .45;--rdt-hint-icon-opacity: .85;--rdt-drag-grip-opacity: .85}.react-data-table{color:var(--rdt-text)}.react-data-table__filter-bar,.react-data-table__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;padding:10px 12px;border:1px solid var(--rdt-border);border-bottom:none;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--rdt-surface-toolbar-start) 0%,var(--rdt-surface-toolbar-end) 100%)}.react-data-table__toolbar--pagination-only{justify-content:flex-end}.react-data-table__filter-field{display:flex;flex-direction:column;gap:4px;min-width:140px}.react-data-table__filter-field--page-size{margin-left:auto;min-width:0}.react-data-table__filter-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rdt-text-label)}.react-data-table__filter-input,.react-data-table__filter-select{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--rdt-input-border);border-radius:4px;background:var(--rdt-surface);color:var(--rdt-text-strong);min-width:0;max-width:100%}.react-data-table__filter-input:hover,.react-data-table__filter-select:hover{border-color:var(--rdt-input-border-hover)}.react-data-table__filter-input:focus,.react-data-table__filter-select:focus{outline:none;border-color:var(--rdt-accent);box-shadow:0 0 0 2px var(--rdt-focus-ring)}.react-data-table__filter-bar+.react-data-table__hints{border-top:none;border-radius:0}.react-data-table__toolbar--pagination-only+.react-data-table__hints{border-top:none;border-radius:0}.react-data-table__filter-bar+.react-data-table__scroll,.react-data-table__toolbar--pagination-only+.react-data-table__scroll{border-top:none;border-radius:0 0 6px 6px}.react-data-table__hints{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;font-size:12px;line-height:1.35;color:var(--rdt-text);border:1px solid var(--rdt-border);border-bottom:none;border-radius:6px 6px 0 0;padding:8px 12px;background:linear-gradient(180deg,var(--rdt-surface-hints-start) 0%,var(--rdt-surface-hints-end) 100%)}.react-data-table__hint{display:inline-flex;align-items:center;gap:.45rem}.react-data-table__hint--drag{color:var(--rdt-text-hint-drag)}.react-data-table__hint--resize{color:var(--rdt-text-hint-resize)}.react-data-table__hint-icon{flex-shrink:0;width:1.1rem;height:1rem;border-radius:3px}.react-data-table__hint-icon--grip{background-image:radial-gradient(currentColor 1.2px,transparent 1.3px);background-size:5px 5px;background-position:0 0;opacity:var(--rdt-hint-icon-opacity)}.react-data-table__hint-icon--arrows{background:var(--rdt-accent-soft);border:1px solid var(--rdt-border);position:relative}.react-data-table__hint-icon--arrows:before,.react-data-table__hint-icon--arrows:after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-3px;border-style:solid}.react-data-table__hint-icon--arrows:before{left:2px;border-width:3px 4px 3px 0;border-color:transparent transparent transparent var(--rdt-accent)}.react-data-table__hint-icon--arrows:after{right:2px;border-width:3px 0 3px 4px;border-color:transparent var(--rdt-accent) transparent transparent}.react-data-table__scroll{overflow-x:auto;border:1px solid var(--rdt-border);border-radius:6px}.react-data-table__hints+.react-data-table__scroll{border-top:none;border-radius:0 0 6px 6px}.react-data-table table{width:100%;border-collapse:separate;border-spacing:0}.react-data-table__th{position:relative;text-align:left;padding:0;vertical-align:middle;border-right:1px solid var(--rdt-border-divider);background:linear-gradient(180deg,var(--rdt-surface-header-start) 0%,var(--rdt-surface-header-end) 100%);-webkit-user-select:none;user-select:none}.react-data-table__th:last-child{border-right:none}.react-data-table__th--draggable{cursor:grab}.react-data-table__th--draggable:active{cursor:grabbing}.react-data-table__th-main{display:flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:8px 14px 8px 12px}.react-data-table__drag-grip{flex-shrink:0;width:10px;height:18px;border-radius:3px;cursor:grab;background-image:radial-gradient(var(--rdt-accent-muted) 1.2px,transparent 1.3px);background-size:4px 4px;background-position:0 0;opacity:var(--rdt-drag-grip-opacity)}.react-data-table__th--draggable:active .react-data-table__drag-grip{cursor:grabbing}.react-data-table__th-title{flex:1;min-width:0;font-weight:600;font-size:12px;letter-spacing:.02em}.react-data-table__resize-handle{position:absolute;top:0;right:0;width:10px;height:100%;margin:0;padding:0;cursor:col-resize;z-index:2;border-radius:0 0 2px;background:linear-gradient(90deg,transparent 0%,transparent 35%,var(--rdt-resize-handle-mid) 50%,var(--rdt-resize-handle-end) 100%);box-shadow:inset 1px 0 0 var(--rdt-resize-handle-inset)}.react-data-table__resize-handle:hover,.react-data-table__resize-handle:focus-visible{outline:none;background:linear-gradient(90deg,transparent 0%,var(--rdt-resize-hover) 100%);box-shadow:inset 2px 0 0 var(--rdt-accent)}.react-data-table__resize-handle:focus-visible{box-shadow:inset 2px 0 0 var(--rdt-accent),0 0 0 2px var(--rdt-focus-outline-contrast),0 0 0 4px var(--rdt-accent)}body.react-data-table--resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important}.react-data-table tbody td{padding:8px 12px;border-bottom:1px solid var(--rdt-border-divider);border-right:1px solid var(--rdt-border-cell);overflow:hidden;text-overflow:ellipsis;word-break:break-word}.react-data-table tbody td:last-child{border-right:none}.react-data-table__empty{text-align:center;color:var(--rdt-text-muted);padding:24px!important}.react-data-table--loading{min-height:120px;display:flex;align-items:center;justify-content:center}.react-data-table__spinner{width:40px;height:40px;border:3px solid var(--rdt-spinner-track);border-top-color:var(--rdt-spinner-thumb);border-radius:50%;animation:react-data-table-spin .8s linear infinite}@keyframes react-data-table-spin{to{transform:rotate(360deg)}}.summary-line{padding:16px 20px;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 40px;background:var(--rdt-surface-summary)}.summary-line .bold{font-weight:700}.react-data-table-pagination ul.pagination{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:12px 0 0;padding:0;justify-content:flex-end;align-items:center}.react-data-table-pagination ul.pagination li{display:inline-block;min-width:32px;text-align:center}.react-data-table-pagination ul.pagination li a,.react-data-table-pagination ul.pagination span{display:inline-block;padding:6px 10px;text-decoration:none;color:var(--rdt-text);border-radius:2px}.react-data-table-pagination ul.pagination li.active a{background:var(--rdt-pagination-active-bg);color:var(--rdt-pagination-active-fg)}.react-data-table-pagination ul.pagination li.waves-effect a:hover{background:var(--rdt-pagination-hover-bg)}.react-data-table-pagination ul.pagination li.disabled{opacity:var(--rdt-pagination-disabled-opacity);pointer-events:none}thead.grey.lighten-3{background-color:var(--rdt-surface-muted)}table.highlight tbody tr:hover{background-color:var(--rdt-surface-row-hover)}
+:root{--rdt-border: #c5cae9;--rdt-border-divider: #e0e0e0;--rdt-border-cell: #f0f0f0;--rdt-accent: #3949ab;--rdt-accent-soft: #e8eaf6;--rdt-accent-muted: #5c6bc0;--rdt-accent-blue: #1976d2;--rdt-accent-blue-soft: #e3f2fd;--rdt-pagination-active-bg: var(--rdt-accent-blue);--rdt-pagination-hover-bg: var(--rdt-accent-blue-soft);--rdt-spinner-track: var(--rdt-accent-blue-soft);--rdt-spinner-thumb: var(--rdt-accent-blue);--rdt-resize-hover: rgba(57, 73, 171, .35);--rdt-resize-handle-mid: rgba(25, 118, 210, .12);--rdt-resize-handle-end: rgba(25, 118, 210, .22);--rdt-resize-handle-inset: rgba(25, 118, 210, .12);--rdt-focus-ring: rgba(57, 73, 171, .2);--rdt-focus-outline-contrast: #ffffff;--rdt-surface: #ffffff;--rdt-surface-elevated: #f5f5f5;--rdt-surface-muted: #eeeeee;--rdt-surface-toolbar-start: #ffffff;--rdt-surface-toolbar-end: #f5f5f5;--rdt-surface-hints-start: #fafbff;--rdt-surface-hints-end: #eef0fb;--rdt-surface-header-start: #f5f5f5;--rdt-surface-header-end: #eeeeee;--rdt-surface-summary: #eeeeee;--rdt-surface-row-hover: #f5f5f5;--rdt-text: #424242;--rdt-text-strong: #263238;--rdt-text-muted: #757575;--rdt-text-label: #546e7a;--rdt-text-hint-drag: #283593;--rdt-text-hint-resize: #1565c0;--rdt-input-border: #b0bec5;--rdt-input-border-hover: #78909c;--rdt-pagination-active-fg: #ffffff;--rdt-pagination-disabled-opacity: .45;--rdt-hint-icon-opacity: .85;--rdt-drag-grip-opacity: .85}.react-data-table{color:var(--rdt-text)}.react-data-table__filter-bar,.react-data-table__toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 24px;padding:10px 12px;border:1px solid var(--rdt-border);border-bottom:none;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--rdt-surface-toolbar-start) 0%,var(--rdt-surface-toolbar-end) 100%)}.react-data-table__toolbar--pagination-only{justify-content:flex-end}.react-data-table__filter-field{display:flex;flex-direction:column;gap:4px;min-width:140px}.react-data-table__filter-field--page-size{margin-left:auto;min-width:0}.react-data-table__filter-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--rdt-text-label)}.react-data-table__filter-input,.react-data-table__filter-select{font:inherit;font-size:13px;padding:6px 10px;border:1px solid var(--rdt-input-border);border-radius:4px;background:var(--rdt-surface);color:var(--rdt-text-strong);min-width:0;max-width:100%}.react-data-table__filter-input:hover,.react-data-table__filter-select:hover{border-color:var(--rdt-input-border-hover)}.react-data-table__filter-input:focus,.react-data-table__filter-select:focus{outline:none;border-color:var(--rdt-accent);box-shadow:0 0 0 2px var(--rdt-focus-ring)}.react-data-table__filter-clear{font:inherit;font-size:13px;font-weight:600;padding:6px 12px;border:1px solid var(--rdt-accent-muted);border-radius:4px;background:var(--rdt-accent-soft);color:var(--rdt-accent);cursor:pointer;align-self:flex-end}.react-data-table__filter-clear:hover{background:var(--rdt-accent-blue-soft);border-color:var(--rdt-accent-blue);color:var(--rdt-accent-blue)}.react-data-table__filter-clear:focus{outline:none;box-shadow:0 0 0 2px var(--rdt-focus-ring)}.react-data-table__filter-bar+.react-data-table__hints{border-top:none;border-radius:0}.react-data-table__toolbar--pagination-only+.react-data-table__hints{border-top:none;border-radius:0}.react-data-table__filter-bar+.react-data-table__scroll,.react-data-table__toolbar--pagination-only+.react-data-table__scroll{border-top:none;border-radius:0 0 6px 6px}.react-data-table__hints{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;font-size:12px;line-height:1.35;color:var(--rdt-text);border:1px solid var(--rdt-border);border-bottom:none;border-radius:6px 6px 0 0;padding:8px 12px;background:linear-gradient(180deg,var(--rdt-surface-hints-start) 0%,var(--rdt-surface-hints-end) 100%)}.react-data-table__hint{display:inline-flex;align-items:center;gap:.45rem}.react-data-table__hint--drag{color:var(--rdt-text-hint-drag)}.react-data-table__hint--resize{color:var(--rdt-text-hint-resize)}.react-data-table__hint-icon{flex-shrink:0;width:1.1rem;height:1rem;border-radius:3px}.react-data-table__hint-icon--grip{background-image:radial-gradient(currentColor 1.2px,transparent 1.3px);background-size:5px 5px;background-position:0 0;opacity:var(--rdt-hint-icon-opacity)}.react-data-table__hint-icon--arrows{background:var(--rdt-accent-soft);border:1px solid var(--rdt-border);position:relative}.react-data-table__hint-icon--arrows:before,.react-data-table__hint-icon--arrows:after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-3px;border-style:solid}.react-data-table__hint-icon--arrows:before{left:2px;border-width:3px 4px 3px 0;border-color:transparent transparent transparent var(--rdt-accent)}.react-data-table__hint-icon--arrows:after{right:2px;border-width:3px 0 3px 4px;border-color:transparent var(--rdt-accent) transparent transparent}.react-data-table__scroll{overflow-x:auto;border:1px solid var(--rdt-border);border-radius:6px}.react-data-table__hints+.react-data-table__scroll{border-top:none;border-radius:0 0 6px 6px}.react-data-table table{width:100%;border-collapse:separate;border-spacing:0}.react-data-table__th{position:relative;text-align:left;padding:0;vertical-align:middle;border-right:1px solid var(--rdt-border-divider);background:linear-gradient(180deg,var(--rdt-surface-header-start) 0%,var(--rdt-surface-header-end) 100%);-webkit-user-select:none;user-select:none}.react-data-table__th:last-child{border-right:none}.react-data-table__th--draggable{cursor:grab;touch-action:none}.react-data-table__th--draggable:active{cursor:grabbing}.react-data-table__th--reorder-source{opacity:.35}.react-data-table__reorder-ghost{will-change:transform}.react-data-table__reorder-ghost-inner{display:flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:8px 14px 8px 12px;box-sizing:border-box;border:1px solid var(--rdt-border);border-radius:4px;background:linear-gradient(180deg,var(--rdt-surface-header-start) 0%,var(--rdt-surface-header-end) 100%);box-shadow:0 8px 24px #0000002e,0 2px 8px #3949ab33;color:var(--rdt-text-strong);-webkit-user-select:none;user-select:none}.react-data-table__th-main{display:flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:8px 14px 8px 12px}.react-data-table__drag-grip{flex-shrink:0;width:10px;height:18px;border-radius:3px;cursor:grab;background-image:radial-gradient(var(--rdt-accent-muted) 1.2px,transparent 1.3px);background-size:4px 4px;background-position:0 0;opacity:var(--rdt-drag-grip-opacity)}.react-data-table__th--draggable:active .react-data-table__drag-grip{cursor:grabbing}.react-data-table__th-title{flex:1;min-width:0;font-weight:600;font-size:12px;letter-spacing:.02em}.react-data-table__resize-handle{position:absolute;top:0;right:0;width:10px;height:100%;margin:0;padding:0;cursor:col-resize;touch-action:none;z-index:2;border-radius:0 0 2px;background:linear-gradient(90deg,transparent 0%,transparent 35%,var(--rdt-resize-handle-mid) 50%,var(--rdt-resize-handle-end) 100%);box-shadow:inset 1px 0 0 var(--rdt-resize-handle-inset)}.react-data-table__resize-handle:hover,.react-data-table__resize-handle:focus-visible{outline:none;background:linear-gradient(90deg,transparent 0%,var(--rdt-resize-hover) 100%);box-shadow:inset 2px 0 0 var(--rdt-accent)}.react-data-table__resize-handle:focus-visible{box-shadow:inset 2px 0 0 var(--rdt-accent),0 0 0 2px var(--rdt-focus-outline-contrast),0 0 0 4px var(--rdt-accent)}body.react-data-table--resizing{cursor:col-resize!important;-webkit-user-select:none!important;user-select:none!important;touch-action:none!important}.react-data-table tbody td{padding:8px 12px;border-bottom:1px solid var(--rdt-border-divider);border-right:1px solid var(--rdt-border-cell);overflow:hidden;text-overflow:ellipsis;word-break:break-word}.react-data-table tbody td:last-child{border-right:none}.react-data-table__empty{text-align:center;color:var(--rdt-text-muted);padding:24px!important}.react-data-table--loading{min-height:120px;display:flex;align-items:center;justify-content:center}.react-data-table__spinner{width:40px;height:40px;border:3px solid var(--rdt-spinner-track);border-top-color:var(--rdt-spinner-thumb);border-radius:50%;animation:react-data-table-spin .8s linear infinite}@keyframes react-data-table-spin{to{transform:rotate(360deg)}}.summary-line{padding:16px 20px;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 40px;background:var(--rdt-surface-summary)}.summary-line .bold{font-weight:700}.react-data-table-pagination ul.pagination{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:12px 0 0;padding:0;justify-content:flex-end;align-items:center}.react-data-table-pagination ul.pagination li{display:inline-block;min-width:32px;text-align:center}.react-data-table-pagination ul.pagination li a,.react-data-table-pagination ul.pagination li button,.react-data-table-pagination ul.pagination span{display:inline-block;padding:6px 10px;text-decoration:none;color:var(--rdt-text);border-radius:2px}.react-data-table-pagination ul.pagination li button{margin:0;border:none;background:none;font:inherit;line-height:inherit;cursor:pointer;text-align:center}.react-data-table-pagination ul.pagination li.active a,.react-data-table-pagination ul.pagination li.active button{background:var(--rdt-pagination-active-bg);color:var(--rdt-pagination-active-fg)}.react-data-table-pagination ul.pagination li.waves-effect a:hover,.react-data-table-pagination ul.pagination li.waves-effect button:hover{background:var(--rdt-pagination-hover-bg)}.react-data-table-pagination ul.pagination li.disabled{opacity:var(--rdt-pagination-disabled-opacity);pointer-events:none}thead.grey.lighten-3{background-color:var(--rdt-surface-muted)}table.highlight tbody tr:hover{background-color:var(--rdt-surface-row-hover)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-column-drag-resize-table",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "React data table component: draggable column reorder, resizable columns, text filters, pagination, optional localStorage column layout, CSS variables theming. For admin dashboards and internal tools.",
   "author": "Armine Inants",
   "license": "MIT",