react-column-drag-resize-table 0.1.1 → 0.1.3

package/README.md

@@ -59,13 +59,16 @@ export function Example() {
 
 ## Advanced example
 
-Filtering, pagination, and a **`renderSummary`** line using the built-in filter bar:
+Filtering, pagination, a **`renderSummary`** line, and **custom cells** with **`render`** (see [Column cells](#column-cells-accessor-and-render)):
 
 ```jsx
 import { useMemo } from 'react';
 import { DataTable } from 'react-column-drag-resize-table';
 import 'react-column-drag-resize-table/styles.css';
 
+const money = (n) =>
+  new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' }).format(n);
+
 const rows = [
   { id: 1, user_name: 'alice', amount: 100, status: 'ok' },
   { id: 2, user_name: 'bob', amount: 200, status: 'pending' }
@@ -76,8 +79,30 @@ export function AdvancedExample() {
     () => [
       { id: 'id', title: 'ID', accessor: 'id' },
       { id: 'user_name', title: 'User', accessor: 'user_name' },
-      { id: 'amount', title: 'Amount', accessor: 'amount' },
-      { id: 'status', title: 'Status', accessor: 'status' }
+      {
+        id: 'amount',
+        title: 'Amount',
+        accessor: 'amount',
+        render: (row) => money(row.amount)
+      },
+      {
+        id: 'status',
+        title: 'Status',
+        accessor: 'status',
+        render: (row) => (
+          <span
+            style={{
+              display: 'inline-block',
+              padding: '2px 8px',
+              borderRadius: 4,
+              fontSize: '0.875rem',
+              background: row.status === 'ok' ? '#e8f5e9' : '#fff3e0'
+            }}
+          >
+            {row.status}
+          </span>
+        )
+      }
     ],
     []
   );
@@ -148,12 +173,18 @@ export function AdvancedExample() {
 
 Used for each entry in **`columns`**.
 
+#### Column cells: `accessor` and `render`
+
+- **Plain value:** use a **string `accessor`** with the row field name (e.g. `accessor: 'user_name'`), or omit `accessor` and rely on **`id`** matching a key on the row (`row[id]`).
+- **Custom content:** use **`render: (row) => …`** for formatting, badges, links, or any JSX. When **`render`** is set, it **replaces** the default cell value for that column (string `accessor` is then only documentary for you; it is not used for display).
+- A **function `accessor`** is still accepted for custom cells, but **`render`** is the preferred API for that so the column definition stays clear: *field key vs cell UI*.
+
 | Property | Required | Type | Default | Possible values / notes | Description |
 |----------|----------|------|---------|-------------------------|-------------|
 | `id` | **yes** | `string` | — | Unique among columns | Stable id (order, resize, filters, storage). |
 | `title` | **yes** | `string` | — | — | Header label. |
-| `accessor` | no | `keyof T \| ((row: T) => ReactNode)` | — | — | Key on the row, or function returning cell content. If omitted, falls back to `row[id]`. |
-| `render` | no | `(row: T) => ReactNode` | — | — | If set, used for the cell instead of `accessor`. |
+| `accessor` | no | `keyof T \| ((row: T) => ReactNode)` | — | — | Row field key for simple columns, or legacy function form; see [above](#column-cells-accessor-and-render). If omitted, cell value defaults to `row[id]`. |
+| `render` | no | `(row: T) => ReactNode` | — | — | Custom cell; if set, used instead of the value from string `accessor` / `row[id]`. |
 
 ### `FilterField`
 

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"),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;

package/dist/index.js

@@ -1,350 +1,367 @@
-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 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) {
   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), o = /(.*)_to$/.exec(c), $ = /(.*)_datefrom$/.exec(c), d = /(.*)_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 (o) {
+      const _ = o[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 ($) {
+      const _ = $[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 (d) {
+      const _ = d[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;
       });
     } 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 Kt({
   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",
+  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;
+    return /* @__PURE__ */ i("li", { className: m ? "active" : "waves-effect", children: /* @__PURE__ */ i(
+      "button",
       {
-        href: "#",
-        onClick: (s) => {
-          s.preventDefault(), b(a - 1);
-        },
-        "aria-label": "Previous page",
-        children: "‹"
+        type: "button",
+        onClick: () => o(d),
+        "aria-current": m ? "page" : void 0,
+        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",
-      {
-        href: "#",
-        onClick: (s) => {
-          s.preventDefault(), b(a + 1);
-        },
-        "aria-label": "Next page",
-        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: "›" }) })
   ] }) });
 }
-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 Wt = "react-column-drag-resize-table:v1:order:", Pt = "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);
+  return p;
 }
-function Zt(a) {
+function Ct(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 te(a, e) {
   if (!(!a || typeof localStorage > "u"))
     try {
       localStorage.setItem(a, JSON.stringify(e));
     } catch {
     }
 }
-function Kt(a) {
+function ee(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 re(a, e) {
   if (!(!a || typeof localStorage > "u"))
     try {
       localStorage.setItem(a, JSON.stringify(e));
     } catch {
     }
 }
-function Pt(a, e) {
+function ae(a, e) {
   return a && a.id != null ? String(a.id) : String(e);
 }
-function Ct(a, e) {
+function ie(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 ne(a, e, l, c) {
+  const p = e != null, o = F(
+    () => (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);
+  ), [$, d] = J(null), _ = st(c);
+  nt(() => {
+    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);
     });
-  }, [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);
+  }, [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(() => {
+    const h = new Map((a || []).map((u) => [u.id, u]));
+    return m.map((u) => h.get(u)).filter(Boolean);
+  }, [a, m]), M = R(
+    (h) => {
+      const u = it(h, o);
+      p || (d(u), c && te(c, u)), l == null || l(u);
     },
-    [h, n, l, f]
+    [p, l, c, o]
   );
-  return { columns: d, orderedIds: p, setOrder: m };
+  return { columns: f, orderedIds: m, setOrder: M };
 }
-function se({
+function de({
   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 = ae,
+  loading: c = !1,
+  emptyMessage: p = "No rows to display.",
+  summary: o,
+  className: $ = "",
+  tableClassName: d = "highlight",
+  columnOrder: _,
+  onColumnOrderChange: m,
+  enableColumnReorder: f = !0,
+  columnWidths: M,
+  onColumnWidthsChange: h,
   enableColumnResize: u = !0,
-  minColumnWidth: v = 64,
-  layoutStorageKey: z,
-  enableFiltering: N = !1,
-  filterFields: et = [],
-  filters: at,
-  onFiltersChange: H,
+  minColumnWidth: b = 64,
+  layoutStorageKey: B,
+  enableFiltering: y = !1,
+  filterFields: ct = [],
+  filters: lt,
+  onFiltersChange: Q,
   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
+  enablePagination: g = !1,
+  defaultPageSize: Lt = 10,
+  pageSizeOptions: Z = [5, 10, 20, 50],
+  currentPage: ot,
+  onPageChange: I,
+  pageSize: dt,
+  onPageSizeChange: V,
+  filterBarClassName: ft = "",
+  paginationClassName: Dt = "",
+  renderSummary: ut
 }) {
-  const O = qt(), Y = at !== void 0, [xt, Dt] = R(() => ({
+  const q = Qt(), P = lt !== void 0, [$t, Mt] = J(() => ({
     ...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 = $(
+  })), 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(
     () => (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(
+  ), 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, r) => {
-      j ? _ == null || _({ ...m, [t]: r }) : dt((o) => {
-        const i = { ...o, [t]: r };
-        return _ == null || _(i), F && Wt(F, i), i;
+      G ? h == null || h({ ...M, [t]: r }) : _t((s) => {
+        const n = { ...s, [t]: r };
+        return h == null || h(n), O && re(O, n), n;
       });
     },
-    [j, m, _, F]
-  ), K = yt(null), { columns: W, orderedIds: ot, setOrder: ft } = te(
+    [G, M, h, O]
+  ), et = st(null), mt = st([]), [D, rt] = J(null), { columns: at, orderedIds: Tt, setOrder: bt } = ne(
     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,
+    At
+  );
+  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]
+  ), Rt = R(
+    (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;
+      r.preventDefault();
+      try {
+        s.setPointerCapture(r.pointerId);
+      } catch {
+      }
+      rt({
+        colId: t.id,
+        title: t.title,
+        width: n.width,
+        height: n.height,
+        offsetX: v,
+        offsetY: w,
+        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
+        ));
+      }, L = (N) => {
+        if (N.pointerId === S) {
+          try {
+            s.releasePointerCapture(S);
+          } catch {
+          }
+          s.removeEventListener("pointermove", A), s.removeEventListener("pointerup", L), s.removeEventListener("pointercancel", L), rt(null), vt(t.id, N.clientX, N.clientY);
+        }
+      };
+      s.addEventListener("pointermove", A, { passive: !1 }), s.addEventListener("pointerup", L), s.addEventListener("pointercancel", L);
+    },
+    [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(
     (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), X);
+      z ? I == null || I(r) : K(r);
     },
-    [I, D, g]
-  ), Et = L(
+    [X, z, I]
+  ), Ot = R(
     (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 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));
     },
     [
-      A,
       Y,
-      H,
-      y,
-      D,
-      g
+      P,
+      Q,
+      g,
+      z,
+      I
     ]
-  ), _t = L(
+  ), gt = R(
     (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));
+      Number.isNaN(r) || r < 1 || (C ? V == null || V(r) : Xt(r), z ? I == null || I(1) : K(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");
-    },
-    [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, V, z, I]
+  ), kt = R(
     (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 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;
+      try {
+        s.setPointerCapture(w);
+      } 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) {
+          try {
+            s.releasePointerCapture(w);
+          } catch {
+          }
+          et.current = null, document.body.classList.remove("react-data-table--resizing"), s.removeEventListener("pointermove", S), s.removeEventListener("pointerup", A), s.removeEventListener("pointercancel", A);
+        }
       };
-      document.addEventListener("mousemove", S), document.addEventListener("mouseup", k);
+      s.addEventListener("pointermove", S, { passive: !1 }), s.addEventListener("pointerup", A), s.addEventListener("pointercancel", A);
     },
-    [u, X, v, V]
+    [u, U, b, 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 ${$}`.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 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(
       "th",
       {
         id: t.id,
+        scope: "col",
         className: [
           "react-data-table__th",
-          d && "react-data-table__th--draggable"
+          f && "react-data-table__th--draggable",
+          (D == null ? void 0 : D.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: s,
+        onPointerDown: f ? (n) => Rt(t, n) : 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__ */ x("div", { className: "react-data-table__th-main", children: [
+            f ? /* @__PURE__ */ i(
               "span",
               {
                 className: "react-data-table__drag-grip",
@@ -352,9 +369,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 +380,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: (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));
                 }
               }
             }
@@ -378,99 +395,124 @@ 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")
+  }), 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);
+  }) }, 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__ */ x("div", { className: `table react-data-table ${$}`.trim(), children: [
+    wt ? /* @__PURE__ */ x(
       "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, 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 }),
+              /* @__PURE__ */ i(
                 "input",
                 {
-                  id: o,
+                  id: s,
                   className: "react-data-table__filter-input",
                   type: "text",
                   placeholder: t.placeholder ?? "",
-                  value: i,
-                  onChange: (S) => Et(r, S.target.value),
+                  value: n,
+                  onChange: (v) => Ot(r, v.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(
+          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" }),
+            /* @__PURE__ */ i(
               "select",
               {
-                id: `${O}-page-size`,
+                id: `${q}-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: T,
+                onChange: gt,
+                children: Z.map((t) => /* @__PURE__ */ i("option", { value: t, children: t }, t))
               }
             )
           ] }) : null
         ]
       }
     ) : null,
-    !pt && y && mt ? /* @__PURE__ */ c(
+    !wt && g && xt ? /* @__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__ */ 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" }),
+          /* @__PURE__ */ i(
             "select",
             {
-              id: `${O}-page-size-solo`,
+              id: `${q}-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: T,
+              onChange: gt,
+              children: Z.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"
+    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: [
+        /* @__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__ */ x("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__ */ 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 })
     ] }) }),
-    Bt,
-    y ? /* @__PURE__ */ c(
-      Ut,
+    Jt,
+    g ? /* @__PURE__ */ i(
+      Kt,
       {
-        currentPage: Q,
-        totalPages: I,
-        onPageChange: Ft,
-        className: wt
+        currentPage: W,
+        totalPages: X,
+        onPageChange: Bt,
+        className: Dt
       }
-    ) : null
+    ) : null,
+    typeof document < "u" && D && Zt(
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: "react-data-table__reorder-ghost",
+          style: {
+            position: "fixed",
+            left: 0,
+            top: 0,
+            width: D.width,
+            minHeight: D.height,
+            pointerEvents: "none",
+            zIndex: 1e4,
+            transform: `translate(${D.pointerX - D.offsetX}px, ${D.pointerY - D.offsetY}px)`,
+            boxSizing: "border-box"
+          },
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ x("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 })
+          ] })
+        }
+      ),
+      document.body
+    )
   ] });
 }
 export {
-  se as DataTable,
-  Gt as filterRows
+  de as DataTable,
+  Vt 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-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.1",
+  "version": "0.1.3",
   "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",
@@ -18,7 +18,8 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "sideEffects": [
     "**/*.css"