@bmsuisse/datagrid 0.25.3 → 0.27.0

package/dist/index.js

@@ -1235,6 +1235,10 @@ function isSortable(column) {
 function isFilterable(column) {
   return column.filterable === true;
 }
+function isEditable(column, row) {
+  if (!column.editable) return false;
+  return typeof column.editable === "function" ? column.editable(row) : true;
+}
 
 // src/filter/facetedValues.ts
 function withoutColumn(filter, columnId) {
@@ -1365,18 +1369,458 @@ function renderDefaultFilterWidget(column, value, onChange) {
   }
 }
 
+// src/edit/widget-types.ts
+function editErrorId(rowId, columnId) {
+  return `edit-error-${rowId}-${columnId}`;
+}
+
+// src/edit/EditFieldError.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function EditFieldError({ id, message }) {
+  return /* @__PURE__ */ jsx15("span", { id, className: "mt-0.5 block text-xs text-destructive", children: message });
+}
+
+// src/edit/BooleanEditor.tsx
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+function toBoolean(value) {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "string") return value.trim().toLowerCase() === "true";
+  if (typeof value === "number") return value !== 0;
+  return false;
+}
+function BooleanEditor({
+  column,
+  rowId,
+  value,
+  onChange,
+  error,
+  autoFocus
+}) {
+  const errorId = editErrorId(rowId, column.id);
+  return (
+    // No `gap-*` here (unlike a plain flex stack) — `EditFieldError`'s own
+    // `mt-0.5` already provides the same spacing every other editor gets;
+    // adding both would double it for this one editor only.
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center", children: [
+      /* @__PURE__ */ jsx16(
+        Checkbox,
+        {
+          "aria-label": `Edit ${column.header}`,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? errorId : void 0,
+          "data-testid": `edit-${rowId}-${column.id}`,
+          autoFocus,
+          checked: toBoolean(value),
+          onCheckedChange: (next) => onChange(next === true)
+        }
+      ),
+      error && /* @__PURE__ */ jsx16(EditFieldError, { id: errorId, message: error })
+    ] })
+  );
+}
+
+// src/edit/DateEditor.tsx
+import { format as formatDate, parseISO as parseISO4 } from "date-fns";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+function inputValueOf(value, columnType) {
+  const date = toDate(value);
+  if (!date) return "";
+  return columnType === "datetime" ? formatDate(date, "yyyy-MM-dd'T'HH:mm:ss") : formatDate(date, "yyyy-MM-dd");
+}
+function DateEditor({
+  column,
+  rowId,
+  value,
+  onChange,
+  error,
+  autoFocus
+}) {
+  const errorId = editErrorId(rowId, column.id);
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsx17(
+      Input,
+      {
+        type: column.type === "datetime" ? "datetime-local" : "date",
+        step: column.type === "datetime" ? 1 : void 0,
+        className: "h-8",
+        "aria-label": `Edit ${column.header}`,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
+        "data-testid": `edit-${rowId}-${column.id}`,
+        autoFocus,
+        value: inputValueOf(value, column.type),
+        onChange: (event) => onChange(event.target.value === "" ? null : parseISO4(event.target.value))
+      }
+    ),
+    error && /* @__PURE__ */ jsx17(EditFieldError, { id: errorId, message: error })
+  ] });
+}
+
+// src/edit/EnumEditor.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+function EnumEditor({
+  column,
+  rowId,
+  value,
+  onChange,
+  error,
+  autoFocus
+}) {
+  const errorId = editErrorId(rowId, column.id);
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsxs11(Select, { value: value === null || value === void 0 ? "" : String(value), onValueChange: onChange, children: [
+      /* @__PURE__ */ jsx18(
+        SelectTrigger,
+        {
+          className: "h-8",
+          "aria-label": `Edit ${column.header}`,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": error ? errorId : void 0,
+          "data-testid": `edit-${rowId}-${column.id}`,
+          autoFocus,
+          children: /* @__PURE__ */ jsx18(SelectValue, {})
+        }
+      ),
+      /* @__PURE__ */ jsx18(SelectContent, { children: column.options.map((option) => /* @__PURE__ */ jsx18(SelectItem, { value: option.value, children: option.label }, option.value)) })
+    ] }),
+    error && /* @__PURE__ */ jsx18(EditFieldError, { id: errorId, message: error })
+  ] });
+}
+
+// src/edit/NumberEditor.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function textFromValue(value) {
+  return value === null || value === void 0 ? "" : String(value);
+}
+function NumberEditor({
+  column,
+  rowId,
+  value,
+  onChange,
+  error,
+  autoFocus
+}) {
+  const errorId = editErrorId(rowId, column.id);
+  const [text, setText] = useState5(() => textFromValue(value));
+  const lastEmittedRef = useRef4(value);
+  useEffect4(() => {
+    if (value === lastEmittedRef.current) return;
+    lastEmittedRef.current = value;
+    setText(textFromValue(value));
+  }, [value]);
+  return /* @__PURE__ */ jsxs12("div", { children: [
+    /* @__PURE__ */ jsx19(
+      Input,
+      {
+        type: "number",
+        className: "h-8",
+        "aria-label": `Edit ${column.header}`,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
+        "data-testid": `edit-${rowId}-${column.id}`,
+        autoFocus,
+        value: text,
+        onChange: (event) => {
+          setText(event.target.value);
+          const next = event.target.value === "" ? null : Number(event.target.value);
+          lastEmittedRef.current = next;
+          onChange(next);
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx19(EditFieldError, { id: errorId, message: error })
+  ] });
+}
+
+// src/edit/StringEditor.tsx
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function StringEditor({
+  column,
+  rowId,
+  value,
+  onChange,
+  error,
+  autoFocus
+}) {
+  const errorId = editErrorId(rowId, column.id);
+  return /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsx20(
+      Input,
+      {
+        className: "h-8",
+        "aria-label": `Edit ${column.header}`,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
+        "data-testid": `edit-${rowId}-${column.id}`,
+        autoFocus,
+        value: value === null || value === void 0 ? "" : String(value),
+        onChange: (event) => onChange(event.target.value)
+      }
+    ),
+    error && /* @__PURE__ */ jsx20(EditFieldError, { id: errorId, message: error })
+  ] });
+}
+
+// src/edit/registry.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus) {
+  switch (column.type) {
+    case "string":
+      return /* @__PURE__ */ jsx21(StringEditor, { column, rowId, value, onChange, error, autoFocus });
+    case "enum":
+      return /* @__PURE__ */ jsx21(EnumEditor, { column, rowId, value, onChange, error, autoFocus });
+    case "boolean":
+      return /* @__PURE__ */ jsx21(BooleanEditor, { column, rowId, value, onChange, error, autoFocus });
+    case "number":
+    case "currency":
+      return /* @__PURE__ */ jsx21(NumberEditor, { column, rowId, value, onChange, error, autoFocus });
+    case "date":
+    case "datetime":
+      return /* @__PURE__ */ jsx21(DateEditor, { column, rowId, value, onChange, error, autoFocus });
+  }
+}
+
+// src/edit/editingState.ts
+import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+function editValuesEqual(a, b) {
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  return a === b;
+}
+function useEditingState(editing, getRowId) {
+  const [pendingEdits, setPendingEdits] = useState6(/* @__PURE__ */ new Map());
+  const [editErrors, setEditErrors] = useState6(/* @__PURE__ */ new Map());
+  const hasEditErrors = editErrors.size > 0;
+  const [activeRowId, setActiveRowId] = useState6(null);
+  const [autoFocusTarget, setAutoFocusTarget] = useState6(null);
+  function activateRow(rowId, columnId) {
+    setActiveRowId(rowId);
+    setAutoFocusTarget({ rowId, columnId });
+  }
+  useEffect5(() => {
+    if (autoFocusTarget) setAutoFocusTarget(null);
+  }, [autoFocusTarget]);
+  function commitEdit(column, row, value) {
+    const rowId = getRowId(row);
+    const baseline = getColumnValue(column, row);
+    setPendingEdits((prev) => {
+      const next = new Map(prev);
+      const values = new Map(next.get(rowId)?.values);
+      if (editValuesEqual(value, baseline)) values.delete(column.id);
+      else values.set(column.id, value);
+      if (values.size === 0) next.delete(rowId);
+      else next.set(rowId, { row, values });
+      return next;
+    });
+    const message = column.validateEdit?.(value, row);
+    setEditErrors((prev) => {
+      const next = new Map(prev);
+      const rowErrors = new Map(next.get(rowId));
+      if (message) rowErrors.set(column.id, message);
+      else rowErrors.delete(column.id);
+      if (rowErrors.size === 0) next.delete(rowId);
+      else next.set(rowId, rowErrors);
+      return next;
+    });
+  }
+  async function handleSaveEdits() {
+    if (!editing || pendingEdits.size === 0) return;
+    const snapshot = pendingEdits;
+    const edited = [...snapshot.entries()].map(([rowId, entry]) => ({
+      rowId,
+      row: entry.row,
+      values: Object.fromEntries(entry.values)
+    }));
+    try {
+      await editing.onSave(edited);
+    } catch {
+      return;
+    }
+    const snapshotRowIds = new Set(snapshot.keys());
+    const survivedRowIds = /* @__PURE__ */ new Set();
+    const clearedErrorKeys = [];
+    setPendingEdits((prev) => {
+      const next = new Map(prev);
+      for (const [rowId, snapshotEntry] of snapshot) {
+        const current = next.get(rowId);
+        if (!current) continue;
+        const values = new Map(current.values);
+        for (const [columnId, snapshotValue] of snapshotEntry.values) {
+          if (values.has(columnId) && editValuesEqual(values.get(columnId), snapshotValue)) {
+            values.delete(columnId);
+            clearedErrorKeys.push({ rowId, columnId });
+          }
+        }
+        if (values.size === 0) {
+          next.delete(rowId);
+        } else {
+          next.set(rowId, { row: current.row, values });
+          survivedRowIds.add(rowId);
+        }
+      }
+      return next;
+    });
+    setEditErrors((prev) => {
+      if (clearedErrorKeys.length === 0) return prev;
+      const next = new Map(prev);
+      for (const { rowId, columnId } of clearedErrorKeys) {
+        const rowErrors = next.get(rowId);
+        if (!rowErrors) continue;
+        const nextRowErrors = new Map(rowErrors);
+        nextRowErrors.delete(columnId);
+        if (nextRowErrors.size === 0) next.delete(rowId);
+        else next.set(rowId, nextRowErrors);
+      }
+      return next;
+    });
+    setActiveRowId(
+      (prev) => prev !== null && snapshotRowIds.has(prev) && !survivedRowIds.has(prev) ? null : prev
+    );
+  }
+  function handleDiscardEdits() {
+    setPendingEdits(/* @__PURE__ */ new Map());
+    setEditErrors(/* @__PURE__ */ new Map());
+    setActiveRowId(null);
+    editing?.onDiscard?.();
+  }
+  const ctx = editing ? { pendingEdits, editErrors, activeRowId, autoFocusTarget, getRowId, onEdit: commitEdit, onActivateRow: activateRow } : void 0;
+  const ctxRef = useRef5(void 0);
+  ctxRef.current = ctx;
+  return { pendingEdits, editErrors, hasEditErrors, ctx, ctxRef, handleSaveEdits, handleDiscardEdits };
+}
+
+// src/edit/renderEditableCell.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function renderEditableCell(column, row, rawValue, ctx) {
+  const staticContent = (value2) => column.cell ? column.cell(value2, row) : defaultFormat(column, value2);
+  if (!ctx || !isEditable(column, row)) return staticContent(rawValue);
+  const rowId = ctx.getRowId(row);
+  const pendingRow = ctx.pendingEdits.get(rowId);
+  const value = pendingRow?.values.has(column.id) ? pendingRow.values.get(column.id) : rawValue;
+  if (ctx.activeRowId === rowId) {
+    const error = ctx.editErrors.get(rowId)?.get(column.id);
+    const autoFocus = ctx.autoFocusTarget?.rowId === rowId && ctx.autoFocusTarget.columnId === column.id;
+    const onChange = (next) => ctx.onEdit(column, row, next);
+    const editor = column.renderEditCell ? column.renderEditCell(value, row, onChange, error, autoFocus) : renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus);
+    return /* @__PURE__ */ jsx22(
+      "div",
+      {
+        onKeyDown: (event) => {
+          if (event.key !== "Escape") return;
+          if (!event.currentTarget.contains(event.target)) return;
+          event.stopPropagation();
+          ctx.onEdit(column, row, getColumnValue(column, row));
+        },
+        children: editor
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx22(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      "data-testid": `cell-${rowId}-${column.id}`,
+      className: "block w-full cursor-text",
+      onClick: (event) => {
+        stopRowClick(event);
+        ctx.onActivateRow(rowId, column.id);
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        stopRowClick(event);
+        ctx.onActivateRow(rowId, column.id);
+      },
+      children: staticContent(value)
+    }
+  );
+}
+
+// src/edit/EditingBar.tsx
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+function resolveEditLabel(label, changedRowCount, fallback) {
+  if (label === void 0) return fallback(changedRowCount);
+  return typeof label === "function" ? label(changedRowCount) : label;
+}
+function describeErrorRows(editErrors) {
+  const rowIds = [...editErrors.keys()];
+  const shown = rowIds.slice(0, 3);
+  const suffix = rowIds.length > shown.length ? `, and ${rowIds.length - shown.length} more` : "";
+  return `row${rowIds.length === 1 ? "" : "s"} ${shown.join(", ")}${suffix}`;
+}
+function EditingBar({
+  editing,
+  pendingRowCount,
+  editErrors,
+  onSave,
+  onDiscard,
+  testIdPrefix = "datagrid"
+}) {
+  const hasEditErrors = editErrors.size > 0;
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      "data-testid": `${testIdPrefix}-edit-bar`,
+      className: "flex shrink-0 flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/50 px-3 py-2 text-sm",
+      children: [
+        /* @__PURE__ */ jsxs14("span", { "aria-live": "polite", children: [
+          pendingRowCount,
+          " row",
+          pendingRowCount === 1 ? "" : "s",
+          " changed",
+          hasEditErrors && /* @__PURE__ */ jsxs14("span", { className: "ml-2 text-destructive", children: [
+            "Fix the highlighted errors before saving (",
+            describeErrorRows(editErrors),
+            ")."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx23(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              "data-testid": `${testIdPrefix}-discard-edits`,
+              disabled: editing.saving,
+              onClick: onDiscard,
+              children: resolveEditLabel(editing.discardLabel, pendingRowCount, () => "Discard")
+            }
+          ),
+          /* @__PURE__ */ jsx23(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              "data-testid": `${testIdPrefix}-save-edits`,
+              disabled: editing.saving || hasEditErrors,
+              onClick: onSave,
+              children: resolveEditLabel(
+                editing.saveLabel,
+                pendingRowCount,
+                (count) => `Save ${count} change${count === 1 ? "" : "s"}`
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
 // src/column-selector/ColumnSelector.tsx
 import { Columns3 } from "lucide-react";
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1385,9 +1829,9 @@ var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs9(DialogPrimitive.Portal, { children: [
-  /* @__PURE__ */ jsx15(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs9(
+var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx24(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs15(
     DialogPrimitive.Content,
     {
       ref,
@@ -1398,9 +1842,9 @@ var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs9(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
-          /* @__PURE__ */ jsx15(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs15(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx24(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx24("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -1410,10 +1854,10 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx15("div", { className: cn("flex flex-col gap-1.5", className), ...props });
-var DialogTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+}) => /* @__PURE__ */ jsx24("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var DialogTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx15(
+var DialogDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DialogPrimitive.Description,
   {
     ref,
@@ -1481,7 +1925,7 @@ function canHideGroup(columns, visibility, groupColumnIds) {
 }
 
 // src/column-selector/ColumnSelector.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function ColumnSelector({
   columns,
   visibility,
@@ -1491,7 +1935,7 @@ function ColumnSelector({
   open,
   onOpenChange
 }) {
-  useEffect4(() => {
+  useEffect6(() => {
     if (!persistKey) return;
     const restored = readPersistedVisibility(persistKey);
     if (restored) onVisibilityChange({ ...visibility, ...restored });
@@ -1506,20 +1950,20 @@ function ColumnSelector({
   }
   const totalVisible = countVisible(columns, visibility);
   const groups = groupColumns(columns);
-  return /* @__PURE__ */ jsxs10(Dialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx16(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx16(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx16(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
-    /* @__PURE__ */ jsxs10(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
-      /* @__PURE__ */ jsx16(DialogHeader, { children: /* @__PURE__ */ jsx16(DialogTitle, { children: "Columns" }) }),
-      /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs10("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
-        group && /* @__PURE__ */ jsx16("span", { className: "border-b pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group }),
+  return /* @__PURE__ */ jsxs16(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx25(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx25(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx25(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsxs16(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
+      /* @__PURE__ */ jsx25(DialogHeader, { children: /* @__PURE__ */ jsx25(DialogTitle, { children: "Columns" }) }),
+      /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs16("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
+        group && /* @__PURE__ */ jsx25("span", { className: "border-b pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group }),
         groupCols.map((column) => {
           const visible = isColumnVisible(visibility, column.id);
-          return /* @__PURE__ */ jsxs10(
+          return /* @__PURE__ */ jsxs16(
             "label",
             {
               className: "flex items-center gap-2 rounded-md px-1.5 py-1 text-sm hover:bg-accent/50 focus-within:bg-accent/50",
               children: [
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx25(
                   Checkbox,
                   {
                     checked: visible,
@@ -1556,10 +2000,10 @@ import { useMemo as useMemo3 } from "react";
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx17(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx17(
+var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1572,7 +2016,7 @@ var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props },
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx17(
+var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1585,7 +2029,7 @@ var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /*
   }
 ));
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -1594,7 +2038,7 @@ var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1605,16 +2049,16 @@ var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
 
 // src/menu/ActionsMenu.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function ActionsMenu({ items, ctx, triggerLabel }) {
   const resolved = useMemo3(
     () => resolveMenuItems(items, ctx),
     [items, ctx.row, ctx.selectedRows]
   );
   if (resolved.length === 0) return null;
-  return /* @__PURE__ */ jsxs11(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx18(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
-    /* @__PURE__ */ jsx18(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs17(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx27(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx27(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsx27(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx27(
       DropdownMenuItem,
       {
         danger: item.danger,
@@ -1632,7 +2076,7 @@ import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { Fragment as Fragment2, useEffect as useEffect7, useLayoutEffect, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect9, useLayoutEffect, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react";
 
 // src/lib/structuralColumns.ts
 var SELECTION_COLUMN_WIDTH = 44;
@@ -1675,15 +2119,15 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect8, useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef6 } from "react";
 function useDebouncedCallback(callback, delayMs) {
-  const callbackRef = useRef4(callback);
+  const callbackRef = useRef6(callback);
   callbackRef.current = callback;
-  const timeoutRef = useRef4(void 0);
-  useEffect5(() => {
+  const timeoutRef = useRef6(void 0);
+  useEffect7(() => {
     return () => {
       clearTimeout(timeoutRef.current);
     };
@@ -1713,7 +2157,7 @@ function nextSortDir(current, descFirst) {
   return void 0;
 }
 function useGridState(dataSource, initialState, externalState) {
-  const [state, setState] = useState5(
+  const [state, setState] = useState7(
     () => externalState ?? { ...DEFAULT_STATE, ...initialState }
   );
   const notifyRaw = useCallback2(
@@ -1733,7 +2177,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyRaw, cancelDebouncedNotify]
   );
-  useEffect6(() => {
+  useEffect8(() => {
     if (!externalState) return;
     cancelDebouncedNotify();
     setState(externalState);
@@ -1802,7 +2246,7 @@ function useGridState(dataSource, initialState, externalState) {
 }
 
 // src/grid/DataGrid.tsx
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
 var DETAIL_COLUMN_WIDTH = 44;
@@ -1833,13 +2277,13 @@ function computeHeaderRuns(columns) {
   }
   return runs;
 }
-function toTanstackColumns(columns) {
+function toTanstackColumns(columns, editingCtxRef) {
   return columns.map((column) => ({
     id: column.id,
     header: column.header,
     size: column.width,
     accessorFn: (row) => getColumnValue(column, row),
-    cell: (info) => column.cell ? column.cell(info.getValue(), info.row.original) : defaultFormat(column, info.getValue())
+    cell: (info) => renderEditableCell(column, info.row.original, info.getValue(), editingCtxRef.current)
   }));
 }
 function DataGrid({
@@ -1870,26 +2314,27 @@ function DataGrid({
   defaultGroupsExpanded = true,
   expandedGroups: controlledExpandedGroups,
   onExpandedGroupsChange,
-  zebra = true
+  zebra = true,
+  editing
 }) {
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
     initialState,
     gridState
   );
-  const [internalSelectedIds, setInternalSelectedIds] = useState6(/* @__PURE__ */ new Set());
+  const [internalSelectedIds, setInternalSelectedIds] = useState8(/* @__PURE__ */ new Set());
   const selectedIds = controlledSelectedIds ?? internalSelectedIds;
   function updateSelectedIds(next) {
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
-  const [internalColumnSizing, setInternalColumnSizing] = useState6({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState8({});
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   function updateColumnSizing(next) {
     setInternalColumnSizing(next);
     onColumnSizingChange?.(next);
   }
-  const [expandedIds, setExpandedIds] = useState6(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = useState8(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -1898,7 +2343,7 @@ function DataGrid({
       return next;
     });
   }
-  const [internalExpandedGroups, setInternalExpandedGroups] = useState6({});
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState8({});
   const expandedGroupsState = controlledExpandedGroups ?? internalExpandedGroups;
   function updateExpandedGroups(next) {
     setInternalExpandedGroups(next);
@@ -1910,6 +2355,10 @@ function DataGrid({
   function toggleGroupExpanded(key) {
     updateExpandedGroups({ ...expandedGroupsState, [key]: !isGroupExpanded(key) });
   }
+  const { pendingEdits, editErrors, ctxRef: editingCtxRef, handleSaveEdits, handleDiscardEdits } = useEditingState(
+    editing,
+    getRowId
+  );
   const visibleColumns = useMemo6(
     () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
     [columns, columnVisibility]
@@ -1938,7 +2387,7 @@ function DataGrid({
     }
     updateSelectedIds(next);
   }
-  const tanstackColumns = useMemo6(() => toTanstackColumns(visibleColumns), [visibleColumns]);
+  const tanstackColumns = useMemo6(() => toTanstackColumns(visibleColumns, editingCtxRef), [visibleColumns]);
   const columnById = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, column);
@@ -2065,8 +2514,8 @@ function DataGrid({
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
-  const theadRef = useRef5(null);
-  const [groupHeaderTop, setGroupHeaderTop] = useState6(0);
+  const theadRef = useRef7(null);
+  const [groupHeaderTop, setGroupHeaderTop] = useState8(0);
   useLayoutEffect(() => {
     if (!groupBy) return;
     const theadEl = theadRef.current;
@@ -2077,7 +2526,7 @@ function DataGrid({
     observer.observe(theadEl);
     return () => observer.disconnect();
   }, [groupBy]);
-  const scrollRef = useRef5(null);
+  const scrollRef = useRef7(null);
   const virtualizer = useVirtualizer({
     count: tableRows.length,
     getScrollElement: () => scrollRef.current,
@@ -2089,8 +2538,8 @@ function DataGrid({
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
   const lastVisibleIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
-  const notifiedForLengthRef = useRef5(-1);
-  useEffect7(() => {
+  const notifiedForLengthRef = useRef7(-1);
+  useEffect9(() => {
     if (!virtualize?.onEndReached) return;
     if (lastVisibleIndex < 0 || lastVisibleIndex < tableRows.length - 1) return;
     if (virtualize.hasMore === false) return;
@@ -2103,20 +2552,20 @@ function DataGrid({
     const rowProps = getRowProps?.(row.original);
     const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
     const isOddRow = zebra && row.index % 2 === 1;
-    return /* @__PURE__ */ jsxs12("tbody", { ref: measureRef, "data-index": row.index, children: [
-      /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs18("tbody", { ref: measureRef, "data-index": row.index, children: [
+      /* @__PURE__ */ jsxs18(
         "tr",
         {
           ...rowProps,
           "data-testid": rowTestId,
           className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, isOddRow && "bg-foreground/5") : `divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
           children: [
-            showDetailColumn && /* @__PURE__ */ jsx19(
+            showDetailColumn && /* @__PURE__ */ jsx28(
               "td",
               {
                 className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
-                children: /* @__PURE__ */ jsx19(
+                children: /* @__PURE__ */ jsx28(
                   Button,
                   {
                     type: "button",
@@ -2128,7 +2577,7 @@ function DataGrid({
                       stopRowClick(event);
                       toggleRowExpanded(row.id);
                     },
-                    children: /* @__PURE__ */ jsx19(
+                    children: /* @__PURE__ */ jsx28(
                       ChevronRight,
                       {
                         className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
@@ -2139,12 +2588,12 @@ function DataGrid({
                 )
               }
             ),
-            showSelectionColumn && /* @__PURE__ */ jsx19(
+            showSelectionColumn && /* @__PURE__ */ jsx28(
               "td",
               {
                 className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
-                children: /* @__PURE__ */ jsx19(
+                children: /* @__PURE__ */ jsx28(
                   "input",
                   {
                     type: "checkbox",
@@ -2158,27 +2607,27 @@ function DataGrid({
             ),
             row.getAllCells().map((cell) => {
               const cellProps = bodyCellPropsByColumn.get(cell.column.id);
-              return /* @__PURE__ */ jsx19("td", { style: cellProps?.style, className: cellProps?.className ?? BODY_TD_BASE_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+              return /* @__PURE__ */ jsx28("td", { style: cellProps?.style, className: cellProps?.className ?? BODY_TD_BASE_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx19(
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx28(
               "td",
               {
                 className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
-                children: /* @__PURE__ */ jsx19(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
+                children: /* @__PURE__ */ jsx28(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
               }
             )
           ]
         }
       ),
-      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx19("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
+      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx28("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
   function renderGroupedBucket(bucket) {
     const expanded = isGroupExpanded(bucket.key);
     const originalRows = bucket.items.map((row) => row.original);
-    return /* @__PURE__ */ jsxs12(Fragment2, { children: [
-      /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsxs18(Fragment2, { children: [
+      /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx28(
         "td",
         {
           colSpan: totalColumnCount,
@@ -2187,7 +2636,7 @@ function DataGrid({
             zebra ? "bg-muted" : "bg-background"
           ),
           style: { top: groupHeaderTop },
-          children: /* @__PURE__ */ jsxs12(
+          children: /* @__PURE__ */ jsxs18(
             "button",
             {
               type: "button",
@@ -2195,7 +2644,7 @@ function DataGrid({
               onClick: () => toggleGroupExpanded(bucket.key),
               "aria-expanded": expanded,
               children: [
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx28(
                   ChevronRight,
                   {
                     className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
@@ -2224,32 +2673,42 @@ function DataGrid({
     // containers (that one scrolling vertically, this component's own
     // `overflow-x-auto` div scrolling horizontally) fighting over which one
     // a sticky header/pinned column is actually stuck relative to.
-    /* @__PURE__ */ jsxs12("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
-      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs12("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs12("span", { children: [
+    /* @__PURE__ */ jsxs18("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
+      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx28(
+        EditingBar,
+        {
+          editing,
+          pendingRowCount: pendingEdits.size,
+          editErrors,
+          onSave: () => void handleSaveEdits(),
+          onDiscard: handleDiscardEdits
+        }
+      ),
+      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs18("span", { children: [
           selectedRows.length,
           " selected"
         ] }),
-        /* @__PURE__ */ jsx19(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
+        /* @__PURE__ */ jsx28(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "relative min-h-0 flex-1", children: [
-        loading && /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs18("div", { className: "relative min-h-0 flex-1", children: [
+        loading && /* @__PURE__ */ jsx28(
           "div",
           {
             "data-testid": "datagrid-loading-overlay",
             className: "absolute inset-0 z-30 flex items-center justify-center bg-background/60",
-            children: /* @__PURE__ */ jsx19(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx28(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
           }
         ),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx28(
           "div",
           {
             ref: scrollRef,
             "data-testid": testId,
             className: "h-full overflow-auto rounded-md border",
             style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
-            children: /* @__PURE__ */ jsxs12("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
-              /* @__PURE__ */ jsxs12("thead", { ref: theadRef, className: "bg-muted", children: [
+            children: /* @__PURE__ */ jsxs18("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
+              /* @__PURE__ */ jsxs18("thead", { ref: theadRef, className: "bg-muted", children: [
                 table.getHeaderGroups().map((headerGroup) => {
                   const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
                   function renderLeafHeaderCell(column, rowSpan) {
@@ -2260,9 +2719,9 @@ function DataGrid({
                     const filterable = isFilterable(column) && column.filterDisplay !== "row";
                     const cellProps = leafHeaderCellPropsByColumn.get(column.id);
                     const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
-                    return /* @__PURE__ */ jsxs12("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
-                      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1", children: [
-                        sortable ? /* @__PURE__ */ jsxs12(
+                    return /* @__PURE__ */ jsxs18("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
+                      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
+                        sortable ? /* @__PURE__ */ jsxs18(
                           "button",
                           {
                             type: "button",
@@ -2270,8 +2729,8 @@ function DataGrid({
                             onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
                             children: [
                               headerContent,
-                              sortEntry?.dir === "asc" && /* @__PURE__ */ jsx19(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                              sortEntry?.dir === "desc" && /* @__PURE__ */ jsx19(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                              sortEntry?.dir === "asc" && /* @__PURE__ */ jsx28(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                              sortEntry?.dir === "desc" && /* @__PURE__ */ jsx28(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
                             ]
                           }
                         ) : (
@@ -2280,10 +2739,10 @@ function DataGrid({
                           // silently breaking any interactive content a column's own `renderHeader`
                           // embeds directly (bare filter inputs, "select/reject all" buttons) —
                           // clicks never reach them at all, even though nothing looks wrong visually.
-                          /* @__PURE__ */ jsx19("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                          /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-1 px-1", children: headerContent })
                         ),
-                        filterable && /* @__PURE__ */ jsxs12(Popover, { children: [
-                          /* @__PURE__ */ jsx19(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx19(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx19(
+                        filterable && /* @__PURE__ */ jsxs18(Popover, { children: [
+                          /* @__PURE__ */ jsx28(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx28(
                             FunnelIcon7,
                             {
                               className: cn(
@@ -2293,10 +2752,10 @@ function DataGrid({
                               "aria-hidden": true
                             }
                           ) }) }),
-                          /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
+                          /* @__PURE__ */ jsx28(PopoverContent, { children: renderFilterWidget(column) })
                         ] })
                       ] }),
-                      enableColumnResizing && /* @__PURE__ */ jsx19(
+                      enableColumnResizing && /* @__PURE__ */ jsx28(
                         "div",
                         {
                           "data-testid": `resize-handle-${column.id}`,
@@ -2307,9 +2766,9 @@ function DataGrid({
                       )
                     ] }, header.id);
                   }
-                  return /* @__PURE__ */ jsxs12(Fragment2, { children: [
-                    hasHeaderGroups && /* @__PURE__ */ jsxs12("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
-                      showDetailColumn && /* @__PURE__ */ jsx19(
+                  return /* @__PURE__ */ jsxs18(Fragment2, { children: [
+                    hasHeaderGroups && /* @__PURE__ */ jsxs18("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
+                      showDetailColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           rowSpan: 2,
@@ -2318,13 +2777,13 @@ function DataGrid({
                           "aria-hidden": true
                         }
                       ),
-                      showSelectionColumn && /* @__PURE__ */ jsx19(
+                      showSelectionColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           rowSpan: 2,
                           className: selectionHeaderCellProps.className,
                           style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx19(
+                          children: /* @__PURE__ */ jsx28(
                             "input",
                             {
                               type: "checkbox",
@@ -2336,7 +2795,7 @@ function DataGrid({
                         }
                       ),
                       headerRuns.map(
-                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx19(
+                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx28(
                           "th",
                           {
                             colSpan: run.columns.length,
@@ -2346,7 +2805,7 @@ function DataGrid({
                           `group-${run.label}-${run.columns[0].id}`
                         )
                       ),
-                      showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      showRowActionsColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           rowSpan: 2,
@@ -2356,8 +2815,8 @@ function DataGrid({
                         }
                       )
                     ] }, `${headerGroup.id}-groups`),
-                    /* @__PURE__ */ jsxs12("tr", { className: "divide-x divide-border", children: [
-                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsxs18("tr", { className: "divide-x divide-border", children: [
+                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           className: detailHeaderCellProps.className,
@@ -2365,12 +2824,12 @@ function DataGrid({
                           "aria-hidden": true
                         }
                       ),
-                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
+                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           className: selectionHeaderCellProps.className,
                           style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx19(
+                          children: /* @__PURE__ */ jsx28(
                             "input",
                             {
                               type: "checkbox",
@@ -2386,7 +2845,7 @@ function DataGrid({
                         if (!column || hasHeaderGroups && !column.headerGroup) return null;
                         return renderLeafHeaderCell(column);
                       }),
-                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           className: rowActionsHeaderCellProps.className,
@@ -2397,9 +2856,9 @@ function DataGrid({
                     ] }, headerGroup.id)
                   ] }, headerGroup.id);
                 }),
-                hasFilterRow && /* @__PURE__ */ jsxs12("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
-                  showDetailColumn && /* @__PURE__ */ jsx19("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
-                  showSelectionColumn && /* @__PURE__ */ jsx19(
+                hasFilterRow && /* @__PURE__ */ jsxs18("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
+                  showDetailColumn && /* @__PURE__ */ jsx28("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
+                  showSelectionColumn && /* @__PURE__ */ jsx28(
                     "th",
                     {
                       className: selectionHeaderCellProps.className,
@@ -2408,9 +2867,9 @@ function DataGrid({
                   ),
                   visibleColumns.map((column) => {
                     const cellProps = filterHeaderCellPropsByColumn.get(column.id);
-                    return /* @__PURE__ */ jsx19("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
+                    return /* @__PURE__ */ jsx28("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
                   }),
-                  showRowActionsColumn && /* @__PURE__ */ jsx19(
+                  showRowActionsColumn && /* @__PURE__ */ jsx28(
                     "th",
                     {
                       className: rowActionsHeaderCellProps.className,
@@ -2419,19 +2878,19 @@ function DataGrid({
                   )
                 ] })
               ] }),
-              rows.length === 0 ? /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
-                paddingTop > 0 && /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
+              rows.length === 0 ? /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs18(Fragment3, { children: [
+                paddingTop > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
                 virtualItems.map(
                   (virtualItem) => renderRow(tableRows[virtualItem.index], (el) => virtualizer.measureElement(el))
                 ),
-                paddingBottom > 0 && /* @__PURE__ */ jsx19("tbody", { children: /* @__PURE__ */ jsx19("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx19("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
+                paddingBottom > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
               ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
             ] })
           }
         )
       ] }),
-      showPagination && /* @__PURE__ */ jsxs12("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs12("span", { children: [
+      showPagination && /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs18("span", { children: [
           "Page ",
           state.page + 1,
           " of ",
@@ -2442,8 +2901,8 @@ function DataGrid({
           rowCount === 1 ? "" : "s",
           ")"
         ] }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx28(
             Button,
             {
               variant: "outline",
@@ -2453,7 +2912,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx28(
             Button,
             {
               variant: "outline",
@@ -2472,7 +2931,7 @@ function DataGrid({
 // src/tree/TreeDataGrid.tsx
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { AlertCircle, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
-import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef6 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo8, useRef as useRef8 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -2517,7 +2976,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback3, useMemo as useMemo7, useState as useState7 } from "react";
+import { useCallback as useCallback3, useMemo as useMemo7, useState as useState9 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -2529,7 +2988,7 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState7({});
+  const [internalExpanded, setInternalExpanded] = useState9({});
   const expanded = controlledExpanded ?? internalExpanded;
   const setExpanded = useCallback3(
     (updater) => {
@@ -2541,7 +3000,7 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [internalChildrenMap, setInternalChildrenMap] = useState7(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState9(/* @__PURE__ */ new Map());
   const childrenMap = controlledChildrenMap ?? internalChildrenMap;
   const setChildrenMap = useCallback3(
     (updater) => {
@@ -2553,8 +3012,8 @@ function useTreeState({
     },
     [controlledChildrenMap, onChildrenMapChange]
   );
-  const [loadingIds, setLoadingIds] = useState7(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = useState7(/* @__PURE__ */ new Map());
+  const [loadingIds, setLoadingIds] = useState9(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState9(/* @__PURE__ */ new Map());
   const resolveHasChildren = useMemo7(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
@@ -2634,12 +3093,11 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
-function renderCell(column, row) {
-  const value = getColumnValue(column, row);
-  return column.cell ? column.cell(value, row) : defaultFormat(column, value);
+function renderCell(column, row, editingCtx) {
+  return renderEditableCell(column, row, getColumnValue(column, row), editingCtx);
 }
 function TreeCell({
   flatRow,
@@ -2648,10 +3106,11 @@ function TreeCell({
   isLoading,
   error,
   onToggle,
-  onRetry
+  onRetry,
+  editingCtx
 }) {
-  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
-    flatRow.hasChildren ? /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
+    flatRow.hasChildren ? /* @__PURE__ */ jsx29(
       "button",
       {
         type: "button",
@@ -2663,14 +3122,14 @@ function TreeCell({
         "aria-label": flatRow.isExpanded ? "Collapse" : "Expand",
         "aria-expanded": flatRow.isExpanded,
         className: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-50",
-        children: isLoading ? /* @__PURE__ */ jsx20(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx20(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx20(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+        children: isLoading ? /* @__PURE__ */ jsx29(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx29(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx29(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
       }
-    ) : /* @__PURE__ */ jsx20("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx20("span", { className: "truncate", children: renderCell(column, flatRow.row) }),
-    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs13("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
-      /* @__PURE__ */ jsx20(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
+    ) : /* @__PURE__ */ jsx29("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx29("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
+    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs19("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx29(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
       "Failed to load.",
-      /* @__PURE__ */ jsx20("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
+      /* @__PURE__ */ jsx29("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
     ] }) : null
   ] });
 }
@@ -2698,12 +3157,14 @@ function TreeDataGrid({
   onSelectedIdsChange,
   getRowSelectionState,
   isRowSelectionDisabled,
-  zebra = true
+  zebra = true,
+  editing
 }) {
   const accessors = useMemo8(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
+  const editingState = useEditingState(editing, getRowId);
   const { expanded, childrenMap, loadingIds, errorIds, toggleExpand, retry, expandToLevel } = useTreeState({
     data,
     getRowId,
@@ -2715,8 +3176,8 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef6(false);
-  useEffect8(() => {
+  const didAutoExpand = useRef8(false);
+  useEffect10(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
     if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
@@ -2764,7 +3225,7 @@ function TreeDataGrid({
     for (const column of columns) map.set(column.id, `p-2 ${alignClassName(column)}`);
     return map;
   }, [columns]);
-  const scrollRef = useRef6(null);
+  const scrollRef = useRef8(null);
   const shouldVirtualize = flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
     count: flatRows.length,
@@ -2777,7 +3238,7 @@ function TreeDataGrid({
     const rowProps = getRowProps?.(flatRow.row, flatRow.depth, index);
     const rowTestId = getRowTestId?.(flatRow.row) ?? `tree-row-${flatRow.id}`;
     const isOddRow = zebra && index % 2 === 1;
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs19(
       "tr",
       {
         ref: measureRef,
@@ -2790,9 +3251,9 @@ function TreeDataGrid({
           isOddRow && "bg-foreground/5"
         ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
-          showSelectionColumn && /* @__PURE__ */ jsx20("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
+          showSelectionColumn && /* @__PURE__ */ jsx29("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);
-            return /* @__PURE__ */ jsx20(
+            return /* @__PURE__ */ jsx29(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -2803,7 +3264,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          columns.map((column) => /* @__PURE__ */ jsx20("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx20(
+          columns.map((column) => /* @__PURE__ */ jsx29("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx29(
             TreeCell,
             {
               flatRow,
@@ -2812,10 +3273,11 @@ function TreeDataGrid({
               isLoading: loadingIds.has(flatRow.id),
               error: errorIds.get(flatRow.id),
               onToggle: () => toggleExpand(flatRow.row),
-              onRetry: () => retry(flatRow.row)
+              onRetry: () => retry(flatRow.row),
+              editingCtx: editingState.ctx
             }
-          ) : renderCell(column, flatRow.row) }, column.id)),
-          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx20("td", { className: "p-2", children: /* @__PURE__ */ jsx20(
+          ) : renderCell(column, flatRow.row, editingState.ctx) }, column.id)),
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx29("td", { className: "p-2", children: /* @__PURE__ */ jsx29(
             ActionsMenu,
             {
               items: rowActions,
@@ -2831,60 +3293,80 @@ function TreeDataGrid({
   const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
-  return /* @__PURE__ */ jsx20("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: /* @__PURE__ */ jsx20(
-    "div",
-    {
-      ref: scrollRef,
-      className: shouldVirtualize ? "overflow-y-auto" : void 0,
-      style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
-      children: /* @__PURE__ */ jsxs13("table", { className: "w-full border-collapse text-sm", children: [
-        /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs13("tr", { className: "divide-x divide-border", children: [
-          showSelectionColumn && /* @__PURE__ */ jsx20("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx20(
-            Checkbox,
-            {
-              "aria-label": "Select all visible rows",
-              checked: allVisibleSelected,
-              onCheckedChange: toggleAllVisibleSelected
-            }
-          ) }),
-          columns.map((column) => /* @__PURE__ */ jsx20(
-            "th",
-            {
-              style: column.width ? { width: column.width } : void 0,
-              className: `border-b border-border p-2 font-medium ${alignClassName(column)}`,
-              children: column.header
-            },
-            column.id
-          )),
-          showRowActionsColumn && /* @__PURE__ */ jsx20("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
-        ] }) }),
-        /* @__PURE__ */ jsx20("tbody", { children: flatRows.length === 0 ? /* @__PURE__ */ jsx20("tr", { children: /* @__PURE__ */ jsx20("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs13(Fragment4, { children: [
-          paddingTop > 0 && /* @__PURE__ */ jsx20("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
-          virtualItems.map(
-            (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
-          ),
-          paddingBottom > 0 && /* @__PURE__ */ jsx20("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
-            "td",
-            {
-              colSpan: totalColumnCount,
-              style: { padding: 0, border: "none", height: paddingBottom }
-            }
-          ) })
-        ] }) : flatRows.map((flatRow, index) => renderRow(flatRow, index)) })
-      ] })
-    }
-  ) });
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
+    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx29(
+      EditingBar,
+      {
+        editing,
+        pendingRowCount: editingState.pendingEdits.size,
+        editErrors: editingState.editErrors,
+        onSave: () => void editingState.handleSaveEdits(),
+        onDiscard: editingState.handleDiscardEdits,
+        testIdPrefix: "tree-datagrid"
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "div",
+      {
+        ref: scrollRef,
+        className: shouldVirtualize ? "overflow-y-auto" : void 0,
+        style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
+        children: /* @__PURE__ */ jsxs19("table", { className: "w-full border-collapse text-sm", children: [
+          /* @__PURE__ */ jsx29("thead", { children: /* @__PURE__ */ jsxs19("tr", { className: "divide-x divide-border", children: [
+            showSelectionColumn && /* @__PURE__ */ jsx29("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx29(
+              Checkbox,
+              {
+                "aria-label": "Select all visible rows",
+                checked: allVisibleSelected,
+                onCheckedChange: toggleAllVisibleSelected
+              }
+            ) }),
+            columns.map((column) => /* @__PURE__ */ jsx29(
+              "th",
+              {
+                style: column.width ? { width: column.width } : void 0,
+                className: `border-b border-border p-2 font-medium ${alignClassName(column)}`,
+                children: column.header
+              },
+              column.id
+            )),
+            showRowActionsColumn && /* @__PURE__ */ jsx29("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx29("tbody", { children: flatRows.length === 0 ? /* @__PURE__ */ jsx29("tr", { children: /* @__PURE__ */ jsx29("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs19(Fragment4, { children: [
+            paddingTop > 0 && /* @__PURE__ */ jsx29("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx29("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
+            virtualItems.map(
+              (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
+            ),
+            paddingBottom > 0 && /* @__PURE__ */ jsx29("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx29(
+              "td",
+              {
+                colSpan: totalColumnCount,
+                style: { padding: 0, border: "none", height: paddingBottom }
+              }
+            ) })
+          ] }) : flatRows.map((flatRow, index) => renderRow(flatRow, index)) })
+        ] })
+      }
+    )
+  ] });
 }
 export {
   ActionsMenu,
+  BooleanEditor,
   BooleanFilter,
   ColumnSelector,
   DataGrid,
+  DateEditor,
   DateRangeFilter,
+  EditFieldError,
+  EditingBar,
+  EnumEditor,
   EnumFilter,
   NumberComparisonFilter,
+  NumberEditor,
   NumberHistogramFilter,
   NumberRangeFilter,
+  StringEditor,
   StringFilter,
   TreeDataGrid,
   UNARY_OPERATORS,
@@ -2894,6 +3376,7 @@ export {
   countVisible,
   defaultAlign,
   defaultFormat,
+  editErrorId,
   evaluateFilter,
   facetedNumberValues,
   fieldKey,
@@ -2902,14 +3385,19 @@ export {
   groupColumns,
   isColumnVisible,
   isCompositeFilterDescriptor,
+  isEditable,
   isFilterDescriptor,
   isFilterable,
   isSortable,
   processClientData,
+  renderDefaultEditWidget,
   renderDefaultFilterWidget,
+  renderEditableCell,
   resolveMenuItems,
   storageKeyFor,
+  toDate,
   useDebouncedCallback,
+  useEditingState,
   useGridState,
   useTreeState
 };