arengibook 2.0.14-table → 2.0.16-table

package/dist/index.js

@@ -47558,7 +47558,7 @@ var DocumentEditorCell = function DocumentEditorCell(_ref7) {
   var docs = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : [];
   var handleFileChange = /*#__PURE__*/function () {
     var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
-      var file, formData, res, data;
+      var file, formData, res, data, _t, _t2;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.n) {
           case 0:
@@ -47572,7 +47572,8 @@ var DocumentEditorCell = function DocumentEditorCell(_ref7) {
             setUploading(true);
             _context.p = 2;
             formData = new FormData();
-            formData.append('file', file);
+            formData.append('Filedata', file);
+            if (col.csrfToken) formData.append('token', col.csrfToken);
             _context.n = 3;
             return fetch(col.uploadUrl, {
               method: 'POST',
@@ -47580,20 +47581,35 @@ var DocumentEditorCell = function DocumentEditorCell(_ref7) {
             });
           case 3:
             res = _context.v;
+            if (res.ok) {
+              _context.n = 5;
+              break;
+            }
+            _t = Error;
             _context.n = 4;
-            return res.json();
+            return res.text();
           case 4:
-            data = _context.v;
-            options.editorCallback([].concat(_toConsumableArray$a(docs), [data]));
+            _t2 = _context.v;
+            throw new _t(_t2);
           case 5:
-            _context.p = 5;
+            _context.n = 6;
+            return res.json();
+          case 6:
+            data = _context.v;
+            options.editorCallback([].concat(_toConsumableArray$a(docs), [{
+              id: data.id,
+              name: data.name,
+              url: data.path
+            }]));
+          case 7:
+            _context.p = 7;
             setUploading(false);
             e.target.value = '';
-            return _context.f(5);
-          case 6:
+            return _context.f(7);
+          case 8:
             return _context.a(2);
         }
-      }, _callee, null, [[2,, 5, 6]]);
+      }, _callee, null, [[2,, 7, 8]]);
     }));
     return function handleFileChange(_x) {
       return _ref8.apply(this, arguments);
@@ -47645,34 +47661,278 @@ var DocumentEditorCell = function DocumentEditorCell(_ref7) {
     onChange: handleFileChange
   }));
 };
