@multiplatform.one/table 7.10.0 → 7.15.0

package/dist/cjs/components/TableInput/RowDetailEditor.cjs

@@ -0,0 +1,190 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var RowDetailEditor_exports = {};
+__export(RowDetailEditor_exports, {
+  RowDetailEditor: () => RowDetailEditor
+});
+module.exports = __toCommonJS(RowDetailEditor_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_table_primitives = require("@multiplatform.one/table-primitives");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_t = require("../../shared/t.cjs");
+var import_withInterp = require("../../utils/withInterp.cjs");
+var import_DataTableCell = require("../DataTableCell/index.cjs");
+var import_shared = require("./shared.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function RowDetailEditor({
+  row,
+  rowIndex,
+  columns,
+  readOnly,
+  compact,
+  isCellHidden,
+  onCommit
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  const [draft, setDraft] = (0, import_react2.useState)(null);
+  const draftRef = (0, import_react2.useRef)(draft);
+  draftRef.current = draft;
+  const rowRef = (0, import_react2.useRef)(row);
+  rowRef.current = row;
+  const onCommitRef = (0, import_react2.useRef)(onCommit);
+  onCommitRef.current = onCommit;
+  const discardRef = (0, import_react2.useRef)(false);
+  const rowNumber = rowIndex + 1;
+  const handleOpenChange = (0, import_react2.useCallback)(next => {
+    if (next) {
+      discardRef.current = false;
+      const seeded = {
+        ...rowRef.current
+      };
+      draftRef.current = seeded;
+      setDraft(seeded);
+      return;
+    }
+    const active = draftRef.current;
+    if (!discardRef.current && !readOnly && active) {
+      const changed = (0, import_shared.changedColumns)(rowRef.current, active, columns);
+      if (changed.length > 0) onCommitRef.current(active, changed);
+    }
+    discardRef.current = false;
+    draftRef.current = null;
+    setDraft(null);
+  }, [columns, readOnly]);
+  const handleCancel = (0, import_react2.useCallback)(() => {
+    discardRef.current = true;
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+  const setDraftValue = (0, import_react2.useCallback)((columnId, value) => {
+    const current2 = draftRef.current;
+    if (!current2) return;
+    const next = {
+      ...current2,
+      [columnId]: value
+    };
+    draftRef.current = next;
+    setDraft(next);
+  }, []);
+  const triggerLabel = (0, import_withInterp.withInterp)((0, import_t.t)(readOnly ? "View row {{row}}" : "Edit row {{row}}", {
+    row: rowNumber
+  }), {
+    row: rowNumber
+  });
+  const current = draft ?? row;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+      chromeless: true,
+      compact,
+      onPress: () => handleOpenChange(true),
+      hitSlop: knobProps.nestedControl.hitSlop,
+      "aria-label": triggerLabel,
+      "aria-haspopup": "dialog",
+      "aria-expanded": draft !== null,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PencilSimpleIcon, {
+        size: 16
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog, {
+      open: draft !== null,
+      onOpenChange: handleOpenChange,
+      modal: true,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DialogOverlay, {
+          opacity: 0.5
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DialogContent, {
+          maxWidth: 720,
+          maxHeight: "80vh",
+          width: "90vw",
+          onEscapeKeyDown: () => {
+            discardRef.current = true;
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
+            ...knobProps.heading,
+            children: (0, import_withInterp.withInterp)((0, import_t.t)("Row {{row}}", {
+              row: rowNumber
+            }), {
+              row: rowNumber
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+            flexShrink: 1,
+            minHeight: 0,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.TableCellContext.Provider, {
+              value: {
+                inTableCell: false
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+                ...knobProps.gapLg,
+                children: columns.map(col => {
+                  const columnId = (0, import_shared.columnKey)(col);
+                  if (isCellHidden?.(current, columnId, rowIndex)) return null;
+                  const label = typeof col.header === "string" ? col.header : columnId;
+                  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+                    ...knobProps.gap,
+                    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                      ...knobProps.label,
+                      children: label
+                    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCell.DataTableCell, {
+                      value: current[columnId],
+                      onChange: value => setDraftValue(columnId, value),
+                      field: col.field || "input",
+                      fieldProps: col.fieldProps,
+                      readOnly,
+                      compact: false,
+                      columnId,
+                      columnLabel: label,
+                      rowIndex,
+                      rowData: current
+                    })]
+                  }, columnId);
+                })
+              })
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            ...knobProps.gap,
+            justifyContent: "flex-end",
+            children: readOnly ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              onPress: handleCancel,
+              children: (0, import_t.t)("Close")
+            }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                onPress: handleCancel,
+                children: (0, import_t.t)("Cancel")
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+                theme: "accent",
+                onPress: () => handleOpenChange(false),
+                children: (0, import_t.t)("Done")
+              })]
+            })
+          })]
+        })]
+      })
+    })]
+  });
+}

