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