-var Table = function Table(_ref9) {
-  var _ref9$value = _ref9.value,
-    value = _ref9$value === void 0 ? [] : _ref9$value,
-    _ref9$columns = _ref9.columns,
-    columns = _ref9$columns === void 0 ? [] : _ref9$columns,
-    _ref9$paginator = _ref9.paginator,
-    paginator = _ref9$paginator === void 0 ? true : _ref9$paginator,
-    _ref9$rows = _ref9.rows,
-    rows = _ref9$rows === void 0 ? 25 : _ref9$rows,
-    _ref9$loading = _ref9.loading,
-    loading = _ref9$loading === void 0 ? false : _ref9$loading,
-    _ref9$stripedRows = _ref9.stripedRows,
-    stripedRows = _ref9$stripedRows === void 0 ? false : _ref9$stripedRows,
-    _ref9$selectionMode = _ref9.selectionMode,
-    selectionMode = _ref9$selectionMode === void 0 ? null : _ref9$selectionMode,
-    selection = _ref9.selection,
-    onSelectionChange = _ref9.onSelectionChange,
-    _ref9$editable = _ref9.editable,
-    editable = _ref9$editable === void 0 ? false : _ref9$editable,
-    _ref9$rowEdit = _ref9.rowEdit,
-    rowEdit = _ref9$rowEdit === void 0 ? true : _ref9$rowEdit,
-    onChange = _ref9.onChange,
-    onCellChange = _ref9.onCellChange,
-    carto = _ref9.carto;
-  var _useState15 = useState(value),
+var SelfEditableCell = function SelfEditableCell(_ref9) {
+  var rowData = _ref9.rowData,
+    col = _ref9.col,
+    editable = _ref9.editable,
+    isRowEditing = _ref9.isRowEditing,
+    onSave = _ref9.onSave,
+    renderDisplay = _ref9.renderDisplay;
+  var _useState15 = useState(false),
     _useState16 = _slicedToArray$c(_useState15, 2),
-    data = _useState16[0],
-    setData = _useState16[1];
+    editing = _useState16[0],
+    setEditing = _useState16[1];
+  var _useState17 = useState(rowData[col.field]),
+    _useState18 = _slicedToArray$c(_useState17, 2),
+    localValue = _useState18[0],
+    setLocalValue = _useState18[1];
+  var containerRef = useRef(null);
+  var localValueRef = useRef(localValue);
+  useEffect(function () {
+    localValueRef.current = localValue;
+  }, [localValue]);
+  useEffect(function () {
+    if (isRowEditing && !editing) {
+      setLocalValue(rowData[col.field]);
+      setEditing(true);
+    } else if (!isRowEditing && editing) {
+      setEditing(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRowEditing]);
+  var commit = useCallback(function (val) {
+    onSave(val);
+    setLocalValue(val);
+    if (!isRowEditing) setEditing(false);
+  }, [isRowEditing, onSave]);
+  useEffect(function () {
+    if (!editing || isRowEditing) return;
+    var handler = function handler(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        if (e.target.closest('.p-dropdown-panel, .p-datepicker, .p-multiselect-panel')) return;
+        commit(localValueRef.current);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return function () {
+      return document.removeEventListener('mousedown', handler);
+    };
+  }, [editing, isRowEditing, commit]);
+  if (!editing) {
+    var _rowData$col$field;
+    return /*#__PURE__*/React__default.createElement("div", {
+      onClick: function onClick() {
+        return editable && setEditing(true);
+      },
+      style: {
+        cursor: editable ? 'pointer' : 'default',
+        minHeight: '1.5rem'
+      }
+    }, renderDisplay ? renderDisplay(rowData) : (_rowData$col$field = rowData[col.field]) !== null && _rowData$col$field !== void 0 ? _rowData$col$field : '');
+  }
+  switch (col.type) {
+    case 'select':
+      return /*#__PURE__*/React__default.createElement("div", {
+        ref: containerRef
+      }, /*#__PURE__*/React__default.createElement(Dropdown, _extends$I({}, DropdownPresets.Base, {
+        value: localValue,
+        options: col.options,
+        onChange: function onChange(e) {
+          return commit(e.value);
+        },
+        autoFocus: true
+      })));
+    case 'selectMultiple':
+      return /*#__PURE__*/React__default.createElement("div", {
+        ref: containerRef
+      }, /*#__PURE__*/React__default.createElement(MultiSelect, _extends$I({}, MultiSelectPresets.Base, {
+        value: localValue !== null && localValue !== void 0 ? localValue : [],
+        options: col.options,
+        onChange: function onChange(ids) {
+          return commit(ids);
+        }
+      })));
+    case 'date':
+      {
+        var dateObj = null;
+        var str = localValue ? String(localValue) : null;
+        if (str && str !== 'N/A') {
+          if (str.includes('/')) {
+            var _str$split = str.split('/'),
+              _str$split2 = _slicedToArray$c(_str$split, 3),
+              d = _str$split2[0],
+              m = _str$split2[1],
+              y = _str$split2[2];
+            dateObj = new Date(y, m - 1, d);
+          } else if (str.includes('-')) {
+            var _str$split3 = str.split('-'),
+              _str$split4 = _slicedToArray$c(_str$split3, 3),
+              _y = _str$split4[0],
+              _m = _str$split4[1],
+              _d = _str$split4[2];
+            dateObj = new Date(_y, _m - 1, _d);
+          }
+        }
+        if (!dateObj || isNaN(dateObj.getTime())) dateObj = new Date();
+        return /*#__PURE__*/React__default.createElement("div", {
+          ref: containerRef
+        }, /*#__PURE__*/React__default.createElement(DatePicker, {
+          value: dateObj,
+          onChange: function onChange(e) {
+            return commit(e.value ? [e.value.getFullYear(), String(e.value.getMonth() + 1).padStart(2, '0'), String(e.value.getDate()).padStart(2, '0')].join('-') : null);
+          }
+        }));
+      }
+    case 'numeric':
+      return /*#__PURE__*/React__default.createElement("div", {
+        ref: containerRef
+      }, /*#__PURE__*/React__default.createElement(InputText, {
+        type: "number",
+        value: localValue !== null && localValue !== void 0 ? localValue : '',
+        min: col.min,
+        max: col.max,
+        step: col.step,
+        onChange: function onChange(e) {
+          var v = e.target.value === '' ? '' : parseFloat(e.target.value);
+          if (col.min != null && v !== '' && v < col.min) v = col.min;
+          if (col.max != null && v !== '' && v > col.max) v = col.max;
+          setLocalValue(v);
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'Enter') {
+            e.stopPropagation();
+            commit(localValueRef.current);
+          }
+        },
+        autoFocus: true
+      }));
+    default:
+      return /*#__PURE__*/React__default.createElement("div", {
+        ref: containerRef
+      }, /*#__PURE__*/React__default.createElement(InputText, {
+        value: localValue !== null && localValue !== void 0 ? localValue : '',
+        onChange: function onChange(e) {
+          return setLocalValue(e.target.value);
+        },
+        onKeyDown: function onKeyDown(e) {
+          if (e.key === 'Enter') {
+            e.stopPropagation();
+            commit(localValueRef.current);
+          }
+        },
+        autoFocus: true
+      }));
+  }
+};
+var DocumentBodyCell = function DocumentBodyCell(_ref0) {
+  var _rowData$col$field2;
+  var rowData = _ref0.rowData,
+    col = _ref0.col,
+    editable = _ref0.editable,
+    isRowEditing = _ref0.isRowEditing,
+    onSave = _ref0.onSave;
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray$c(_useState19, 2),
+    editing = _useState20[0],
+    setEditing = _useState20[1];
+  var _useState21 = useState((_rowData$col$field2 = rowData[col.field]) !== null && _rowData$col$field2 !== void 0 ? _rowData$col$field2 : []),
+    _useState22 = _slicedToArray$c(_useState21, 2),
+    docs = _useState22[0],
+    setDocs = _useState22[1];
+  var containerRef = useRef(null);
+  useEffect(function () {
+    if (isRowEditing && !editing) {
+      var _rowData$col$field3;
+      setDocs((_rowData$col$field3 = rowData[col.field]) !== null && _rowData$col$field3 !== void 0 ? _rowData$col$field3 : []);
+      setEditing(true);
+    } else if (!isRowEditing && editing) {
+      setEditing(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRowEditing]);
+  useEffect(function () {
+    if (!editing || isRowEditing) return;
+    var handler = function handler(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setEditing(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return function () {
+      return document.removeEventListener('mousedown', handler);
+    };
+  }, [editing, isRowEditing]);
+  var handleCallback = useCallback(function (newDocs) {
+    setDocs(newDocs);
+    onSave(newDocs);
+  }, [onSave]);
+  if (editing) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      ref: containerRef
+    }, /*#__PURE__*/React__default.createElement(DocumentEditorCell, {
+      options: {
+        value: docs,
+        editorCallback: handleCallback
+      },
+      col: col
+    }));
+  }
+  if (!docs.length) {
+    return /*#__PURE__*/React__default.createElement("span", {
+      className: "doc-cell-empty",
+      onClick: function onClick() {
+        return editable && setEditing(true);
+      },
+      style: {
+        cursor: editable ? 'pointer' : 'default'
+      }
+    }, /*#__PURE__*/React__default.createElement("i", {
+      className: "pi pi-paperclip"
+    }), " \u2014");
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "doc-cell",
+    onClick: function onClick() {
+      return editable && setEditing(true);
+    },
+    style: {
+      cursor: editable ? 'pointer' : 'default'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "doc-cell-summary"
+  }, /*#__PURE__*/React__default.createElement("i", {
+    className: "pi pi-paperclip"
+  }), /*#__PURE__*/React__default.createElement("span", null, docs.length === 1 ? docs[0].name : "".concat(docs.length, " documents"))), docs.length > 1 && /*#__PURE__*/React__default.createElement("div", {
+    className: "doc-cell-list"
+  }, docs.map(function (doc, i) {
+    var _doc$id2;
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: (_doc$id2 = doc.id) !== null && _doc$id2 !== void 0 ? _doc$id2 : i
+    }, /*#__PURE__*/React__default.createElement("a", {
+      href: doc.url,
+      target: "_blank",
+      rel: "noreferrer"
+    }, doc.name));
+  })));
+};
+var Table = function Table(_ref1) {
+  var _ref1$value = _ref1.value,
+    value = _ref1$value === void 0 ? [] : _ref1$value,
+    _ref1$columns = _ref1.columns,
+    columns = _ref1$columns === void 0 ? [] : _ref1$columns,
+    _ref1$paginator = _ref1.paginator,
+    paginator = _ref1$paginator === void 0 ? true : _ref1$paginator,
+    _ref1$rows = _ref1.rows,
+    rows = _ref1$rows === void 0 ? 25 : _ref1$rows,
+    _ref1$loading = _ref1.loading,
+    loading = _ref1$loading === void 0 ? false : _ref1$loading,
+    _ref1$stripedRows = _ref1.stripedRows,
+    stripedRows = _ref1$stripedRows === void 0 ? false : _ref1$stripedRows,
+    _ref1$selectionMode = _ref1.selectionMode,
+    selectionMode = _ref1$selectionMode === void 0 ? null : _ref1$selectionMode,
+    selection = _ref1.selection,
+    onSelectionChange = _ref1.onSelectionChange,
+    _ref1$editable = _ref1.editable,
+    editable = _ref1$editable === void 0 ? false : _ref1$editable,
+    _ref1$rowEdit = _ref1.rowEdit,
+    rowEdit = _ref1$rowEdit === void 0 ? true : _ref1$rowEdit,
+    onChange = _ref1.onChange,
+    onCellChange = _ref1.onCellChange,
+    carto = _ref1.carto;
+  var _useState23 = useState(value),
+    _useState24 = _slicedToArray$c(_useState23, 2),
+    data = _useState24[0],
+    setData = _useState24[1];
   var updateRow = useCallback(function (rowId, field, newVal) {
     setData(function (prev) {
       var updated = prev.map(function (row) {
@@ -47682,41 +47942,53 @@ var Table = function Table(_ref9) {
       return updated;
     });
   }, [onChange]);
-  var _useState17 = useState({}),
-    _useState18 = _slicedToArray$c(_useState17, 2),
-    editingRows = _useState18[0],
-    setEditingRows = _useState18[1];
+  var _useState25 = useState({}),
+    _useState26 = _slicedToArray$c(_useState25, 2),
+    editingRows = _useState26[0],
+    setEditingRows = _useState26[1];
   var onRowEditChange = useCallback(function (e) {
     setEditingRows(e.data);
   }, []);
   var onRowEditComplete = useCallback(function (e) {
+    var _data$index;
     var newData = e.newData,
       index = e.index;
+    // All editable columns are self-managed (SelfEditableCell / DocumentBodyCell / DeviseBodyCell / TreeSelectBodyCell)
+    // and already applied their changes via updateRow — data[index] is the source of truth.
+    // Merge: keep self-managed field values from data, keep non-editable fields from newData.
+    var currentRow = (_data$index = data[index]) !== null && _data$index !== void 0 ? _data$index : newData;
+    var mergedData = _objectSpread2({}, newData);
+    columns.forEach(function (col) {
+      var colEditable = editable ? col.editable !== false : col.editable === true;
+      if (colEditable) {
+        mergedData[col.field] = currentRow[col.field];
+      }
+    });
     var updated = data.map(function (row, i) {
-      return i === index ? newData : row;
+      return i === index ? mergedData : row;
     });
     setData(updated);
     onChange === null || onChange === void 0 || onChange(updated);
     onCellChange === null || onCellChange === void 0 || onCellChange({
       rowData: data[index],
-      newRowData: newData
+      newRowData: mergedData
     });
-  }, [data, onChange, onCellChange]);
+  }, [data, onChange, onCellChange, columns, editable]);
   var STORAGE_KEY = useMemo(function () {
     return carto ? "Table:visibleColumns:".concat(carto) : "Table:visibleColumns";
   }, [carto]);
-  var _useState19 = useState(columns),
-    _useState20 = _slicedToArray$c(_useState19, 2),
-    visibleColumns = _useState20[0],
-    setVisibleColumns = _useState20[1];
-  var _useState21 = useState(false),
-    _useState22 = _slicedToArray$c(_useState21, 2),
-    showColumnPicker = _useState22[0],
-    setShowColumnPicker = _useState22[1];
-  var _useState23 = useState(''),
-    _useState24 = _slicedToArray$c(_useState23, 2),
-    globalFilter = _useState24[0],
-    setGlobalFilter = _useState24[1];
+  var _useState27 = useState(columns),
+    _useState28 = _slicedToArray$c(_useState27, 2),
+    visibleColumns = _useState28[0],
+    setVisibleColumns = _useState28[1];
+  var _useState29 = useState(false),
+    _useState30 = _slicedToArray$c(_useState29, 2),
+    showColumnPicker = _useState30[0],
+    setShowColumnPicker = _useState30[1];
+  var _useState31 = useState(''),
+    _useState32 = _slicedToArray$c(_useState31, 2),
+    globalFilter = _useState32[0],
+    setGlobalFilter = _useState32[1];
   useEffect(function () {
     var nextVisible = columns;
     var defaultVisible = columns.filter(function (c) {
@@ -47739,9 +48011,9 @@ var Table = function Table(_ref9) {
 
   var linkTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _ref0, _col$href;
+      var _ref10, _col$href;
       var label = rowData[col.field];
-      var href = typeof col.href === 'function' ? col.href(rowData) : (_ref0 = (_col$href = col.href) !== null && _col$href !== void 0 ? _col$href : rowData[col.field + 'Url']) !== null && _ref0 !== void 0 ? _ref0 : '#';
+      var href = typeof col.href === 'function' ? col.href(rowData) : (_ref10 = (_col$href = col.href) !== null && _col$href !== void 0 ? _col$href : rowData[col.field + 'Url']) !== null && _ref10 !== void 0 ? _ref10 : '#';
       return /*#__PURE__*/React__default.createElement("div", {
         className: "arengi-table-grey-title-box"
       }, /*#__PURE__*/React__default.createElement("a", {
@@ -47758,17 +48030,17 @@ var Table = function Table(_ref9) {
     var str = String(val);
     var y, m, d;
     if (str.includes('/')) {
-      var _str$split = str.split('/');
-      var _str$split2 = _slicedToArray$c(_str$split, 3);
-      d = _str$split2[0];
-      m = _str$split2[1];
-      y = _str$split2[2];
+      var _str$split5 = str.split('/');
+      var _str$split6 = _slicedToArray$c(_str$split5, 3);
+      d = _str$split6[0];
+      m = _str$split6[1];
+      y = _str$split6[2];
     } else {
-      var _str$split3 = str.split('-');
-      var _str$split4 = _slicedToArray$c(_str$split3, 3);
-      y = _str$split4[0];
-      m = _str$split4[1];
-      d = _str$split4[2];
+      var _str$split7 = str.split('-');
+      var _str$split8 = _slicedToArray$c(_str$split7, 3);
+      y = _str$split8[0];
+      m = _str$split8[1];
+      d = _str$split8[2];
     }
     var date = new Date(y, m - 1, d);
     if (isNaN(date.getTime())) return 'N/A';
@@ -47798,9 +48070,9 @@ var Table = function Table(_ref9) {
   }, []);
   var textTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _rowData$col$field;
+      var _rowData$col$field4;
       if (typeof col.textTemplate === 'function') return col.textTemplate(rowData);
-      return (_rowData$col$field = rowData[col.field]) !== null && _rowData$col$field !== void 0 ? _rowData$col$field : '';
+      return (_rowData$col$field4 = rowData[col.field]) !== null && _rowData$col$field4 !== void 0 ? _rowData$col$field4 : '';
     };
   }, []);
   var colorTextTemplate = useCallback(function (col) {
@@ -47859,8 +48131,8 @@ var Table = function Table(_ref9) {
   }, []);
   var documentTemplate = useCallback(function (col) {
     return function (rowData) {
-      var _rowData$col$field2;
-      var docs = (_rowData$col$field2 = rowData[col.field]) !== null && _rowData$col$field2 !== void 0 ? _rowData$col$field2 : [];
+      var _rowData$col$field5;
+      var docs = (_rowData$col$field5 = rowData[col.field]) !== null && _rowData$col$field5 !== void 0 ? _rowData$col$field5 : [];
       if (!docs.length) return /*#__PURE__*/React__default.createElement("span", {
         className: "doc-cell-empty"
       }, /*#__PURE__*/React__default.createElement("i", {
@@ -47875,9 +48147,9 @@ var Table = function Table(_ref9) {
       }), /*#__PURE__*/React__default.createElement("span", null, docs.length === 1 ? docs[0].name : "".concat(docs.length, " documents"))), docs.length > 1 && /*#__PURE__*/React__default.createElement("div", {
         className: "doc-cell-list"
       }, docs.map(function (doc, i) {
-        var _doc$id2;
+        var _doc$id3;
         return /*#__PURE__*/React__default.createElement("div", {
-          key: (_doc$id2 = doc.id) !== null && _doc$id2 !== void 0 ? _doc$id2 : i
+          key: (_doc$id3 = doc.id) !== null && _doc$id3 !== void 0 ? _doc$id3 : i
         }, /*#__PURE__*/React__default.createElement("a", {
           href: doc.url,
           target: "_blank",
@@ -47960,19 +48232,19 @@ var Table = function Table(_ref9) {
     var str = options.value ? String(options.value) : null;
     if (str && str !== 'N/A') {
       if (str.includes('/')) {
-        var _str$split5 = str.split('/'),
-          _str$split6 = _slicedToArray$c(_str$split5, 3),
-          d = _str$split6[0],
-          m = _str$split6[1],
-          y = _str$split6[2];
+        var _str$split9 = str.split('/'),
+          _str$split0 = _slicedToArray$c(_str$split9, 3),
+          d = _str$split0[0],
+          m = _str$split0[1],
+          y = _str$split0[2];
         dateObj = new Date(y, m - 1, d);
       } else if (str.includes('-')) {
-        var _str$split7 = str.split('-'),
-          _str$split8 = _slicedToArray$c(_str$split7, 3),
-          _y = _str$split8[0],
-          _m = _str$split8[1],
-          _d = _str$split8[2];
-        dateObj = new Date(_y, _m - 1, _d);
+        var _str$split1 = str.split('-'),
+          _str$split10 = _slicedToArray$c(_str$split1, 3),
+          _y2 = _str$split10[0],
+          _m2 = _str$split10[1],
+          _d2 = _str$split10[2];
+        dateObj = new Date(_y2, _m2 - 1, _d2);
       }
     }
     if (!dateObj || isNaN(dateObj.getTime())) dateObj = new Date();
@@ -48044,6 +48316,13 @@ var Table = function Table(_ref9) {
   var getEditorTemplate = useCallback(function (col) {
     var colEditable = editable ? col.editable !== false : col.editable === true;
     if (!colEditable) return undefined;
+    // In rowEdit mode, all columns except devise/treeSelect use SelfEditableCell or DocumentBodyCell
+    // which manage their own editing state — no PrimeReact editor needed.
+    if (rowEdit) {
+      if (col.type === 'devise') return deviseEditor(col);
+      if (col.type === 'treeSelect') return treeSelectEditor(col);
+      return undefined;
+    }
     switch (col.type) {
       case 'date':
         return dateEditor;
@@ -48064,7 +48343,7 @@ var Table = function Table(_ref9) {
       default:
         return textEditor;
     }
-  }, [editable, textEditor, dateEditor, selectEditor, selectMultipleEditor, numericEditor, documentEditor, deviseEditor, treeSelectEditor]);
+  }, [editable, rowEdit, textEditor, dateEditor, selectEditor, selectMultipleEditor, numericEditor, documentEditor, deviseEditor, treeSelectEditor]);
   var onCellEditComplete = useCallback(function (e) {
     if (rowEdit) return;
     var rowData = e.rowData,
@@ -48089,34 +48368,88 @@ var Table = function Table(_ref9) {
 
   /** Get the body renderer for a column based on its type */
   var getBodyTemplate = useCallback(function (col) {
+    var colEditable = editable ? col.editable !== false : col.editable === true;
+
+    // These types always manage their own editing state regardless of mode
+    if (col.type === 'devise') return deviseTemplate(col);
+    if (col.type === 'treeSelect') return treeSelectTemplate(col);
+    if (col.type === 'picto') return pictoTemplate(col);
+    if (col.type === 'calcul') return calculTemplate(col);
+
+    // Documents: self-managed click-to-edit in rowEdit mode
+    if (col.type === 'documents') {
+      if (rowEdit && colEditable) {
+        return function (rowData) {
+          return /*#__PURE__*/React__default.createElement(DocumentBodyCell, {
+            rowData: rowData,
+            col: col,
+            editable: colEditable,
+            isRowEditing: !!editingRows[rowData.id],
+            onSave: function onSave(v) {
+              updateRow(rowData.id, col.field, v);
+              onCellChange === null || onCellChange === void 0 || onCellChange({
+                rowData: rowData,
+                field: col.field,
+                newValue: v
+              });
+            }
+          });
+        };
+      }
+      return documentTemplate(col);
+    }
+
+    // Pure display renderer
+    var displayFn;
     switch (col.type) {
       case 'link':
-        return linkTemplate(col);
+        displayFn = linkTemplate(col);
+        break;
       case 'date':
-        return dateTemplate;
+        displayFn = function displayFn(rd) {
+          return dateTemplate(rd, {
+            field: col.field
+          });
+        };
+        break;
       case 'select':
-        return selectTemplate(col);
+        displayFn = selectTemplate(col);
+        break;
       case 'selectMultiple':
-        return selectMultipleTemplate(col);
+        displayFn = selectMultipleTemplate(col);
+        break;
       case 'colorText':
-        return colorTextTemplate(col);
-      case 'picto':
-        return pictoTemplate(col);
+        displayFn = colorTextTemplate(col);
+        break;
       case 'numeric':
-        return numericTemplate(col);
-      case 'calcul':
-        return calculTemplate(col);
-      case 'documents':
-        return documentTemplate(col);
-      case 'devise':
-        return deviseTemplate(col);
-      case 'treeSelect':
-        return treeSelectTemplate(col);
+        displayFn = numericTemplate(col);
+        break;
       case 'text':
       default:
-        return col.textTemplate ? textTemplate(col) : undefined;
+        displayFn = col.textTemplate ? textTemplate(col) : undefined;
+        break;
+    }
+
+    // In rowEdit mode, wrap editable columns with SelfEditableCell for click-to-edit
+    if (rowEdit && colEditable) {
+      return function (rowData) {
+        return /*#__PURE__*/React__default.createElement(SelfEditableCell, {
+          rowData: rowData,
+          col: col,
+          editable: colEditable,
+          isRowEditing: !!editingRows[rowData.id],
+          onSave: function onSave(v) {
+            return updateRow(rowData.id, col.field, v);
+          },
+          renderDisplay: displayFn !== null && displayFn !== void 0 ? displayFn : function (rd) {
+            var _rd$col$field;
+            return (_rd$col$field = rd[col.field]) !== null && _rd$col$field !== void 0 ? _rd$col$field : '';
+          }
+        });
+      };
     }
-  }, [linkTemplate, dateTemplate, selectTemplate, selectMultipleTemplate, colorTextTemplate, pictoTemplate, textTemplate, numericTemplate, calculTemplate, documentTemplate, deviseTemplate, treeSelectTemplate]);
+    return displayFn;
+  }, [rowEdit, editable, editingRows, updateRow, onCellChange, linkTemplate, dateTemplate, selectTemplate, selectMultipleTemplate, colorTextTemplate, pictoTemplate, textTemplate, numericTemplate, calculTemplate, documentTemplate, deviseTemplate, treeSelectTemplate]);
   var getSortField = useCallback(function (col) {
     return col.field;
   }, []);

package/package.json

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