@portnet/ui 2.0.1 → 2.0.4

package/dist/components/table/PuiTable.js

@@ -8,320 +8,148 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("core-js/modules/es.array.includes.js");
-require("core-js/modules/es.array.sort.js");
+require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.string.includes.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
-var _xDataGrid = require("@mui/x-data-grid");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _apperance = require("../../config/apperance");
-var _PuiCheckbox = _interopRequireDefault(require("../inputs/PuiCheckbox"));
-var _PuiIcon = _interopRequireDefault(require("../others/PuiIcon"));
 var _PuiTooltip = _interopRequireDefault(require("../others/PuiTooltip"));
-var _PuiTableAction = _interopRequireDefault(require("./PuiTableAction"));
-var _ActionPopover = _interopRequireDefault(require("./ActionPopover"));
-var _system = require("@mui/system");
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "rowDetailPanel", "stickyColumns"];
+const _excluded = ["id", "className", "sx", "elevate", "rows", "rowCount", "columns", "paginationMode", "page", "pageSize", "checkboxSelection", "loading", "stripped", "actions", "oneActionOnly", "onSelect", "onPageChange", "onPageSizeChange", "stickyColumns", "pinnedColumns"]; // Styles personnalisés pour le tableau
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const StyledMuiTable = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.DataGrid, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiDataGrid-root": {
-      fontSize: ".8em",
-      "& .tableActionColumn": {
-        "& .MuiDataGrid-columnHeaderTitle": {
-          justifyContent: "center",
-          display: "flex"
-        },
-        "& .MuiDataGrid-columnHeaderTitleContainer": {
-          justifyContent: "center"
-        }
-      },
-      "&.elevate": {
-        boxShadow: "0px 2px 1px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%)"
-      },
-      backgroundColor: _apperance.palette.gray.light,
-      border: "2px solid ".concat(_apperance.palette.gray.dark),
-      "& .MuiPaginationItem-root": {
-        "&.Mui-selected": {
-          color: _apperance.palette.white,
-          backgroundColor: _apperance.palette.primary
-        }
-      },
-      "&.table-loading .MuiDataGrid-virtualScroller, &.table-loading .MuiDataGrid-footerContainer": {
-        filter: "blur(1px)",
-        "&::before": {
-          content: "''",
-          width: "100%",
-          height: "100%",
-          backgroundColor: _apperance.palette.white,
-          position: "absolute",
-          zIndex: 1,
-          display: "block",
-          opacity: 0
-        }
-      },
-      "&.table-stripped .MuiDataGrid-row": {
-        "&:nth-of-type(even)": {
-          backgroundColor: _apperance.palette.gray.light
-        }
-      },
-      "& .MuiLinearProgress-root": {
-        zIndex: 1,
-        backgroundColor: _apperance.palette.info,
-        "& .MuiLinearProgress-bar": {
-          backgroundColor: _apperance.palette.primary
-        }
-      },
-      "& .MuiDataGrid-columnHeaders": {
-        "& .MuiDataGrid-columnHeader": {
-          "& .MuiDataGrid-columnHeaderTitle": {
-            display: "flex",
-            alignItems: "center",
-            fontWeight: "600",
-            color: _apperance.palette.primary,
-            whiteSpace: "normal",
-            lineHeight: "1.2em"
-          },
-          "&:focus-within": {
-            outline: "none"
-          },
-          "&:last-of-type .MuiDataGrid-columnSeparator": {
-            display: "none"
-          },
-          // Colonne sticky - styles améliorés
-          "&.sticky-column": {
-            position: "sticky",
-            zIndex: 3,
-            // Valeur supérieure pour s'assurer qu'elle reste au-dessus lors du défilement
-            "&.sticky-column-left": {
-              left: 0
-            },
-            "&.sticky-column-right": {
-              right: 0
-            },
-            // S'assurer que le contenu est visible
-            "& .MuiDataGrid-columnHeaderTitleContainer": {
-              visibility: "visible",
-              overflow: "visible"
-            },
-            "& .MuiDataGrid-columnHeaderTitle": {
-              visibility: "visible",
-              overflow: "visible"
-            }
-          }
-        },
-        "& .MuiDataGrid-columnSeparator": {
-          color: _apperance.palette.gray.dark
-        }
-      },
-      "& .MuiDataGrid-cell": {
-        paddingTop: "2px",
-        paddingBottom: "2px",
-        whiteSpace: "normal",
-        textOverflow: "ellipsis",
-        overflow: "hidden",
-        maxHeight: "none",
-        minWidth: 'maxWidth',
-        wordBreak: "break-word",
-        "&.tableAction": {
-          justifyContent: "center",
-          position: "relative",
-          overflow: "initial !important"
-        },
-        "&:focus-within": {
-          outline: "none"
-        },
-        // Cellules sticky - styles améliorés
-        "&.sticky-column": {
-          position: "sticky",
-          zIndex: 2,
-          "&.sticky-column-left": {
-            left: 0
-          },
-          "&.sticky-column-right": {
-            right: 0
-          }
-        }
-      },
-      "& .MuiDataGrid-row": {
-        maxHeight: "none !important",
-        "&:nth-of-type(odd)": {
-          backgroundColor: "#ffffff" // color for odd rows
-        },
-        "&:nth-of-type(even)": {
-          backgroundColor: "#F6F9FF" // color for even rows
-        },
-        "&:hover": {
-          backgroundColor: "#95C7FC"
-        }
-      },
-      "& .MuiDataGrid-virtualScrollerContent": {
-        "& .MuiDataGrid-row": {
-          maxHeight: "none !important"
-        }
-      },
-      "& .MuiDataGrid-virtualScroller": {
-        backgroundColor: _apperance.palette.white
-      },
-      "& .MuiDataGrid-footerContainer": {
-        backgroundColor: _apperance.palette.white,
-        height: "28px",
-        minHeight: "28px"
-      }
-    }
-  };
-});
-const localeText = {
-  noRowsLabel: "Aucune ligne",
-  footerRowSelected: count => count !== 1 ? "".concat(count.toLocaleString(), " lignes s\xE9lectionn\xE9es") : "".concat(count.toLocaleString(), " ligne s\xE9lectionn\xE9e"),
-  footerTotalVisibleRows: (visibleCount, totalCount) => "".concat(visibleCount.toLocaleString(), " de ").concat(totalCount.toLocaleString()),
-  MuiTablePagination: {
-    labelDisplayedRows: _ref => {
-      let {
-        from,
-        to,
-        count
-      } = _ref;
-      return "".concat(from, "\u2013").concat(to, " de ").concat(count !== -1 ? count : "plus que ".concat(to));
-    },
-    labelRowsPerPage: "Lignes par page"
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const tableCustomStyles = "\n  /* Styles g\xE9n\xE9raux am\xE9lior\xE9s */\n  .pui-table {\n    border-radius: 10px;\n    overflow: hidden;\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n  \n  .pui-table .ant-table {\n    border-radius: 8px;\n  }\n  \n  .pui-table .ant-table-thead > tr > th {\n    background-color: #f7f9fc;\n    color: #1f2937;\n    font-weight: 600;\n    padding: 12px 16px;\n    border-bottom: 2px solid #e5e7eb;\n    transition: background-color 0.2s;\n  }\n  \n  .pui-table .ant-table-thead > tr > th:hover {\n    background-color: #eef2ff;\n  }\n  \n  .pui-table .ant-table-tbody > tr > td {\n    padding: 12px 16px;\n    transition: all 0.2s ease;\n  }\n  \n  /* Couleurs altern\xE9es plus contrast\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-light > td {\n    background-color: #ffffff;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-dark > td {\n    background-color: #f4f6f8;\n  }\n  \n  /* Effet de survol doux */\n  .pui-table .ant-table-tbody > tr:hover > td {\n    background-color: rgba(24, 144, 255, 0.1) !important;\n    transition: background-color 0.3s ease;\n  }\n  \n  /* Indicateur visuel sans d\xE9placement */\n  .pui-table .ant-table-tbody > tr {\n    position: relative;\n  }\n  \n  .pui-table .ant-table-tbody > tr:hover {\n    box-shadow: inset 0 0 0 1px rgba(24, 144, 255, 0.3);\n  }\n  \n  .pui-table .ant-table-tbody > tr > td:first-child {\n    position: relative;\n  }\n  \n  .pui-table .ant-table-tbody > tr:hover > td:first-child::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    width: 3px;\n    background-color: #1890ff;\n    animation: pulse 1.5s infinite;\n  }\n  \n  /* Styles des lignes s\xE9lectionn\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td {\n    background-color: rgba(24, 144, 255, 0.05);\n    border-left: none !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td:first-child {\n    position: relative;\n  }\n  \n  /* Indicateur anim\xE9 discret pour lignes s\xE9lectionn\xE9es */\n  .pui-table .ant-table-tbody > tr.ant-table-row-selected > td:first-child::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 100%;\n    width: 3px;\n    background-color: rgba(24, 144, 255, 0.7);\n    animation: pulse 2s infinite;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-selected:hover > td {\n    background-color: rgba(24, 144, 255, 0.15) !important;\n  }\n  \n  /* Styles des lignes en \xE9dition */\n  .pui-table .ant-table-tbody > tr.ant-table-row-editing {\n    background-color: rgba(24, 144, 255, 0.1) !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr.ant-table-row-editing > td {\n    border-bottom: 1px solid #1890ff !important;\n    border-top: 1px solid #1890ff !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr:first-child.ant-table-row-editing > td {\n    border-top: 2px solid #1890ff !important;\n  }\n  \n  .pui-table .ant-table-tbody > tr:last-child.ant-table-row-editing > td {\n    border-bottom: 2px solid #1890ff !important;\n  }\n  \n  /* Animation pour l'indicateur de ligne */\n  @keyframes pulse {\n    0% { opacity: 0.5; }\n    50% { opacity: 1; }\n    100% { opacity: 0.5; }\n  }\n  \n  /* Pagination ergonomique */\n  .pui-table-pagination {\n    padding: 14px 24px;\n    gap: 16px;\n  }\n  \n  .pui-table-pagination .ant-pagination-item,\n  .pui-table-pagination .ant-pagination-prev button,\n  .pui-table-pagination .ant-pagination-next button {\n    height: 36px;\n    min-width: 36px;\n  }\n  \n  .pui-table-pagination .ant-pagination-item {\n    border-radius: 6px;\n    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n    border: 1px solid #e2e8f0;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-item a {\n    padding: 0 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n  }\n  \n  .pui-table-pagination .ant-pagination-prev,\n  .pui-table-pagination .ant-pagination-next {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-item:hover,\n  .pui-table-pagination .ant-pagination-prev:hover button,\n  .pui-table-pagination .ant-pagination-next:hover button {\n    transform: translateY(-2px);\n    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);\n    border-color: #bfdbfe;\n    color: #1890ff;\n    z-index: 2;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active {\n    background: linear-gradient(135deg, #1890ff, #0050b3);\n    border-color: transparent !important;\n    font-weight: 600;\n    position: relative;\n    z-index: 1;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active::after {\n    content: '';\n    position: absolute;\n    inset: -1px;\n    background: linear-gradient(135deg, #40a9ff, #1890ff);\n    border-radius: 7px;\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 0.3s;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active:hover::after {\n    opacity: 1;\n  }\n  \n  .pui-table-pagination .ant-pagination-item-active a {\n    color: white !important;\n    font-weight: 600;\n    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n  }\n  \n  .pui-table-pagination .ant-pagination-options {\n    margin-left: 16px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  \n  .pui-table-pagination .ant-select-selector {\n    border-radius: 6px !important;\n    height: 32px !important;\n    padding: 0 8px !important;\n    border-color: #e2e8f0 !important;\n    transition: all 0.2s !important;\n  }\n  \n  .pui-table-pagination .ant-select:hover .ant-select-selector {\n    border-color: #bfdbfe !important;\n  }\n  \n  .pui-table-pagination .ant-select-focused .ant-select-selector {\n    border-color: #1890ff !important;\n    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2) !important;\n  }\n  \n  .pui-table-pagination .ant-select-selection-item {\n    line-height: 30px !important;\n    font-weight: 500;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper {\n    margin-left: 16px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 500;\n    color: #4b5563;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper input {\n    border-radius: 6px;\n    transition: all 0.2s;\n    height: 32px;\n    border-color: #e2e8f0;\n    width: 50px;\n    padding: 4px 8px;\n    text-align: center;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper input:hover {\n    border-color: #bfdbfe;\n  }\n  \n  .pui-table-pagination .ant-pagination-options-quick-jumper input:focus {\n    border-color: #1890ff;\n    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);\n  }\n  \n  .pui-table-total-items {\n    color: #4b5563;\n    font-size: 14px;\n    font-weight: 500;\n    background-color: rgba(255, 255, 255, 0.7);\n    padding: 6px 12px;\n    border-radius: 6px;\n    border: 1px solid #e2e8f0;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n  }\n  \n  .pui-table-total-items strong {\n    color: #1f2937;\n    background-color: #f1f5f9;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-weight: 600;\n    min-width: 40px;\n    text-align: center;\n  }\n  \n  @media (max-width: 640px) {\n    .pui-table-pagination {\n      flex-direction: column;\n      align-items: flex-start;\n    }\n    \n    .pui-table-pagination .ant-pagination {\n      width: 100%;\n      justify-content: center;\n    }\n    \n    .pui-table-total-items {\n      align-self: center;\n    }\n  }\n";
+
+// Injection des styles dans le document
+const injectStyles = () => {
+  const styleId = 'pui-table-custom-styles';
+
+  // Vérifie si les styles existent déjà
+  if (!document.getElementById(styleId)) {
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.innerHTML = tableCustomStyles;
+    document.head.appendChild(styleElement);
+  }
+};
+
+// Suppression des styles lors du démontage
+const removeStyles = () => {
+  const styleElement = document.getElementById('pui-table-custom-styles');
+  if (styleElement) {
+    document.head.removeChild(styleElement);
   }
 };
-const TableActions = _ref2 => {
+
+// Composant pour les actions du tableau
+const TableActions = _ref => {
   let {
     row,
     actions
-  } = _ref2;
+  } = _ref;
   const [isOpen, setIsOpen] = React.useState(false);
-  const actionsRef = React.useRef();
-  const outsideClickHandler = React.useCallback(event => {
-    if (Boolean(actionsRef.current) && !actionsRef.current.contains(event.target)) {
-      closeHandler();
-    }
-    if (!Boolean(actionsRef.current)) {
-      document.removeEventListener("mouseup", outsideClickHandler, false);
+  const handleActionClick = action => {
+    if (typeof action === 'function') {
+      action(row);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const openHandler = () => {
-    document.addEventListener("mouseup", outsideClickHandler, false);
-    setIsOpen(true);
-  };
-  const closeHandler = () => {
-    document.removeEventListener("mouseup", outsideClickHandler, false);
-    setIsOpen(false);
   };
-  React.useEffect(() => {
-    return () => {
-      document.removeEventListener("mouseup", outsideClickHandler, false);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTableAction.default, {
-      title: "Voir plus",
-      color: "primary",
-      onClick: openHandler,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-        type: "voir-plus"
-      })
-    }), Boolean(isOpen) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Paper, {
-      ref: actionsRef,
-      elevation: 1,
-      sx: {
-        borderRadius: "5px",
-        position: "absolute",
-        right: "0",
-        top: "50%",
-        transform: "translate(0, -50%)",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        paddingX: "11px",
-        height: "calc(100% - 4px)",
-        backgroundColor: _apperance.palette.gray.light,
-        border: "2px solid ".concat(_apperance.palette.gray.dark)
-      },
-      children: [actions.map((action, index) => /*#__PURE__*/React.cloneElement(action, {
-        row,
-        key: index
-      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTableAction.default, {
-        size: "small",
-        title: "Fermer",
-        color: "primary",
-        onClick: closeHandler,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
-          type: "voir-plus"
-        })
-      })]
-    })]
-  });
-};
-const TablePagination = () => {
-  const apiRef = (0, _xDataGrid.useGridApiContext)();
-  const page = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridPageSelector);
-  const pageCount = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridPageCountSelector);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Pagination, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
     size: "small",
-    sx: {
-      position: "absolute",
-      left: "50%",
-      transform: "translateX(-50%)",
-      "& .MuiButtonBase-root": {
-        lineHeight: "1em",
-        fontSize: "1em",
-        minWidth: "20px",
-        height: "20px"
-      }
-    },
-    count: pageCount,
-    page: page + 1,
-    onChange: (event, value) => apiRef.current.setPage(value - 1),
-    showFirstButton: true,
-    showLastButton: true
+    children: actions.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+      title: action.title || '',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, {
+        type: "text",
+        icon: action.icon,
+        size: "small",
+        onClick: () => handleActionClick(action.action)
+      })
+    }, index))
   });
 };
