data-table-component-gif 0.0.3

package/README.md

@@ -0,0 +1,33 @@
+# data-table-component
+
+Simple React table component with sorting, searching and pagination.
+
+## Installation
+
+```bash
+npm install data-table-component
+```
+
+(or yarn add data-table-component)
+
+## Usage
+
+```jsx
+import React from 'react';
+import { DataTable } from 'data-table-component';
+
+const columns = [
+  { key: 'firstName', label: 'First Name' },
+  { key: 'lastName', label: 'Last Name' }
+];
+const data = [
+  { firstName: 'Alice', lastName: 'Smith' }
+];
+
+function App() {
+  return (
+    <DataTable data={data} columns={columns} itemsPerPage={5} />
+  );
+}
+```
+

package/dist/data-table-component-gif.css

@@ -0,0 +1 @@
+.datatable-container{width:100%;margin-top:20px;display:flex;flex-direction:column;gap:16px}.datatable-search{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.datatable-search-input{flex:1;min-width:200px;padding:8px 12px;border:1px solid #d0d7de;border-radius:4px;font-size:.95rem;font-family:inherit}.datatable-search-input:focus{outline:none;border-color:#0b4bd8;box-shadow:0 0 0 3px #0b4bd81a}.datatable-entries{font-size:.9rem;color:#64748b;white-space:nowrap}.datatable{width:100%;border-collapse:collapse;background:#fff;border:1px solid #d0d7de;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px #0000000d}.datatable thead{background:#f8fafc;border-bottom:2px solid #e2e8f0}.datatable th{padding:12px 16px;text-align:left;font-weight:700;font-size:.9rem;color:#1e293b;-webkit-user-select:none;user-select:none}.datatable-header-btn{background:none;border:none;padding:0;font-size:inherit;font-weight:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}.datatable-header-btn:hover{color:#0b4bd8;background:none}.sort-icon{font-size:.8rem;color:#0b4bd8}.header-cell{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.header-label{flex:1;font-weight:700}.sort-btn{background:none;border:none;padding:4px 6px;cursor:pointer;color:#64748b;font-size:.9rem;transition:all .2s ease;border-radius:3px;display:flex;align-items:center;justify-content:center;min-width:24px;height:24px}.sort-btn:hover{background-color:#0b4bd81a;color:#0b4bd8}.sort-btn.active{color:#0b4bd8;font-weight:600}.datatable tbody tr{border-bottom:1px solid #e2e8f0;transition:background-color .2s ease}.datatable tbody tr:hover{background-color:#f8fafc}.datatable tbody tr:last-child{border-bottom:none}.datatable td{padding:12px 16px;font-size:.95rem;color:#475569}.datatable-empty{text-align:center;padding:24px 16px!important;color:#94a3b8;font-style:italic}.datatable-pagination{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.pagination-btn{padding:8px 12px;border:1px solid #d0d7de;border-radius:4px;background:#fff;color:#0f1720;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.pagination-btn:hover:not(:disabled){background-color:#f1f5f9;border-color:#0b4bd8;color:#0b4bd8}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{font-size:.9rem;color:#64748b;min-width:80px;text-align:center}@media(max-width:768px){.datatable{font-size:.85rem}.datatable th,.datatable td{padding:8px 12px}.datatable-search{flex-direction:column;align-items:flex-start}.datatable-search-input{width:100%;min-width:unset}}

package/dist/data-table-component.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react");var w={exports:{}},g={};var V;function re(){if(V)return g;V=1;var f=Symbol.for("react.transitional.element"),d=Symbol.for("react.fragment");function m(b,i,s){var _=null;if(s!==void 0&&(_=""+s),i.key!==void 0&&(_=""+i.key),"key"in i){s={};for(var c in i)c!=="key"&&(s[c]=i[c])}else s=i;return i=s.ref,{$$typeof:f,type:b,key:_,ref:i!==void 0?i:null,props:s}}return g.Fragment=d,g.jsx=m,g.jsxs=m,g}var y={};var q;function te(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Q?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case u:return"Fragment";case N:return"Profiler";case T:return"StrictMode";case X:return"Suspense";case B:return"SuspenseList";case Z:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case t:return"Portal";case z:return e.displayName||"Context";case O:return(e._context.displayName||"Context")+".Consumer";case G:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case H:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case P:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function d(e){return""+e}function m(e){try{d(e);var r=!1}catch{r=!0}if(r){r=console;var a=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return a.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),d(e)}}function b(e){if(e===u)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===P)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=C.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function _(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function c(e,r){function a(){M||(M=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}a.isReactWarning=!0,Object.defineProperty(e,"key",{get:a,configurable:!0})}function E(){var e=f(this.type);return F[e]||(F[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function j(e,r,a,o,A,$){var l=a.ref;return e={$$typeof:S,type:e,key:r,props:a,_owner:o},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:$}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,r,a,o,A,$){var l=r.children;if(l!==void 0)if(o)if(K(l)){for(o=0;o<l.length;o++)p(l[o]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else p(l);if(I.call(r,"key")){l=f(e);var k=Object.keys(r).filter(function(ee){return ee!=="key"});o=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",U[l+o]||(k=0<k.length?"{"+k.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,l,k,l),U[l+o]=!0)}if(l=null,a!==void 0&&(m(a),l=""+a),_(r)&&(m(r.key),l=""+r.key),"key"in r){a={};for(var D in r)D!=="key"&&(a[D]=r[D])}else a=r;return l&&c(a,typeof e=="function"?e.displayName||e.name||"Unknown":e),j(e,l,a,i(),A,$)}function p(e){v(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===P&&(e._payload.status==="fulfilled"?v(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function v(e){return typeof e=="object"&&e!==null&&e.$$typeof===S}var R=x,S=Symbol.for("react.transitional.element"),t=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),z=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),X=Symbol.for("react.suspense"),B=Symbol.for("react.suspense_list"),H=Symbol.for("react.memo"),P=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),C=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,K=Array.isArray,Y=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var M,F={},L=R.react_stack_bottom_frame.bind(R,s)(),W=Y(b(s)),U={};y.Fragment=u,y.jsx=function(e,r,a){var o=1e4>C.recentlyCreatedOwnerStacks++;return h(e,r,a,!1,o?Error("react-stack-top-frame"):L,o?Y(b(e)):W)},y.jsxs=function(e,r,a){var o=1e4>C.recentlyCreatedOwnerStacks++;return h(e,r,a,!0,o?Error("react-stack-top-frame"):L,o?Y(b(e)):W)}})()),y}var J;function ae(){return J||(J=1,process.env.NODE_ENV==="production"?w.exports=re():w.exports=te()),w.exports}var n=ae();function ne({data:f=[],columns:d=[],itemsPerPage:m=10}){const[b,i]=x.useState(""),[s,_]=x.useState({key:null,direction:"asc"}),[c,E]=x.useState(1),j=x.useMemo(()=>b?f.filter(t=>d.some(u=>String(t[u.key]).toLowerCase().includes(b.toLowerCase()))):f,[f,b,d]),h=x.useMemo(()=>s.key?[...j].sort((u,T)=>{const N=u[s.key],O=T[s.key];return N<O?s.direction==="asc"?-1:1:N>O?s.direction==="asc"?1:-1:0}):j,[j,s]),p=Math.ceil(h.length/m),v=(c-1)*m,R=h.slice(v,v+m),S=t=>{_(u=>u.key===t?{key:t,direction:u.direction==="asc"?"desc":"asc"}:{key:t,direction:"asc"})};return n.jsxs("div",{className:"datatable-container",children:[n.jsxs("div",{className:"datatable-search",children:[n.jsx("input",{type:"text",placeholder:"Search...",value:b,onChange:t=>{i(t.target.value),E(1)},className:"datatable-search-input"}),n.jsxs("span",{className:"datatable-entries",children:["Showing ",v+1," to"," ",Math.min(v+m,h.length)," of"," ",h.length," entries"]})]}),n.jsxs("table",{className:"datatable",children:[n.jsx("thead",{children:n.jsx("tr",{children:d.map(t=>n.jsx("th",{children:n.jsxs("div",{className:"header-cell",children:[n.jsx("span",{className:"header-label",children:t.label}),n.jsx("button",{className:`sort-btn ${s.key===t.key?"active":""}`,onClick:()=>S(t.key),title:`Trier par ${t.label}`,children:s.key===t.key?s.direction==="asc"?"↑":"↓":"↕"})]})},t.key))})}),n.jsx("tbody",{children:R.length>0?R.map((t,u)=>n.jsx("tr",{children:d.map(T=>n.jsx("td",{children:t[T.key]},T.key))},u)):n.jsx("tr",{children:n.jsx("td",{colSpan:d.length,className:"datatable-empty",children:"No data found"})})})]}),n.jsxs("div",{className:"datatable-pagination",children:[n.jsx("button",{className:"pagination-btn",disabled:c===1,onClick:()=>E(1),children:"First"}),n.jsx("button",{className:"pagination-btn",disabled:c===1,onClick:()=>E(t=>t-1),children:"Previous"}),n.jsxs("span",{className:"pagination-info",children:["Page ",c," of ",p||1]}),n.jsx("button",{className:"pagination-btn",disabled:c===p||p===0,onClick:()=>E(t=>t+1),children:"Next"}),n.jsx("button",{className:"pagination-btn",disabled:c===p||p===0,onClick:()=>E(p),children:"Last"})]})]})}exports.DataTable=ne;