package/dist/cjs/components/TableInput/RowDetailEditor.native.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var RowDetailEditor_native_exports = {};
+__export(RowDetailEditor_native_exports, {
+  RowDetailEditor: () => RowDetailEditor
+});
+module.exports = __toCommonJS(RowDetailEditor_native_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_forms = require("@multiplatform.one/forms");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_tamagui = require("tamagui");
+var import_t = require("../../shared/t.native.js");
+var import_withInterp = require("../../utils/withInterp.native.js");
+var import_DataTableCell = require("../DataTableCell/index.native.js");
+var import_shared = require("./shared.native.js");
+function RowDetailEditor(param) {
+  var {
+    row,
+    rowIndex,
+    columns,
+    readOnly,
+    compact,
+    isCellHidden,
+    onCommit
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  var [draft, setDraft] = (0, import_react2.useState)(null);
+  var draftRef = (0, import_react2.useRef)(draft);
+  draftRef.current = draft;
+  var rowRef = (0, import_react2.useRef)(row);
+  rowRef.current = row;
+  var onCommitRef = (0, import_react2.useRef)(onCommit);
+  onCommitRef.current = onCommit;
+  var discardRef = (0, import_react2.useRef)(false);
+  var rowNumber = rowIndex + 1;
+  var handleOpenChange = (0, import_react2.useCallback)(function (next) {
+    if (next) {
+      discardRef.current = false;
+      var seeded = {
+        ...rowRef.current
+      };
+      draftRef.current = seeded;
+      setDraft(seeded);
+      return;
+    }
+    var active = draftRef.current;
+    if (!discardRef.current && !readOnly && active) {
+      var changed = (0, import_shared.changedColumns)(rowRef.current, active, columns);
+      if (changed.length > 0) onCommitRef.current(active, changed);
+    }
+    discardRef.current = false;
+    draftRef.current = null;
+    setDraft(null);
+  }, [columns, readOnly]);
+  var handleCancel = (0, import_react2.useCallback)(function () {
+    discardRef.current = true;
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+  var setDraftValue = (0, import_react2.useCallback)(function (columnId, value) {
+    var current2 = draftRef.current;
+    if (!current2) return;
+    var next = {
+      ...current2,
+      [columnId]: value
+    };
+    draftRef.current = next;
+    setDraft(next);
+  }, []);
+  var triggerLabel = (0, import_withInterp.withInterp)((0, import_t.t)(readOnly ? "View row {{row}}" : "Edit row {{row}}", {
+    row: rowNumber
+  }), {
+    row: rowNumber
+  });
+  var current = draft !== null && draft !== void 0 ? draft : row;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.FloatingPanel, {
+    open: draft !== null,
+    onOpenChange: handleOpenChange,
+    scrollable: true,
+    triggerSizing: "content",
+    triggerA11y: {
+      label: triggerLabel
+    },
+    trigger: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      alignItems: "center",
+      justifyContent: "center",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PencilSimpleIcon, {
+        size: 16
+      })
+    }),
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      ...knobProps.gapLg,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        ...knobProps.heading,
+        children: (0, import_withInterp.withInterp)((0, import_t.t)("Row {{row}}", {
+          row: rowNumber
+        }), {
+          row: rowNumber
+        })
+      }), columns.map(function (col) {
+        var columnId = (0, import_shared.columnKey)(col);
+        if (isCellHidden === null || isCellHidden === void 0 ? void 0 : isCellHidden(current, columnId, rowIndex)) return null;
+        var label = typeof col.header === "string" ? col.header : columnId;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            children: label
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_DataTableCell.DataTableCell, {
+            value: current[columnId],
+            onChange: function onChange(value) {
+              return setDraftValue(columnId, value);
+            },
+            field: col.field || "input",
+            fieldProps: col.fieldProps,
+            readOnly,
+            compact: false,
+            columnId,
+            columnLabel: label,
+            rowIndex,
+            rowData: current
+          })]
+        }, columnId);
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        ...knobProps.gap,
+        justifyContent: "flex-end",
+        children: readOnly ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          onPress: handleCancel,
+          children: (0, import_t.t)("Close")
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            onPress: handleCancel,
+            children: (0, import_t.t)("Cancel")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            onPress: function onPress() {
+              return handleOpenChange(false);
+            },
+            children: (0, import_t.t)("Done")
+          })]
+        })
+      })]
+    })
+  });
+}
+//# sourceMappingURL=RowDetailEditor.native.js.map