-const TableCheckbox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiCheckbox.default, _objectSpread(_objectSpread({
-    ref: ref
-  }, props), {}, {
-    formik: false,
-    sx: {
-      transform: "scale(.6)",
-      marginTop: "-4px"
-    }
-  }));
+
+// Personnalisation des éléments vides
+const customRenderEmpty = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  style: {
+    textAlign: 'center',
+    padding: '20px 0'
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+    children: "Aucune donn\xE9e \xE0 afficher"
+  })
 });
-const autosizeOptions = {
-  includeHeaders: true,
-  includeOutliers: true
-};
 
-// Ordre de priorité pour les colonnes sticky: -1 = début (à gauche), 0 = ne pas figer, 1 = fin (à droite)
-const calculateStickyOrder = (field, stickyColumns) => {
-  if (!stickyColumns.includes(field)) return 0;
-  const idx = stickyColumns.indexOf(field);
-  if (idx === -1) return 0;
-  return idx;
+// Convertir les colonnes du format DataGrid au format Ant Design
+const convertColumns = (columns, actions, handleSort) => {
+  const processedColumns = columns.map(column => {
+    const antColumn = {
+      title: column.headerName,
+      dataIndex: column.field,
+      key: column.field,
+      width: column.width,
+      sorter: column.sortable !== false,
+      ellipsis: true,
+      className: column.cellClassName
+    };
+
+    // Gestion du rendu personnalisé
+    if (column.renderCell) {
+      antColumn.render = (text, record) => column.renderCell({
+        row: record,
+        value: text
+      });
+    } else if (column.valueGetter) {
+      antColumn.render = (text, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: column.titleGetter ? column.titleGetter(record) : String(column.valueGetter({
+          row: record
+        })),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: column.valueGetter({
+            row: record
+          })
+        })
+      });
+    } else if (column.field) {
+      antColumn.render = (text, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: column.titleGetter ? column.titleGetter(record) : String(record[column.field] || ''),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: record[column.field]
+        })
+      });
+    }
+    return antColumn;
+  });
+
+  // Ajouter la colonne d'actions si nécessaire
+  if (actions && actions.length > 0) {
+    processedColumns.push({
+      title: 'Actions',
+      key: 'action',
+      width: 100,
+      align: 'center',
+      render: (_, record) => /*#__PURE__*/(0, _jsxRuntime.jsx)(TableActions, {
+        row: record,
+        actions: actions
+      })
+    });
+  }
+  return processedColumns;
 };