package/dist/data-table-component.es.js

@@ -0,0 +1,369 @@
+import te, { useState as D, useMemo as V } from "react";
+var A = { exports: {} }, j = {};
+var q;
+function ae() {
+  if (q) return j;
+  q = 1;
+  var f = /* @__PURE__ */ Symbol.for("react.transitional.element"), d = /* @__PURE__ */ Symbol.for("react.fragment");
+  function m(b, i, o) {
+    var _ = null;
+    if (o !== void 0 && (_ = "" + o), i.key !== void 0 && (_ = "" + i.key), "key" in i) {
+      o = {};
+      for (var c in i)
+        c !== "key" && (o[c] = i[c]);
+    } else o = i;
+    return i = o.ref, {
+      $$typeof: f,
+      type: b,
+      key: _,
+      ref: i !== void 0 ? i : null,
+      props: o
+    };
+  }
+  return j.Fragment = d, j.jsx = m, j.jsxs = m, j;
+}
+var g = {};
+var J;
+function ne() {
+  return J || (J = 1, process.env.NODE_ENV !== "production" && (function() {
+    function f(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case u:
+          return "Fragment";
+        case S:
+          return "Profiler";
+        case k:
+          return "StrictMode";
+        case B:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case t:
+            return "Portal";
+          case G:
+            return e.displayName || "Context";
+          case N:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case X:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : f(e.type) || "Memo";
+          case w:
+            r = e._payload, e = e._init;
+            try {
+              return f(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function d(e) {
+      return "" + e;
+    }
+    function m(e) {
+      try {
+        d(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var a = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return a.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          s
+        ), d(e);
+      }
+    }
+    function b(e) {
+      if (e === u) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === w)
+        return "<...>";
+      try {
+        var r = f(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function i() {
+      var e = P.A;
+      return e === null ? null : e.getOwner();
+    }
+    function o() {
+      return Error("react-stack-top-frame");
+    }
+    function _(e) {
+      if (I.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function c(e, r) {
+      function a() {
+        F || (F = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      a.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: a,
+        configurable: !0
+      });
+    }
+    function E() {
+      var e = f(this.type);
+      return L[e] || (L[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function x(e, r, a, s, O, Y) {
+      var l = a.ref;
+      return e = {
+        $$typeof: y,
+        type: e,
+        key: r,
+        props: a,
+        _owner: s
+      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: E
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: O
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Y
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function h(e, r, a, s, O, Y) {
+      var l = r.children;
+      if (l !== void 0)
+        if (s)
+          if (ee(l)) {
+            for (s = 0; s < l.length; s++)
+              p(l[s]);
+            Object.freeze && Object.freeze(l);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else p(l);
+      if (I.call(r, "key")) {
+        l = f(e);
+        var T = Object.keys(r).filter(function(re) {
+          return re !== "key";
+        });
+        s = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", U[l + s] || (T = 0 < T.length ? "{" + T.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          s,
+          l,
+          T,
+          l
+        ), U[l + s] = !0);
+      }
+      if (l = null, a !== void 0 && (m(a), l = "" + a), _(r) && (m(r.key), l = "" + r.key), "key" in r) {
+        a = {};
+        for (var $ in r)
+          $ !== "key" && (a[$] = r[$]);
+      } else a = r;
+      return l && c(
+        a,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), x(
+        e,
+        l,
+        a,
+        i(),
+        O,
+        Y
+      );
+    }
+    function p(e) {
+      v(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === w && (e._payload.status === "fulfilled" ? v(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function v(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === y;
+    }
+    var R = te, y = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.portal"), u = /* @__PURE__ */ Symbol.for("react.fragment"), k = /* @__PURE__ */ Symbol.for("react.strict_mode"), S = /* @__PURE__ */ Symbol.for("react.profiler"), N = /* @__PURE__ */ Symbol.for("react.consumer"), G = /* @__PURE__ */ Symbol.for("react.context"), X = /* @__PURE__ */ Symbol.for("react.forward_ref"), B = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), w = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), P = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, ee = Array.isArray, C = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    R = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var F, L = {}, M = R.react_stack_bottom_frame.bind(
+      R,
+      o
+    )(), W = C(b(o)), U = {};
+    g.Fragment = u, g.jsx = function(e, r, a) {
+      var s = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        r,
+        a,
+        !1,
+        s ? Error("react-stack-top-frame") : M,
+        s ? C(b(e)) : W
+      );
+    }, g.jsxs = function(e, r, a) {
+      var s = 1e4 > P.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        r,
+        a,
+        !0,
+        s ? Error("react-stack-top-frame") : M,
+        s ? C(b(e)) : W
+      );
+    };
+  })()), g;
+}
+var z;
+function oe() {
+  return z || (z = 1, process.env.NODE_ENV === "production" ? A.exports = ae() : A.exports = ne()), A.exports;
+}
+var n = oe();
+function le({
+  data: f = [],
+  columns: d = [],
+  itemsPerPage: m = 10
+}) {
+  const [b, i] = D(""), [o, _] = D({ key: null, direction: "asc" }), [c, E] = D(1), x = V(() => b ? f.filter(
+    (t) => d.some(
+      (u) => String(t[u.key]).toLowerCase().includes(b.toLowerCase())
+    )
+  ) : f, [f, b, d]), h = V(() => o.key ? [...x].sort((u, k) => {
+    const S = u[o.key], N = k[o.key];
+    return S < N ? o.direction === "asc" ? -1 : 1 : S > N ? o.direction === "asc" ? 1 : -1 : 0;
+  }) : x, [x, o]), p = Math.ceil(h.length / m), v = (c - 1) * m, R = h.slice(v, v + m), y = (t) => {
+    _((u) => u.key === t ? {
+      key: t,
+      direction: u.direction === "asc" ? "desc" : "asc"
+    } : { key: t, direction: "asc" });
+  };
+  return /* @__PURE__ */ n.jsxs("div", { className: "datatable-container", children: [
+    /* @__PURE__ */ n.jsxs("div", { className: "datatable-search", children: [
+      /* @__PURE__ */ n.jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search...",
+          value: b,
+          onChange: (t) => {
+            i(t.target.value), E(1);
+          },
+          className: "datatable-search-input"
+        }
+      ),
+      /* @__PURE__ */ n.jsxs("span", { className: "datatable-entries", children: [
+        "Showing ",
+        v + 1,
+        " to",
+        " ",
+        Math.min(v + m, h.length),
+        " of",
+        " ",
+        h.length,
+        " entries"
+      ] })
+    ] }),
+    /* @__PURE__ */ n.jsxs("table", { className: "datatable", children: [
+      /* @__PURE__ */ n.jsx("thead", { children: /* @__PURE__ */ n.jsx("tr", { children: d.map((t) => /* @__PURE__ */ n.jsx("th", { children: /* @__PURE__ */ n.jsxs("div", { className: "header-cell", children: [
+        /* @__PURE__ */ n.jsx("span", { className: "header-label", children: t.label }),
+        /* @__PURE__ */ n.jsx(
+          "button",
+          {
+            className: `sort-btn ${o.key === t.key ? "active" : ""}`,
+            onClick: () => y(t.key),
+            title: `Trier par ${t.label}`,
+            children: o.key === t.key ? o.direction === "asc" ? "↑" : "↓" : "↕"
+          }
+        )
+      ] }) }, t.key)) }) }),
+      /* @__PURE__ */ n.jsx("tbody", { children: R.length > 0 ? R.map((t, u) => /* @__PURE__ */ n.jsx("tr", { children: d.map((k) => /* @__PURE__ */ n.jsx("td", { children: t[k.key] }, k.key)) }, u)) : /* @__PURE__ */ n.jsx("tr", { children: /* @__PURE__ */ n.jsx("td", { colSpan: d.length, className: "datatable-empty", children: "No data found" }) }) })
+    ] }),
+    /* @__PURE__ */ n.jsxs("div", { className: "datatable-pagination", children: [
+      /* @__PURE__ */ n.jsx(
+        "button",
+        {
+          className: "pagination-btn",
+          disabled: c === 1,
+          onClick: () => E(1),
+          children: "First"
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        "button",
+        {
+          className: "pagination-btn",
+          disabled: c === 1,
+          onClick: () => E((t) => t - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ n.jsxs("span", { className: "pagination-info", children: [
+        "Page ",
+        c,
+        " of ",
+        p || 1
+      ] }),
+      /* @__PURE__ */ n.jsx(
+        "button",
+        {
+          className: "pagination-btn",
+          disabled: c === p || p === 0,
+          onClick: () => E((t) => t + 1),
+          children: "Next"
+        }
+      ),
+      /* @__PURE__ */ n.jsx(
+        "button",
+        {
+          className: "pagination-btn",
+          disabled: c === p || p === 0,
+          onClick: () => E(p),
+          children: "Last"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  le as DataTable
+};

package/dist/data-table-component.umd.js

@@ -0,0 +1,6 @@
+(function(_,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],d):(_=typeof globalThis<"u"?globalThis:_||self,d(_.DataTableComponent={},_.React))})(this,(function(_,d){"use strict";var N={exports:{}},y={};var F;function X(){if(F)return y;F=1;var f=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function b(p,i,o){var E=null;if(o!==void 0&&(E=""+o),i.key!==void 0&&(E=""+i.key),"key"in i){o={};for(var c in i)c!=="key"&&(o[c]=i[c])}else o=i;return i=o.ref,{$$typeof:f,type:p,key:E,ref:i!==void 0?i:null,props:o}}return y.Fragment=m,y.jsx=b,y.jsxs=b,y}var g={};var L;function q(){return L||(L=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ae?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case u:return"Fragment";case A:return"Profiler";case x:return"StrictMode";case K:return"Suspense";case ee:return"SuspenseList";case te:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case t:return"Portal";case Z:return e.displayName||"Context";case w:return(e._context.displayName||"Context")+".Consumer";case Q:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case re:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case C:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function m(e){return""+e}function b(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,s=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",s),m(e)}}function p(e){if(e===u)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=Y.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function E(e){if(U.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function c(e,r){function n(){V||(V=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function v(){var e=f(this.type);return J[e]||(J[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function S(e,r,n,s,P,I){var l=n.ref;return e={$$typeof:O,type:e,key:r,props:n,_owner:s},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:v}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function R(e,r,n,s,P,I){var l=r.children;if(l!==void 0)if(s)if(ne(l)){for(s=0;s<l.length;s++)h(l[s]);Object.freeze&&Object.freeze(l)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else h(l);if(U.call(r,"key")){l=f(e);var j=Object.keys(r).filter(function(oe){return oe!=="key"});s=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",G[l+s]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,s,l,j,l),G[l+s]=!0)}if(l=null,n!==void 0&&(b(n),l=""+n),E(r)&&(b(r.key),l=""+r.key),"key"in r){n={};for(var M in r)M!=="key"&&(n[M]=r[M])}else n=r;return l&&c(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),S(e,l,n,i(),P,I)}function h(e){T(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?T(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function T(e){return typeof e=="object"&&e!==null&&e.$$typeof===O}var k=d,O=Symbol.for("react.transitional.element"),t=Symbol.for("react.portal"),u=Symbol.for("react.fragment"),x=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),w=Symbol.for("react.consumer"),Z=Symbol.for("react.context"),Q=Symbol.for("react.forward_ref"),K=Symbol.for("react.suspense"),ee=Symbol.for("react.suspense_list"),re=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),te=Symbol.for("react.activity"),ae=Symbol.for("react.client.reference"),Y=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,ne=Array.isArray,D=console.createTask?console.createTask:function(){return null};k={react_stack_bottom_frame:function(e){return e()}};var V,J={},z=k.react_stack_bottom_frame.bind(k,o)(),$=D(p(o)),G={};g.Fragment=u,g.jsx=function(e,r,n){var s=1e4>Y.recentlyCreatedOwnerStacks++;return R(e,r,n,!1,s?Error("react-stack-top-frame"):z,s?D(p(e)):$)},g.jsxs=function(e,r,n){var s=1e4>Y.recentlyCreatedOwnerStacks++;return R(e,r,n,!0,s?Error("react-stack-top-frame"):z,s?D(p(e)):$)}})()),g}var W;function B(){return W||(W=1,process.env.NODE_ENV==="production"?N.exports=X():N.exports=q()),N.exports}var a=B();function H({data:f=[],columns:m=[],itemsPerPage:b=10}){const[p,i]=d.useState(""),[o,E]=d.useState({key:null,direction:"asc"}),[c,v]=d.useState(1),S=d.useMemo(()=>p?f.filter(t=>m.some(u=>String(t[u.key]).toLowerCase().includes(p.toLowerCase()))):f,[f,p,m]),R=d.useMemo(()=>o.key?[...S].sort((u,x)=>{const A=u[o.key],w=x[o.key];return A<w?o.direction==="asc"?-1:1:A>w?o.direction==="asc"?1:-1:0}):S,[S,o]),h=Math.ceil(R.length/b),T=(c-1)*b,k=R.slice(T,T+b),O=t=>{E(u=>u.key===t?{key:t,direction:u.direction==="asc"?"desc":"asc"}:{key:t,direction:"asc"})};return a.jsxs("div",{className:"datatable-container",children:[a.jsxs("div",{className:"datatable-search",children:[a.jsx("input",{type:"text",placeholder:"Search...",value:p,onChange:t=>{i(t.target.value),v(1)},className:"datatable-search-input"}),a.jsxs("span",{className:"datatable-entries",children:["Showing ",T+1," to"," ",Math.min(T+b,R.length)," of"," ",R.length," entries"]})]}),a.jsxs("table",{className:"datatable",children:[a.jsx("thead",{children:a.jsx("tr",{children:m.map(t=>a.jsx("th",{children:a.jsxs("div",{className:"header-cell",children:[a.jsx("span",{className:"header-label",children:t.label}),a.jsx("button",{className:`sort-btn ${o.key===t.key?"active":""}`,onClick:()=>O(t.key),title:`Trier par ${t.label}`,children:o.key===t.key?o.direction==="asc"?"↑":"↓":"↕"})]})},t.key))})}),a.jsx("tbody",{children:k.length>0?k.map((t,u)=>a.jsx("tr",{children:m.map(x=>a.jsx("td",{children:t[x.key]},x.key))},u)):a.jsx("tr",{children:a.jsx("td",{colSpan:m.length,className:"datatable-empty",children:"No data found"})})})]}),a.jsxs("div",{className:"datatable-pagination",children:[a.jsx("button",{className:"pagination-btn",disabled:c===1,onClick:()=>v(1),children:"First"}),a.jsx("button",{className:"pagination-btn",disabled:c===1,onClick:()=>v(t=>t-1),children:"Previous"}),a.jsxs("span",{className:"pagination-info",children:["Page ",c," of ",h||1]}),a.jsx("button",{className:"pagination-btn",disabled:c===h||h===0,onClick:()=>v(t=>t+1),children:"Next"}),a.jsx("button",{className:"pagination-btn",disabled:c===h||h===0,onClick:()=>v(h),children:"Last"})]})]})}_.DataTable=H,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})}));

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "data-table-component-gif",
+  "version": "0.0.3",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "dist/data-table-component.cjs.js",
+  "module": "dist/data-table-component.es.js",
+  "repository": {
+    "type": "git",
+    "url": "URL_OF_YOUR_REPOSITORY"
+  }
+}