package/dist/cjs/components/TableInput/RowDetailEditor.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["RowDetailEditor_native_exports","__export","RowDetailEditor","module","exports","__toCommonJS","import_jsx_runtime","require","import_forms","import_theme","import_react","import_react2","import_tamagui","import_t","import_withInterp","import_DataTableCell","import_shared","param","row","rowIndex","columns","readOnly","compact","isCellHidden","onCommit","knobProps","useResolvedKnobs","draft","setDraft","useState","draftRef","useRef","current","rowRef","onCommitRef","discardRef","rowNumber","handleOpenChange","useCallback","next","seeded","active","changed","changedColumns","length","handleCancel","setDraftValue","columnId","value","current2","triggerLabel","withInterp","t","jsx","FloatingPanel","open","onOpenChange","scrollable","triggerSizing","triggerA11y","label","trigger","View","alignItems","justifyContent","children","PencilSimpleIcon","size","jsxs","YStack","gapLg","Text","heading","map","col","columnKey","header","gap","DataTableCell","onChange","field","fieldProps","columnLabel","rowData","XStack","Button","onPress","Fragment"],"sources":["../../../../src/components/TableInput/RowDetailEditor.native.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/TableInput/index.cjs

@@ -36,8 +36,10 @@ var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_DataTableCell = require("../DataTableCell/index.cjs");
 var import_withInterp = require("../../utils/withInterp.cjs");
+var import_RowDetailEditor = require("./RowDetailEditor.cjs");
 var import_shared = require("./shared.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const chromeColumnIds = /* @__PURE__ */new Set(["_reorder", "_rowNumber", "_detail", "_actions"]);
 function TableInput({
   data = [],
   columns,
@@ -59,7 +61,10 @@ function TableInput({
   emptyMessage,
   "aria-label": ariaLabel,
   compact = true,
-  enableReorder = false
+  enableReorder = false,
+  rowDetail = false,
+  detailColumns,
+  isCellHidden
 }) {
   const {
     t
@@ -90,6 +95,9 @@ function TableInput({
     ariaLabel: resolvedAriaLabel,
     compact,
     enableReorder,
+    rowDetail,
+    detailColumns: detailColumns ?? columns,
+    isCellHidden,
     t
   };
   const Inner = TableInputInner;
@@ -138,6 +146,9 @@ function TableInputInner({
   ariaLabel,
   compact,
   enableReorder,
+  rowDetail,
+  detailColumns,
+  isCellHidden,
   t
 }) {
   const theme = (0, import_tamagui.useTheme)();
@@ -152,6 +163,7 @@ function TableInputInner({
   const pendingFocusRef = (0, import_react.useRef)(null);
   const gridRef = (0, import_react.useRef)(null);
   const reorderEnabled = enableReorder && !readOnly && !skeleton;
+  const Detail = import_RowDetailEditor.RowDetailEditor;
   const firstDataKey = (0, import_react.useMemo)(() => {
     const first = columns[0];
     if (!first) return null;
@@ -212,6 +224,12 @@ function TableInputInner({
     if (minRows && rows.length <= minRows) return;
     commit(rows.filter((_, index) => index !== rowIndex));
   }, [rows, commit, minRows]);
+  const handleRowDetailCommit = (0, import_react.useCallback)((rowIndex, next, changed) => {
+    for (const columnId of changed) {
+      onCellChange?.(rowIndex, columnId, next[columnId]);
+    }
+    commit(rows.map((row, index) => index === rowIndex ? next : row));
+  }, [rows, commit, onCellChange]);
   (0, import_react.useEffect)(() => {
     const id = pendingFocusRef.current;
     if (!id || typeof document === "undefined") return;
@@ -292,6 +310,7 @@ function TableInputInner({
         cell: ({
           row
         }) => {
+          if (isCellHidden?.(row.original, columnId, row.index)) return null;
           const value = row.original[columnId];
           const field = col.field || "input";
           const fieldProps = col.fieldProps;
@@ -310,6 +329,24 @@ function TableInputInner({
         }
       });
     });
+    if (rowDetail) {
+      cols.push({
+        id: "_detail",
+        header: "",
+        size: chromePx + 16,
+        cell: ({
+          row
+        }) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(Detail, {
+          row: row.original,
+          rowIndex: row.index,
+          columns: detailColumns,
+          readOnly,
+          compact,
+          isCellHidden,
+          onCommit: (next, changed) => handleRowDetailCommit(row.index, next, changed)
+        })
+      });
+    }
     if (showDeleteRow && !readOnly) {
       cols.push({
         id: "_actions",
@@ -339,7 +376,7 @@ function TableInputInner({
       });
     }
     return cols;
-  }, [columns, showRowNumbers, showDeleteRow, readOnly, handleCellChange, handleDeleteRow, rows.length, minRows, t, compact, chromePx, knobProps.label.fontSize, knobProps.nestedControl.hitSlop, reorderEnabled]);
+  }, [columns, showRowNumbers, showDeleteRow, readOnly, handleCellChange, handleDeleteRow, rows.length, minRows, t, compact, chromePx, knobProps.label.fontSize, knobProps.nestedControl.hitSlop, reorderEnabled, rowDetail, detailColumns, isCellHidden, handleRowDetailCommit]);
   const table = (0, import_react_table.useReactTable)({
     data: rows,
     columns: tableColumns,
@@ -397,7 +434,7 @@ function TableInputInner({
             children: headerGroup.headers.map(header => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.HeaderCell, {
               style: {
                 width: header.getSize(),
-                ...(isEmpty && header.column.id !== "_rowNumber" && header.column.id !== "_actions" && header.column.id !== "_reorder" ? {
+                ...(isEmpty && !chromeColumnIds.has(header.column.id) ? {
                   flexGrow: 1
                 } : null)
               },
@@ -409,7 +446,7 @@ function TableInputInner({
             length: import_shared.SKELETON_ROW_COUNT
           }, (_, rowIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Row, {
             children: table.getAllLeafColumns().map(column => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table_primitives.Table.Cell, {
-              children: column.id === "_actions" || column.id === "_reorder" ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Skeleton, {
+              children: column.id === "_actions" || column.id === "_reorder" || column.id === "_detail" ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Skeleton, {
                 variant: "rounded",
                 width: column.id === "_rowNumber" ? 16 : "70%",
                 height: 16
@@ -448,7 +485,7 @@ function TableInputInner({
                 onFocusCapture: () => setActiveRowId(row.id)
               },
               children: row.getVisibleCells().map(cell => {
-                const isData = cell.column.id !== "_rowNumber" && cell.column.id !== "_actions" && cell.column.id !== "_reorder";
+                const isData = !chromeColumnIds.has(cell.column.id);
                 const field = columns.find(col => {
                   const id = typeof col.accessorKey === "string" ? col.accessorKey : col.id || String(col.accessorKey);
                   return id === cell.column.id;

package/dist/cjs/components/TableInput/index.native.js

@@ -38,6 +38,7 @@ var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_DataTableCell = require("../DataTableCell/index.native.js");
 var import_withInterp = require("../../utils/withInterp.native.js");
+var import_RowDetailEditor = require("./RowDetailEditor.native.js");
 var import_shared = require("./shared.native.js");
 function TableInput(param) {
   var {
@@ -60,7 +61,10 @@ function TableInput(param) {
     defaultRow,
     emptyMessage,
     "aria-label": ariaLabel,
-    compact = true
+    compact = true,
+    rowDetail = false,
+    detailColumns,
+    isCellHidden
   } = param;
   var {
     t
@@ -90,6 +94,9 @@ function TableInput(param) {
     emptyMessage: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : t("No rows"),
     ariaLabel: resolvedAriaLabel,
     compact,
+    rowDetail,
+    detailColumns: detailColumns !== null && detailColumns !== void 0 ? detailColumns : columns,
+    isCellHidden,
     t
   };
   var Inner = TableInputInner;
@@ -144,6 +151,9 @@ function TableInputInner(param) {
     emptyMessage,
     ariaLabel,
     compact,
+    rowDetail,
+    detailColumns,
+    isCellHidden,
     t
   } = param;
   var theme = (0, import_tamagui.useTheme)();
@@ -157,6 +167,7 @@ function TableInputInner(param) {
   var indexWidth = Math.max(36, chromePx);
   var actionWidth = chromePx + 16;
   var [activeRowId, setActiveRowId] = (0, import_react.useState)(null);
+  var Detail = import_RowDetailEditor.RowDetailEditor;
   var handleCellChange = (0, import_react.useCallback)(function (rowIndex, columnId, value) {
     onCellChange === null || onCellChange === void 0 ? void 0 : onCellChange(rowIndex, columnId, value);
     var newData = [...rows];
@@ -180,6 +191,33 @@ function TableInputInner(param) {
       return index !== rowIndex;
     }));
   }, [rows, commit, minRows]);
+  var handleRowDetailCommit = (0, import_react.useCallback)(function (rowIndex, next, changed) {
+    var _iteratorNormalCompletion = true,
+      _didIteratorError = false,
+      _iteratorError = void 0;
+    try {
+      for (var _iterator = changed[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var columnId = _step.value;
+        onCellChange === null || onCellChange === void 0 ? void 0 : onCellChange(rowIndex, columnId, next[columnId]);
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+    commit(rows.map(function (row, index) {
+      return index === rowIndex ? next : row;
+    }));
+  }, [rows, commit, onCellChange]);
   var canAddRow = !maxRows || rows.length < maxRows;
   var canDelete = !minRows || rows.length > (minRows || 0);
   var columnIds = (0, import_react.useMemo)(function () {
@@ -212,6 +250,8 @@ function TableInputInner(param) {
             children: typeof col.header === "string" ? col.header : columnIds[index]
           })
         }, columnIds[index]);
+      }), rowDetail && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        width: actionWidth
       }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         width: actionWidth
       })]
@@ -247,6 +287,12 @@ function TableInputInner(param) {
         var value = item[columnId];
         var field = col.field || "input";
         var fieldProps = col.fieldProps;
+        if (isCellHidden === null || isCellHidden === void 0 ? void 0 : isCellHidden(item, columnId, index)) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            flex: 1,
+            paddingHorizontal: "$1"
+          }, columnId);
+        }
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flex: 1,
           paddingHorizontal: "$1",
@@ -265,6 +311,21 @@ function TableInputInner(param) {
             rowData: item
           })
         }, columnId);
+      }), rowDetail && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        width: actionWidth,
+        justifyContent: "center",
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Detail, {
+          row: item,
+          rowIndex: index,
+          columns: detailColumns,
+          readOnly,
+          compact,
+          isCellHidden,
+          onCommit: function onCommit(next, changed) {
+            return handleRowDetailCommit(index, next, changed);
+          }
+        })
       }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         width: actionWidth,
         justifyContent: "center",
@@ -317,6 +378,8 @@ function TableInputInner(param) {
                 height: 16
               })
             }, columnIds[colIndex]);
+          }), rowDetail && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            width: actionWidth
           }), showDeleteRow && !readOnly && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
             width: actionWidth
           })]