-const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+
+// Composant principal PuiTable avec Ant Design
+const PuiTable = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
       id,
       className,
@@ -341,191 +169,113 @@ const PuiTable = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
       onSelect,
       onPageChange,
       onPageSizeChange,
-      rowDetailPanel,
-      stickyColumns = []
-    } = _ref3,
-    rest = _objectWithoutProperties(_ref3, _excluded);
-  const [appColumns, setAppColumns] = React.useState(columns);
-
-  // Calcule les positions sticky pour les colonnes figées - logique améliorée
-  const calculateStickyPositions = columns => {
-    let leftOffset = 0;
+      stickyColumns = [],
+      pinnedColumns
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  // Convertir les colonnes au format Ant Design
+  const antColumns = React.useMemo(() => convertColumns(columns, actions), [columns, actions]);
 
-    // Trier les colonnes sticky par ordre d'apparition dans le tableau stickyColumns
-    const sortedColumns = [...columns].sort((a, b) => {
-      const aOrder = calculateStickyOrder(a.field, stickyColumns);
-      const bOrder = calculateStickyOrder(b.field, stickyColumns);
-      if (aOrder === 0 && bOrder === 0) return 0;
-      if (aOrder === 0) return 1;
-      if (bOrder === 0) return -1;
-      return aOrder - bOrder;
-    });
-
-    // Pour chaque colonne, calculer sa position sticky si nécessaire
-    return sortedColumns.map(column => {
-      // Si la colonne n'est pas figée, retournez-la telle quelle
-      if (!stickyColumns.includes(column.field)) {
-        return column;
-      }
+  // Gérer la sélection
+  const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+  const onSelectChange = newSelectedRowKeys => {
+    setSelectedRowKeys(newSelectedRowKeys);
+    if (onSelect) {
+      onSelect(newSelectedRowKeys);
+    }
+  };
 
-      // Toutes les colonnes sticky sont alignées à gauche pour plus de clarté
-      const headerClassName = "".concat(column.headerClassName || '', " sticky-column sticky-column-left");
-      const cellClassName = "".concat(column.cellClassName || '', " sticky-column sticky-column-left");
+  // Configuration des lignes sélectionnables
+  const rowSelection = checkboxSelection ? {
+    selectedRowKeys,
+    onChange: onSelectChange
+  } : undefined;
 
-      // Définir le style pour positionner la colonne
-      const headerStyle = _objectSpread(_objectSpread({}, column.headerStyle || {}), {}, {
-        left: "".concat(leftOffset, "px"),
-        // Assurer que le fond correspond à celui de la ligne
-        backgroundColor: 'inherit',
-        // Appliquer un léger effet d'ombre pour indiquer la position sticky
-        boxShadow: '2px 0 4px -2px rgba(0, 0, 0, 0.15)'
-      });
-      const cellStyle = _objectSpread(_objectSpread({}, column.cellStyle || {}), {}, {
-        left: "".concat(leftOffset, "px"),
-        // Assurer que le fond correspond à celui de la ligne
-        backgroundColor: 'inherit',
-        // Appliquer un léger effet d'ombre pour indiquer la position sticky
-        boxShadow: '2px 0 4px -2px rgba(0, 0, 0, 0.15)'
-      });
-
-      // Mettre à jour l'offset pour la prochaine colonne figée
-      leftOffset += column.width || 100;
-      return _objectSpread(_objectSpread({}, column), {}, {
-        headerClassName,
-        cellClassName,
-        headerStyle,
-        cellStyle
-      });
-    });
+  // Gérer le changement de page
+  const handlePageChange = (newPage, newPageSize) => {
+    if (onPageChange) {
+      // Ant Design utilise une pagination 1-indexed, mais nous gardons notre convention 0-indexed
+      onPageChange(newPage - 1);
+    }
+    if (onPageSizeChange && pageSize !== newPageSize) {
+      onPageSizeChange(newPageSize);
+    }
   };
-  React.useEffect(() => {
-    // Assurez-vous que les colonnes d'action sont ajoutées après le calcul des positions sticky
-    let columnsToProcess = columns;
-
-    // Appliquer les positions sticky
-    const columnsWithSticky = stickyColumns.length > 0 ? calculateStickyPositions(columnsToProcess) : columnsToProcess;
 
-    // Ajouter la colonne d'actions après avoir calculé les positions sticky
-    const finalColumns = Boolean(actions.length) ? [...columnsWithSticky, {
-      field: "action",
-      headerName: "Actions",
-      sortable: false,
-      filterable: false,
-      width: 100,
-      renderCell: _ref4 => {
-        let {
-          row
-        } = _ref4;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.Box, {
-          sx: {
-            display: 'flex',
-            gap: '8px',
-            flexWrap: 'wrap',
-            justifyContent: 'center',
-            alignItems: 'center',
-            minWidth: 0
-          },
-          children: actions.map((action, index) => /*#__PURE__*/React.cloneElement(action, {
-            row,
-            key: index,
-            sx: _objectSpread(_objectSpread({}, action.props.sx), {}, {
-              marginRight: 0,
-              '&:last-child': {
-                marginRight: 0
-              }
-            })
-          }))
+  // Configurer les colonnes sticky
+  const configuredColumns = React.useMemo(() => {
+    if (!stickyColumns || stickyColumns.length === 0) return antColumns;
+    return antColumns.map(column => {
+      if (stickyColumns.includes(column.dataIndex) || stickyColumns.includes(column.key)) {
+        return _objectSpread(_objectSpread({}, column), {}, {
+          fixed: 'left'
         });
-      },
-      cellClassName: "tableAction",
-      headerClassName: "tableActionColumn"
-    }] : columnsWithSticky;
-    setAppColumns(finalColumns.map(column => {
-      const renderCell = Boolean(column.renderCell) ? column.renderCell : Boolean(column.valueGetter) ? columnData => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTooltip.default, {
-        title: Boolean(column.titleGetter) ? column.titleGetter(columnData.row) : String(column.valueGetter(columnData)),
-        children: column.valueGetter(columnData)
-      }) : Boolean(column.field) ? _ref5 => {
-        let {
-          row
-        } = _ref5;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTooltip.default, {
-          title: Boolean(column.titleGetter) ? column.titleGetter(row) : String(row[column.field]),
-          children: row[column.field]
-        });
-      } : undefined;
-      return _objectSpread(_objectSpread({}, column), {}, {
-        renderCell
-      });
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [actions, columns, stickyColumns]);
-  const renderRowDetailPanel = params => {
-    const {
-      data
-    } = params;
-    // Render the passed rowDetailPanel component with the row data
-    return /*#__PURE__*/React.cloneElement(rowDetailPanel, {
-      rowData: data
+      }
+      return column;
     });
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      width: '100%',
-      overflow: 'auto',
-      position: 'relative'
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTable, _objectSpread({
-      ref: ref,
-      id: id,
-      components: {
-        BaseCheckbox: TableCheckbox,
-        LoadingOverlay: _material.LinearProgress,
-        Pagination: TablePagination
-      },
-      className: "".concat(className, " ").concat(stripped ? "table-stripped" : "", " ").concat(loading ? "table-loading" : "", " ").concat(elevate ? "elevate" : ""),
-      sx: {
-        ["& .".concat(_xDataGrid.gridClasses.cell)]: {
-          py: 0.5
-        },
-        // Assurer la cohérence visuelle pour les cellules sticky
-        ["& .".concat(_xDataGrid.gridClasses.cell, ".sticky-column")]: {
-          backgroundColor: 'inherit !important'
-        },
-        ["& .".concat(_xDataGrid.gridClasses.columnHeader, ".sticky-column")]: {
-          backgroundColor: 'inherit !important'
+  }, [antColumns, stickyColumns]);
+
+  // Style du tableau
+  const tableStyle = _objectSpread(_objectSpread({
+    fontSize: '0.85em'
+  }, elevate ? {
+    boxShadow: '0 2px 8px rgba(0,0,0,0.07)'
+  } : {}), sx || {});
+
+  // Injection des styles CSS personnalisés
+  React.useEffect(() => {
+    injectStyles();
+    return () => removeStyles();
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.ConfigProvider, {
+    renderEmpty: customRenderEmpty,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Spin, {
+      spinning: loading,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Table, _objectSpread({
+        ref: ref,
+        id: id,
+        className: "pui-table ".concat(className || '', " ").concat(stripped ? 'table-stripped' : ''),
+        columns: configuredColumns,
+        dataSource: rows.map(row => _objectSpread(_objectSpread({}, row), {}, {
+          key: row.id || row.key || Math.random().toString(36).substr(2, 9)
+        })),
+        pagination: false,
+        rowSelection: rowSelection,
+        size: "small",
+        bordered: true,
+        style: tableStyle,
+        scroll: {
+          x: 'max-content'
         },
-        // S'assurer que les titres des colonnes sont visibles
-        ["& .".concat(_xDataGrid.gridClasses.columnHeaderTitle)]: {
-          overflow: 'visible',
-          whiteSpace: 'normal'
+        rowClassName: (record, index) => {
+          let className = index % 2 === 0 ? 'ant-table-row-light' : 'ant-table-row-dark';
+          if (record.isEditing) className += ' ant-table-row-editing';
+          return className;
         }
-      },
-      autoHeight: true,
-      headerHeight: 60,
-      footerHeight: 40,
-      rowHeight: 40,
-      rows: rows,
-      rowCount: rowCount,
-      columns: appColumns,
-      page: page,
-      pageSize: pageSize,
-      checkboxSelection: checkboxSelection,
-      disableSelectionOnClick: true,
-      disableColumnMenu: true,
-      disableColumnFilter: true,
-      disableColumnSelector: true,
-      disableVirtualization: true,
-      density: "compact",
-      loading: loading,
-      paginationMode: paginationMode,
-      localeText: localeText,
-      getRowHeight: () => 'auto',
-      onPageChange: onPageChange,
-      onPageSizeChange: onPageSizeChange,
-      onSelectionModelChange: onSelect,
-      autosizeOptions: autosizeOptions,
-      rowDetailPanel: renderRowDetailPanel
-    }, rest))
+      }, rest)), paginationMode !== 'none' && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "pui-table-pagination",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: "pui-table-total-items",
+          children: ["Total : ", /*#__PURE__*/(0, _jsxRuntime.jsx)("strong", {
+            children: rowCount || rows.length
+          }), " \xE9l\xE9ments"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Pagination, {
+          current: page + 1,
+          pageSize: pageSize,
+          total: rowCount || rows.length,
+          onChange: handlePageChange,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          showTotal: total => "".concat(total, " \xE9l\xE9ments"),
+          size: "default",
+          onShowSizeChange: (current, size) => {
+            if (onPageSizeChange) {
+              onPageSizeChange(size);
+            }
+          }
+        })]
+      })]
+    })
   });
 });
 PuiTable.propTypes = {
@@ -540,24 +290,29 @@ PuiTable.propTypes = {
   columns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   page: _propTypes.default.number,
   pageSize: _propTypes.default.number,
-  actions: _propTypes.default.arrayOf(_propTypes.default.element),
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string,
+    icon: _propTypes.default.element,
+    action: _propTypes.default.func.isRequired
+  })),
   checkboxSelection: _propTypes.default.bool,
-  paginationMode: _propTypes.default.oneOf(["client", "server"]),
+  paginationMode: _propTypes.default.oneOf(["client", "server", "none"]),
   loading: _propTypes.default.bool,
   onSelect: _propTypes.default.func,
   onPageChange: _propTypes.default.func,
   onPageSizeChange: _propTypes.default.func,
-  onSelectionModelChange: _propTypes.default.func,
-  rowDetailPanel: _propTypes.default.element,
-  stickyColumns: _propTypes.default.arrayOf(_propTypes.default.string)
+  stickyColumns: _propTypes.default.arrayOf(_propTypes.default.string),
+  pinnedColumns: _propTypes.default.object
 };
 PuiTable.defaultProps = {
   oneActionOnly: false,
   elevate: true,
   pageSize: 5,
+  page: 0,
   paginationMode: "client",
   stripped: false,
   actions: [],
-  stickyColumns: []
+  stickyColumns: [],
+  rows: []
 };
 var _default = exports.default = PuiTable;