arengibook 2.1.0-table → 2.1.1-table

package/dist/index.js

@@ -44743,7 +44743,7 @@ if (typeof window !== 'undefined') {
   window.ArengibookToastPresets = ToastPresets;
 }
 
-var css_248z$1 = ".p-paginator {\n  font-size: 14px;\n}\n.p-paginator .p-paginator-first,\n.p-paginator .p-paginator-prev,\n.p-paginator .p-paginator-next,\n.p-paginator .p-paginator-last,\n.p-paginator .p-paginator-pages .p-paginator-page,\n.p-paginator .p-paginator-current,\n.p-paginator .p-dropdown .p-dropdown-label,\n.p-paginator .p-dropdown-item,\n.p-paginator .p-paginator-page-input .p-inputtext {\n  font-size: 14px;\n}\n\ntable.arengi-table thead {\n  border: 1px solid #d5d2d2;\n}\ntable.arengi-table thead th {\n  position: sticky;\n  top: 0;\n  z-index: 800;\n  background-color: #fff;\n  border-bottom: 1px solid lightgrey;\n  font-size: 14px;\n}\ntable.arengi-table thead th:hover {\n  background-color: #d6d6d6;\n}\ntable.arengi-table tbody tr {\n  background-color: transparent;\n}\ntable.arengi-table tbody tr:hover {\n  background-color: rgba(255, 255, 255, 0.5803921569);\n}\n\n.arengi-table td {\n  overflow: hidden;\n  text-align: center !important;\n}\n\n.cell-text {\n  display: block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr > td.p-frozen-column {\n  z-index: 1;\n  background-color: var(--surface-0, #ffffff);\n  background: linear-gradient(45deg, #ebebeb, #ebebeb) !important;\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr.p-row-odd > td.p-frozen-column {\n  background-color: var(--surface-b, #f8f9fa);\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr > td.p-frozen-column.row-actions-cell,\n.p-datatable-scrollable .p-datatable-tbody > tr.p-row-odd > td.p-frozen-column.row-actions-cell {\n  background: #ffffff !important;\n  box-shadow: none !important;\n  border-right: none !important;\n  padding: 0 !important;\n}\n\n.p-datatable .p-datatable-thead > tr > th.row-actions-cell {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n}\n\n.arengi-table .p-cell-editing input,\n.arengi-table .p-cell-editing .p-inputtext,\n.arengi-table .p-cell-editing .p-dropdown,\n.arengi-table .p-cell-editing .p-multiselect,\n.arengi-table .p-cell-editing .p-calendar {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.cell-devise {\n  display: flex;\n  flex-direction: column;\n  gap: 0.1rem;\n  font-size: 0.875rem;\n}\n.cell-devise--editable {\n  cursor: pointer;\n}\n.cell-devise--empty {\n  display: block;\n  width: 100%;\n  height: 1.5rem;\n  cursor: pointer;\n}\n.cell-devise .span-sub {\n  font-size: 0.75rem;\n  color: #71717a;\n}\n\n.devise-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.devise-editor-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  width: 100%;\n  position: relative;\n}\n.devise-editor-fields .p-dropdown-panel {\n  position: absolute;\n  z-index: 1000;\n  top: 100%;\n  left: 0;\n  width: 100%;\n}\n.devise-editor-save {\n  align-self: flex-end;\n}\n\n.arengi-table .p-cell-editing .devise-editor-fields input,\n.arengi-table .p-cell-editing .devise-editor-fields .p-inputtext,\n.arengi-table .p-cell-editing .devise-editor-fields .p-dropdown {\n  width: 100%;\n  min-width: 0;\n}\n\n.doc-cell-empty {\n  color: #aaa;\n  font-size: 0.85rem;\n}\n\n.doc-cell {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n  overflow: hidden;\n}\n.doc-cell-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  font-size: 0.875rem;\n  min-width: 0;\n}\n.doc-cell-summary .pi-paperclip {\n  color: #71717a;\n  font-size: 0.8rem;\n  flex-shrink: 0;\n}\n.doc-cell-summary span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n.doc-cell-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n  padding-left: 1.1rem;\n  font-size: 0.8rem;\n}\n.doc-cell-list div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.doc-cell-list a {\n  color: #3b82f6;\n  text-decoration: none;\n}\n.doc-cell-list a:hover {\n  text-decoration: underline;\n}\n\n.doc-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.doc-editor-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.8rem;\n}\n.doc-editor-table td {\n  padding: 0.2rem 0.35rem;\n  vertical-align: middle;\n}\n.doc-editor-table td a {\n  color: #3b82f6;\n  text-decoration: none;\n  word-break: break-all;\n}\n.doc-editor-table td a:hover {\n  text-decoration: underline;\n}\n.doc-editor-table td:last-child {\n  width: 2rem;\n  text-align: center;\n}\n.doc-editor-add {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  cursor: pointer;\n  align-self: center;\n}\n\n.arengi-table .arengi-table-grey-title-box {\n  overflow: hidden;\n  min-width: 0;\n}\n\n.arengi-table .arengi-table-grey-title:hover .table-item-title,\n.arengi-table .arengi-table-grey-title .table-item-title:hover {\n  text-decoration: none !important;\n}\n\n.arengi-table .table-item-title {\n  display: block !important;\n  min-width: 0 !important;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.p-datatable .p-column-header-content {\n  justify-content: center;\n}\n\n.tab_label {\n  display: inline-block;\n  padding: 5px 10px;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  border-radius: 5px;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  height: initial;\n}\n\n.badge {\n  padding: 8px 12px;\n  border-radius: 5px;\n  height: auto;\n  margin: 2px;\n  font-weight: 400;\n  box-shadow: 2px 4px 5px grey;\n  white-space: inherit;\n  min-width: 90px;\n}\n.badge:not(.badge-small) {\n  width: 100%;\n}\n\ntable.arengi-table td.arengi-table-grey-title:not(.normal) {\n  background: linear-gradient(45deg, rgba(55, 55, 55, 0.7882352941), rgba(115, 115, 115, 0.7882352941));\n  color: white;\n}\ntable.arengi-table td.arengi-table-grey-title:not(.normal) a {\n  opacity: 1;\n  min-width: 150px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  text-transform: uppercase;\n}\ntable.arengi-table td.arengi-table-grey-title:not(.normal) a:hover {\n  color: #dedede;\n  text-decoration: underline;\n}\ntable.arengi-table td.arengi-table-grey-title:not(.normal):hover {\n  background-color: #646464;\n  transition-duration: 0.1s;\n}\n\n.RiskNumber-table {\n  max-width: 50px;\n}\n.RiskNumber-table div {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.RiskNumber-table div span {\n  width: 30px;\n  height: 30px;\n  min-width: 30px;\n  min-height: 30px;\n  max-width: 30px;\n  max-height: 30px;\n  border-radius: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.RiskLabel-table .etiquetteMatrix-risque {\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  width: fit-content;\n  max-width: 190px;\n  display: flex;\n  justify-content: flex-start;\n  border-radius: 3px;\n  background-color: #fff;\n  color: black;\n  margin: 5px;\n  padding: 0;\n  border: 0 solid transparent;\n}\n.RiskLabel-table .etiquetteMatrix-risque .matrix-RisqueLabelColor {\n  min-width: 20px;\n  max-width: 20px;\n  margin-right: 5px;\n  border-right: 1px solid rgba(0, 0, 0, 0.3607843137);\n  border-radius: 3px 0 0 3px;\n}\n.RiskLabel-table .etiquetteMatrix-risque .matrix-RisqueLabel {\n  font-size: 13px;\n  font-weight: 300;\n  padding: 3px 10px 3px 5px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.RiskOwner-table .risk_owner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: max-content;\n}\n.RiskOwner-table .risk_owner a {\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  padding: 5px 10px;\n  border-radius: 5px;\n  background-color: white;\n  opacity: 1;\n  margin: 2px;\n  position: relative;\n}\n.RiskOwner-table .risk_owner a:hover {\n  z-index: 9999;\n}\n\n.limite_txt_table {\n  min-height: 50px;\n  max-height: 90px;\n  min-width: 250px;\n}\n.limite_txt_table p {\n  line-height: 1.3;\n  font-size: 14px;\n}\n\n.action-picto .picto {\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  padding: 5px 10px;\n  border-radius: 5px;\n  margin: 5px;\n}";
+var css_248z$1 = ".p-paginator {\n  font-size: 14px;\n}\n.p-paginator .p-paginator-first,\n.p-paginator .p-paginator-prev,\n.p-paginator .p-paginator-next,\n.p-paginator .p-paginator-last,\n.p-paginator .p-paginator-pages .p-paginator-page,\n.p-paginator .p-paginator-current,\n.p-paginator .p-dropdown .p-dropdown-label,\n.p-paginator .p-dropdown-item,\n.p-paginator .p-paginator-page-input .p-inputtext {\n  font-size: 14px;\n}\n\n.p-datatable .p-datatable-tbody > tr.air-row--selected > td {\n  background-color: #f0fdf8 !important;\n}\n\ntable.arengi-table thead {\n  border: 1px solid #d5d2d2;\n}\ntable.arengi-table thead th {\n  position: sticky;\n  top: 0;\n  z-index: 800;\n  background-color: #fff;\n  border-bottom: 1px solid lightgrey;\n  font-size: 14px;\n}\ntable.arengi-table thead th:hover {\n  background-color: #d6d6d6;\n}\ntable.arengi-table tbody tr {\n  background-color: transparent;\n}\ntable.arengi-table tbody tr:hover {\n  background-color: rgba(255, 255, 255, 0.5803921569);\n}\n\n.arengi-table td {\n  overflow: hidden;\n  text-align: center !important;\n}\n\n.cell-text {\n  display: block;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr > td.p-frozen-column {\n  z-index: 1;\n  background-color: var(--surface-0, #ffffff);\n  background: linear-gradient(45deg, #ebebeb, #ebebeb) !important;\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr.p-row-odd > td.p-frozen-column {\n  background-color: var(--surface-b, #f8f9fa);\n}\n\n.p-datatable-scrollable .p-datatable-tbody > tr > td.p-frozen-column.row-actions-cell,\n.p-datatable-scrollable .p-datatable-tbody > tr.p-row-odd > td.p-frozen-column.row-actions-cell {\n  background: #ffffff !important;\n  box-shadow: none !important;\n  border-right: none !important;\n  padding: 0 !important;\n}\n\n.p-datatable .p-datatable-thead > tr > th.row-actions-cell {\n  background: transparent !important;\n  border: none !important;\n  box-shadow: none !important;\n  padding: 0 !important;\n}\n\n.arengi-table .p-cell-editing input,\n.arengi-table .p-cell-editing .p-inputtext,\n.arengi-table .p-cell-editing .p-dropdown,\n.arengi-table .p-cell-editing .p-multiselect,\n.arengi-table .p-cell-editing .p-calendar {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.cell-devise {\n  display: flex;\n  flex-direction: column;\n  gap: 0.1rem;\n  font-size: 0.875rem;\n}\n.cell-devise--editable {\n  cursor: pointer;\n}\n.cell-devise--empty {\n  display: block;\n  width: 100%;\n  height: 1.5rem;\n  cursor: pointer;\n}\n.cell-devise .span-sub {\n  font-size: 0.75rem;\n  color: #71717a;\n}\n\n.devise-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.devise-editor-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  width: 100%;\n  position: relative;\n}\n.devise-editor-fields .p-dropdown-panel {\n  position: absolute;\n  z-index: 1000;\n  top: 100%;\n  left: 0;\n  width: 100%;\n}\n.devise-editor-save {\n  align-self: flex-end;\n}\n\n.arengi-table .p-cell-editing .devise-editor-fields input,\n.arengi-table .p-cell-editing .devise-editor-fields .p-inputtext,\n.arengi-table .p-cell-editing .devise-editor-fields .p-dropdown {\n  width: 100%;\n  min-width: 0;\n}\n\n.doc-cell-empty {\n  color: #aaa;\n  font-size: 0.85rem;\n}\n\n.doc-cell {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  min-width: 0;\n  overflow: hidden;\n}\n.doc-cell-summary {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n  font-size: 0.875rem;\n  min-width: 0;\n}\n.doc-cell-summary .pi-paperclip {\n  color: #71717a;\n  font-size: 0.8rem;\n  flex-shrink: 0;\n}\n.doc-cell-summary span {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n.doc-cell-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.15rem;\n  padding-left: 1.1rem;\n  font-size: 0.8rem;\n}\n.doc-cell-list div {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.doc-cell-list a {\n  color: #3b82f6;\n  text-decoration: none;\n}\n.doc-cell-list a:hover {\n  text-decoration: underline;\n}\n\n.doc-editor {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4rem;\n  padding: 0.25rem 0;\n}\n.doc-editor-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.8rem;\n}\n.doc-editor-table td {\n  padding: 0.2rem 0.35rem;\n  vertical-align: middle;\n}\n.doc-editor-table td a {\n  color: #3b82f6;\n  text-decoration: none;\n  word-break: break-all;\n}\n.doc-editor-table td a:hover {\n  text-decoration: underline;\n}\n.doc-editor-table td:last-child {\n  width: 2rem;\n  text-align: center;\n}\n.doc-editor-add {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3rem;\n  cursor: pointer;\n  align-self: center;\n}\n\n.arengi-table .arengi-table-grey-title-box {\n  overflow: hidden;\n  min-width: 0;\n}\n\n.arengi-table .arengi-table-grey-title:hover .table-item-title,\n.arengi-table .arengi-table-grey-title .table-item-title:hover {\n  text-decoration: none !important;\n}\n\n.arengi-table .table-item-title {\n  display: block !important;\n  min-width: 0 !important;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.p-datatable .p-column-header-content {\n  justify-content: center;\n}\n\n.tab_label {\n  display: inline-block;\n  padding: 5px 10px;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  border-radius: 5px;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  height: initial;\n}\n\n.badge {\n  padding: 8px 12px;\n  border-radius: 5px;\n  height: auto;\n  margin: 2px;\n  font-weight: 400;\n  box-shadow: 2px 4px 5px grey;\n  white-space: inherit;\n  min-width: 90px;\n}\n.badge:not(.badge-small) {\n  width: 100%;\n}\n\ntable.arengi-table td.arengi-table-grey-title:not(.normal) {\n  background: linear-gradient(45deg, rgba(55, 55, 55, 0.7882352941), rgba(115, 115, 115, 0.7882352941));\n  color: white;\n}\ntable.arengi-table td.arengi-table-grey-title:not(.normal) a {\n  opacity: 1;\n  min-width: 150px;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  text-transform: uppercase;\n}\ntable.arengi-table td.arengi-table-grey-title:not(.normal) a:hover {\n  color: #dedede;\n  text-decoration: underline;\n}\ntable.arengi-table td.arengi-table-grey-title:not(.normal):hover {\n  background-color: #646464;\n  transition-duration: 0.1s;\n}\n\n.RiskNumber-table {\n  max-width: 50px;\n}\n.RiskNumber-table div {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.RiskNumber-table div span {\n  width: 30px;\n  height: 30px;\n  min-width: 30px;\n  min-height: 30px;\n  max-width: 30px;\n  max-height: 30px;\n  border-radius: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.RiskLabel-table .etiquetteMatrix-risque {\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  width: fit-content;\n  max-width: 190px;\n  display: flex;\n  justify-content: flex-start;\n  border-radius: 3px;\n  background-color: #fff;\n  color: black;\n  margin: 5px;\n  padding: 0;\n  border: 0 solid transparent;\n}\n.RiskLabel-table .etiquetteMatrix-risque .matrix-RisqueLabelColor {\n  min-width: 20px;\n  max-width: 20px;\n  margin-right: 5px;\n  border-right: 1px solid rgba(0, 0, 0, 0.3607843137);\n  border-radius: 3px 0 0 3px;\n}\n.RiskLabel-table .etiquetteMatrix-risque .matrix-RisqueLabel {\n  font-size: 13px;\n  font-weight: 300;\n  padding: 3px 10px 3px 5px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.RiskOwner-table .risk_owner {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: max-content;\n}\n.RiskOwner-table .risk_owner a {\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  padding: 5px 10px;\n  border-radius: 5px;\n  background-color: white;\n  opacity: 1;\n  margin: 2px;\n  position: relative;\n}\n.RiskOwner-table .risk_owner a:hover {\n  z-index: 9999;\n}\n\n.limite_txt_table {\n  min-height: 50px;\n  max-height: 90px;\n  min-width: 250px;\n}\n.limite_txt_table p {\n  line-height: 1.3;\n  font-size: 14px;\n}\n\n.action-picto .picto {\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4705882353);\n  padding: 5px 10px;\n  border-radius: 5px;\n  margin: 5px;\n}";
 styleInject(css_248z$1);
 
 function _extends$3() {
@@ -48471,6 +48471,53 @@ var RowActionsCell = function RowActionsCell(_ref2) {
     }
   })), actions.map(function (action, i) {
     var _rowData$action$hrefF, _action$href;
+    var itemStyle = {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.6rem',
+      padding: '0.5rem 0.75rem',
+      borderRadius: '5px',
+      color: action.danger ? '#dc2626' : '#111827',
+      textDecoration: 'none',
+      fontSize: '14px',
+      fontWeight: 450,
+      transition: 'background 0.1s',
+      textAlign: 'left',
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      width: '100%'
+    };
+    var iconStyle = {
+      fontSize: '16px',
+      color: action.danger ? '#dc2626' : '#6b7280',
+      flexShrink: 0
+    };
+    var inner = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
+      className: "material-icons",
+      style: iconStyle
+    }, action.icon), /*#__PURE__*/React__default.createElement("span", {
+      style: {
+        flex: 1
+      }
+    }, action.title));
+    if (action.onClick) {
+      return /*#__PURE__*/React__default.createElement("button", {
+        key: i,
+        type: "button",
+        style: itemStyle,
+        onMouseEnter: function onMouseEnter(e) {
+          return e.currentTarget.style.background = action.danger ? '#fef2f2' : '#f3f4f6';
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return e.currentTarget.style.background = 'none';
+        },
+        onClick: function onClick() {
+          setOpen(false);
+          action.onClick(rowData);
+        }
+      }, inner);
+    }
     var extraAttrs = {};
     var actionHref = action.hrefField ? (_rowData$action$hrefF = rowData === null || rowData === void 0 ? void 0 : rowData[action.hrefField]) !== null && _rowData$action$hrefF !== void 0 ? _rowData$action$hrefF : '#' : (_action$href = action.href) !== null && _action$href !== void 0 ? _action$href : '#';
     if (action.hrefAttr === 'data-href') {
@@ -48479,50 +48526,24 @@ var RowActionsCell = function RowActionsCell(_ref2) {
     } else {
       extraAttrs.href = actionHref;
     }
-    if (action.data) {
-      Object.entries(action.data).forEach(function (_ref3) {
-        var _ref4 = _slicedToArray$d(_ref3, 2),
-          k = _ref4[0],
-          v = _ref4[1];
-        extraAttrs[k] = v;
-      });
-    }
+    if (action.data) Object.entries(action.data).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray$d(_ref3, 2),
+        k = _ref4[0],
+        v = _ref4[1];
+      extraAttrs[k] = v;
+    });
     return /*#__PURE__*/React__default.createElement("a", _extends$J({
       key: i,
-      className: action["class"],
-      title: action.title
+      className: action["class"]
     }, extraAttrs, {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.6rem',
-        padding: '0.5rem 0.75rem',
-        borderRadius: '5px',
-        color: '#111827',
-        textDecoration: 'none',
-        fontSize: '0.8125rem',
-        fontWeight: 450,
-        transition: 'background 0.1s',
-        textAlign: 'left'
-      },
+      style: itemStyle,
       onMouseEnter: function onMouseEnter(e) {
         return e.currentTarget.style.background = '#f3f4f6';
       },
       onMouseLeave: function onMouseLeave(e) {
         return e.currentTarget.style.background = 'transparent';
       }
-    }), /*#__PURE__*/React__default.createElement("span", {
-      className: "material-icons",
-      style: {
-        fontSize: '16px',
-        color: '#6b7280',
-        flexShrink: 0
-      }
-    }, action.icon), /*#__PURE__*/React__default.createElement("span", {
-      style: {
-        flex: 1
-      }
-    }, action.title));
+    }), inner);
   })), document.body);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -49350,7 +49371,10 @@ var Table$1 = function Table(_ref13) {
     tableId = _ref13.tableId,
     onAdd = _ref13.onAdd,
     _ref13$addLabel = _ref13.addLabel,
-    addLabel = _ref13$addLabel === void 0 ? 'Ajouter' : _ref13$addLabel;
+    addLabel = _ref13$addLabel === void 0 ? 'Ajouter' : _ref13$addLabel,
+    onDeleteRow = _ref13.onDeleteRow,
+    _ref13$rowSelection = _ref13.rowSelection,
+    rowSelection = _ref13$rowSelection === void 0 ? false : _ref13$rowSelection;
   var _useState31 = useState(true),
     _useState32 = _slicedToArray$d(_useState31, 2),
     locked = _useState32[0],
@@ -49360,10 +49384,26 @@ var Table$1 = function Table(_ref13) {
     _useState34 = _slicedToArray$d(_useState33, 2),
     data = _useState34[0],
     setData = _useState34[1];
+  useEffect(function () {
+    setData(value);
+  }, [value]);
   var onCellChangeRef = useRef(onCellChange);
   useEffect(function () {
     onCellChangeRef.current = onCellChange;
   }, [onCellChange]);
+  var toggleRowSelection = function toggleRowSelection(rowData) {
+    setData(function (prev) {
+      var updated = prev.map(function (r) {
+        return r.id === rowData.id ? _objectSpread2(_objectSpread2({}, r), {}, {
+          _selected: !r._selected
+        }) : r;
+      });
+      if (onSelectionChange) onSelectionChange(updated.filter(function (r) {
+        return r._selected;
+      }));
+      return updated;
+    });
+  };
   var updateRow = useCallback(function (rowId, field, newVal) {
     setData(function (prev) {
       var updated = prev.map(function (row) {
@@ -50785,6 +50825,10 @@ var Table$1 = function Table(_ref13) {
     selectionMode: selectionMode,
     selection: selection,
     onSelectionChange: onSelectionChange,
+    metaKeySelection: false,
+    rowClassName: rowSelection ? function (rowData) {
+      return rowData._selected ? 'air-row--selected' : '';
+    } : undefined,
     globalFilter: globalFilter,
     filters: filterVisible ? filters : undefined,
     filterDisplay: filterVisible ? 'row' : undefined,
@@ -50850,7 +50894,129 @@ var Table$1 = function Table(_ref13) {
         };
       }
     }
-  }, function () {
+  }, rowSelection && /*#__PURE__*/React__default.createElement(Column, {
+    key: "__select__",
+    header: /*#__PURE__*/React__default.createElement("span", {
+      className: "material-icons",
+      style: {
+        fontSize: '16px',
+        color: '#9ca3af'
+      }
+    }, "checklist"),
+    body: function body(rowData) {
+      var selected = !!rowData._selected;
+      return /*#__PURE__*/React__default.createElement("div", {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          toggleRowSelection(rowData);
+        },
+        style: {
+          width: '20px',
+          height: '20px',
+          borderRadius: '4px',
+          cursor: 'pointer',
+          border: "2px solid ".concat(selected ? '#1E976A' : '#d1d5db'),
+          background: selected ? '#1E976A' : '#fff',
+          margin: 'auto',
+          transition: 'all 0.15s',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }
+      }, selected && /*#__PURE__*/React__default.createElement("span", {
+        className: "material-icons",
+        style: {
+          fontSize: '14px',
+          color: '#fff',
+          lineHeight: 1
+        }
+      }, "check"));
+    },
+    style: {
+      width: '42px',
+      minWidth: '42px',
+      maxWidth: '42px',
+      textAlign: 'center'
+    },
+    headerStyle: {
+      width: '42px',
+      minWidth: '42px',
+      maxWidth: '42px',
+      textAlign: 'center'
+    },
+    frozen: true,
+    alignFrozen: "left",
+    reorderable: false,
+    sortable: false,
+    filter: false,
+    pt: {
+      bodyCell: {
+        className: 'row-actions-cell'
+      },
+      headerCell: {
+        className: 'row-actions-cell'
+      }
+    }
+  }), onDeleteRow && /*#__PURE__*/React__default.createElement(Column, {
+    key: "__delete__",
+    header: "",
+    body: function body(rowData) {
+      return /*#__PURE__*/React__default.createElement("div", {
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onDeleteRow(rowData);
+        },
+        title: "Supprimer",
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '28px',
+          height: '28px',
+          borderRadius: '6px',
+          cursor: 'pointer',
+          color: '#ef4444',
+          transition: 'background 0.15s',
+          margin: 'auto'
+        },
+        onMouseEnter: function onMouseEnter(e) {
+          return e.currentTarget.style.background = '#fef2f2';
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return e.currentTarget.style.background = 'transparent';
+        }
+      }, /*#__PURE__*/React__default.createElement("span", {
+        className: "material-icons",
+        style: {
+          fontSize: '18px',
+          lineHeight: 1
+        }
+      }, "delete"));
+    },
+    style: {
+      width: '42px',
+      minWidth: '42px',
+      maxWidth: '42px'
+    },
+    headerStyle: {
+      width: '42px',
+      minWidth: '42px',
+      maxWidth: '42px'
+    },
+    frozen: true,
+    alignFrozen: "left",
+    reorderable: false,
+    sortable: false,
+    filter: false,
+    pt: {
+      bodyCell: {
+        className: 'row-actions-cell'
+      },
+      headerCell: {
+        className: 'row-actions-cell'
+      }
+    }
+  }), function () {
     var actionsCol = columns.find(function (c) {
       return c.actionsField;
     });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "2.1.0-table",
+  "version": "2.1.1-table",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {