trotl-table 1.0.92 → 1.0.95

package/README.md

@@ -138,8 +138,10 @@ export default function Demo() {
 - `downloadCallback`: callback invoked when the user clicks the **download** action (row passed as argument)
 - Note: earlier versions required the delete button for multi‑select; now `enableMultiSelect` works even when `buttons` is empty
 - `buttons`: array of action buttons to show (supports `"view"`, `"edit"`, `"delete"`, `"share"`, `"duplicate"` and `"download"`)
-- `onCellChange`: callback invoked when a cell value changes (signature: `(row, accessor, newValue)`).
-  - Supported editable column `type` values: `checkbox`, `switch` (renders a `Switch` component), `input` (renders a text input).
+- `onCellChange`: callback invoked when a cell value changes (signature: `(row, accessor, newValue, column)`). The fourth argument is the column definition, including optional `collConnect` metadata.
+  - Supported editable column `type` values: `checkbox`, `switch` (renders a `Switch` component), `input` (renders a text input), and `date`.
+  - Date columns may use a scalar type (`type: "date"`) or an array with a display format (`type: ["date", "DD-MM-YYYY HH:mm"]`). Date-time formats render a date-time picker; values emitted by the input remain ISO-compatible.
+  - `collConnect` is metadata exposed through the fourth callback argument so applications can persist related field updates when a cell changes.
 
 ## 🌟 Context Hooks
 

package/dist/Table.cjs.js

@@ -9546,6 +9546,55 @@ _defineProperty(WindowScroller, "defaultProps", {
 });
 
 const ITEM_TYPE = "ROW";
+const getColumnType = column => Array.isArray(column?.type) ? column.type[0] : column?.type;
+const getColumnDateFormat = column => {
+  if (Array.isArray(column?.type)) return column.type[1] || null;
+  return column?.dateFormat || null;
+};
+const parseDateValue = value => {
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+  if (value == null || value === "") return null;
+  const text = String(value).trim();
+  const isoMatch = text.match(/^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/);
+  if (isoMatch) {
+    const [, year, month, day, hour = "0", minute = "0", second = "0"] = isoMatch;
+    const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute), Number(second));
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  const dmyMatch = text.match(/^(\d{2})-(\d{2})-(\d{4})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/);
+  if (dmyMatch) {
+    const [, day, month, year, hour = "0", minute = "0", second = "0"] = dmyMatch;
+    const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute), Number(second));
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+const formatDateValue = (value, format) => {
+  const date = parseDateValue(value);
+  if (!date) return "";
+  if (!format) return date.toLocaleString("sl-SI", {
+    hour12: false
+  });
+  const parts = {
+    YYYY: String(date.getFullYear()),
+    MM: String(date.getMonth() + 1).padStart(2, "0"),
+    DD: String(date.getDate()).padStart(2, "0"),
+    HH: String(date.getHours()).padStart(2, "0"),
+    mm: String(date.getMinutes()).padStart(2, "0"),
+    ss: String(date.getSeconds()).padStart(2, "0")
+  };
+  return String(format).replace(/YYYY|MM|DD|HH|mm|ss/g, token => parts[token]);
+};
+const toDateInputValue = (value, includeTime) => {
+  const date = parseDateValue(value);
+  if (!date) return "";
+  const datePart = [date.getFullYear(), String(date.getMonth() + 1).padStart(2, "0"), String(date.getDate()).padStart(2, "0")].join("-");
+  if (!includeTime) return datePart;
+  return `${datePart}T${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
+};
 
 // Normalize data into grouped format
 const normalizeData = (groups, rows) => {
@@ -10579,7 +10628,7 @@ function TableInner({
     const accessor = col?.accessor ?? null;
     const resolvedAccessor = getAccessorKey(row, accessor);
     const value = explicitValue !== undefined ? explicitValue : getAccessorValue(row, accessor);
-    const type = col?.type ?? (col?.isCustom ? "custom" : "text");
+    const type = getColumnType(col) ?? (col?.isCustom ? "custom" : "text");
     try {
       const callback = cellCallbackRef.current;
       if (typeof callback !== "function") return;
@@ -10601,9 +10650,10 @@ function TableInner({
   const renderCell = React.useCallback((v, accessor, row, col) => {
     const isUndefinedLike = v === undefined || typeof v === "string" && v.trim().toLowerCase() === "undefined";
     const isNoData = isUndefinedLike;
+    const columnType = getColumnType(col);
 
     // Custom column type (editable in-table)
-    if (col && col.type === "custom") {
+    if (columnType === "custom") {
       const CustomComp = col["modal-comp"];
       if (CustomComp) {
         return /*#__PURE__*/React.createElement(CustomComp, {
@@ -10613,7 +10663,7 @@ function TableInner({
     }
 
     // Checkbox column type (editable in-table)
-    if (col && col.type === "checkbox") {
+    if (columnType === "checkbox") {
       const checked = isUndefinedLike ? false : !!v;
       return /*#__PURE__*/React.createElement("input", {
         type: "checkbox",
@@ -10645,7 +10695,7 @@ function TableInner({
     }
 
     // Switch column type (uses internal Switch component)
-    if (col && col.type === "switch") {
+    if (columnType === "switch") {
       const checked = isUndefinedLike ? false : !!v;
       return /*#__PURE__*/React.createElement("div", {
         title: isNoData ? translate("noData") : undefined,
@@ -10677,7 +10727,7 @@ function TableInner({
     }
 
     // Color column type (display color swatch background)
-    if (col && col.type === "color") {
+    if (columnType === "color") {
       const colorVal = isUndefinedLike ? "transparent" : v || "transparent";
       const text = isUndefinedLike ? "..." : String(colorVal) ;
       return /*#__PURE__*/React.createElement("div", {
@@ -10701,7 +10751,7 @@ function TableInner({
     }
 
     // Input column type (editable text)
-    if (col && col.type === "input") {
+    if (columnType === "input") {
       const text = isNoData ? "" : v == null ? "" : String(v);
       return /*#__PURE__*/React.createElement("input", {
         type: "text",
@@ -10738,15 +10788,19 @@ function TableInner({
       });
     }
 
-    // Date column type (editable date picker)
-    if (col && col.type === "date") {
-      const dateValue = isNoData ? "" : v == null ? "" : v instanceof Date ? v.toISOString().slice(0, 10) : String(v).slice(0, 10);
+    // Date column type (editable date/date-time picker)
+    if (columnType === "date") {
+      const dateFormat = getColumnDateFormat(col);
+      const includeTime = typeof dateFormat === "string" && /H|h|m|s/.test(dateFormat);
+      const inputType = includeTime ? "datetime-local" : "date";
+      const dateValue = isNoData ? "" : toDateInputValue(v, includeTime);
+      const displayDateValue = dateFormat ? formatDateValue(v, dateFormat) : dateValue;
       return /*#__PURE__*/React.createElement("input", {
-        type: "date",
+        type: inputType,
         className: "table-cell-input",
         value: dateValue,
         placeholder: isNoData ? "..." : undefined,
-        title: isNoData ? translate("noData") : dateValue,
+        title: isNoData ? translate("noData") : displayDateValue,
         onClick: e => {
           e.stopPropagation();
           triggerCellCallback(row, col, dateValue);
@@ -10869,8 +10923,9 @@ function TableInner({
         }
       }, v ? "✓" : "✗");
     }
-    // existing highlight logic for other fields
-    return highlight(String(v));
+    // Translate only the displayed value; keep the raw value for data operations.
+    const displayValue = col?.translate ? translate(String(v)) : v;
+    return highlight(String(displayValue ?? v));
   }, [highlight, isGrouped, triggerCellCallback, translate, formatArrayValue]);
   const showView = buttons.includes("view");
   const showEdit = buttons.includes("edit");