@bmsuisse/datagrid 0.25.2 → 0.26.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,6 +1369,202 @@ 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 { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function NumberEditor({
+  column,
+  rowId,
+  value,
+  onChange,
+  error,
+  autoFocus
+}) {
+  const errorId = editErrorId(rowId, column.id);
+  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: value === null || value === void 0 ? "" : String(value),
+        onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value))
+      }
+    ),
+    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/column-selector/ColumnSelector.tsx
 import { Columns3 } from "lucide-react";
 import { useEffect as useEffect4 } from "react";
@@ -1373,10 +1573,10 @@ import { useEffect as useEffect4 } from "react";
 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 jsx22, jsxs as jsxs14 } 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__ */ jsx22(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1385,9 +1585,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__ */ jsxs14(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx22(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs14(
     DialogPrimitive.Content,
     {
       ref,
@@ -1398,9 +1598,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__ */ jsxs14(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx22(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -1410,10 +1610,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__ */ jsx22("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var DialogTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(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__ */ jsx22(
   DialogPrimitive.Description,
   {
     ref,
@@ -1481,7 +1681,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 jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 function ColumnSelector({
   columns,
   visibility,
@@ -1506,20 +1706,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__ */ jsxs15(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx23(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx23(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx23(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsxs15(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
+      /* @__PURE__ */ jsx23(DialogHeader, { children: /* @__PURE__ */ jsx23(DialogTitle, { children: "Columns" }) }),
+      /* @__PURE__ */ jsx23("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs15("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
+        group && /* @__PURE__ */ jsx23("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__ */ jsxs15(
             "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__ */ jsx23(
                   Checkbox,
                   {
                     checked: visible,
@@ -1556,10 +1756,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 jsx24 } 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__ */ jsx24(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx24(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1572,7 +1772,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__ */ jsx24(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1585,7 +1785,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__ */ jsx24(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -1594,7 +1794,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__ */ jsx24(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1605,16 +1805,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 jsx25, jsxs as jsxs16 } 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__ */ jsxs16(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx25(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsx25(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx25(
       DropdownMenuItem,
       {
         danger: item.danger,
@@ -1632,7 +1832,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, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect7, useLayoutEffect, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
 
 // src/lib/structuralColumns.ts
 var SELECTION_COLUMN_WIDTH = 44;
@@ -1802,7 +2002,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 jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
 var DETAIL_COLUMN_WIDTH = 44;
@@ -1833,15 +2033,77 @@ 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) => {
+      const row = info.row.original;
+      const editingCtx = editingCtxRef.current;
+      const staticContent = (value) => column.cell ? column.cell(value, row) : defaultFormat(column, value);
+      if (editingCtx && isEditable(column, row)) {
+        const rowId = editingCtx.getRowId(row);
+        const pendingRow = editingCtx.pendingEdits.get(rowId);
+        const value = pendingRow?.values.has(column.id) ? pendingRow.values.get(column.id) : info.getValue();
+        if (editingCtx.activeRowId === rowId) {
+          const error = editingCtx.editErrors.get(rowId)?.get(column.id);
+          const autoFocus = editingCtx.autoFocusTarget?.rowId === rowId && editingCtx.autoFocusTarget.columnId === column.id;
+          const onChange = (next) => editingCtx.onEdit(column, row, next);
+          const editor = column.renderEditCell ? column.renderEditCell(value, row, onChange, error, autoFocus) : renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus);
+          return /* @__PURE__ */ jsx26(
+            "div",
+            {
+              onKeyDown: (event) => {
+                if (event.key !== "Escape") return;
+                if (!event.currentTarget.contains(event.target)) return;
+                event.stopPropagation();
+                editingCtx.onEdit(column, row, getColumnValue(column, row));
+              },
+              children: editor
+            }
+          );
+        }
+        return /* @__PURE__ */ jsx26(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            "data-testid": `cell-${rowId}-${column.id}`,
+            className: "block w-full cursor-text",
+            onClick: (event) => {
+              stopRowClick(event);
+              editingCtx.onActivateRow(rowId, column.id);
+            },
+            onKeyDown: (event) => {
+              if (event.key !== "Enter" && event.key !== " ") return;
+              event.preventDefault();
+              stopRowClick(event);
+              editingCtx.onActivateRow(rowId, column.id);
+            },
+            children: staticContent(value)
+          }
+        );
+      }
+      return staticContent(info.getValue());
+    }
   }));
 }
+function editValuesEqual(a, b) {
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  return a === b;
+}
+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 DataGrid({
   columns,
   dataSource,
@@ -1870,7 +2132,8 @@ function DataGrid({
   defaultGroupsExpanded = true,
   expandedGroups: controlledExpandedGroups,
   onExpandedGroupsChange,
-  zebra = true
+  zebra = true,
+  editing
 }) {
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
@@ -1910,6 +2173,102 @@ function DataGrid({
   function toggleGroupExpanded(key) {
     updateExpandedGroups({ ...expandedGroupsState, [key]: !isGroupExpanded(key) });
   }
+  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 });
+  }
+  useEffect7(() => {
+    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 editingCtxRef = useRef5(void 0);
+  editingCtxRef.current = editing ? { pendingEdits, editErrors, activeRowId, autoFocusTarget, getRowId, onEdit: commitEdit, onActivateRow: activateRow } : void 0;
   const visibleColumns = useMemo6(
     () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
     [columns, columnVisibility]
@@ -1938,7 +2297,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,6 +2424,18 @@ function DataGrid({
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
+  const theadRef = useRef5(null);
+  const [groupHeaderTop, setGroupHeaderTop] = useState6(0);
+  useLayoutEffect(() => {
+    if (!groupBy) return;
+    const theadEl = theadRef.current;
+    if (!theadEl) return;
+    const updateHeight = () => setGroupHeaderTop(theadEl.getBoundingClientRect().height);
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(theadEl);
+    return () => observer.disconnect();
+  }, [groupBy]);
   const scrollRef = useRef5(null);
   const virtualizer = useVirtualizer({
     count: tableRows.length,
@@ -2091,20 +2462,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__ */ jsxs17("tbody", { ref: measureRef, "data-index": row.index, children: [
+      /* @__PURE__ */ jsxs17(
         "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__ */ jsx26(
               "td",
               {
                 className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
-                children: /* @__PURE__ */ jsx19(
+                children: /* @__PURE__ */ jsx26(
                   Button,
                   {
                     type: "button",
@@ -2116,7 +2487,7 @@ function DataGrid({
                       stopRowClick(event);
                       toggleRowExpanded(row.id);
                     },
-                    children: /* @__PURE__ */ jsx19(
+                    children: /* @__PURE__ */ jsx26(
                       ChevronRight,
                       {
                         className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
@@ -2127,12 +2498,12 @@ function DataGrid({
                 )
               }
             ),
-            showSelectionColumn && /* @__PURE__ */ jsx19(
+            showSelectionColumn && /* @__PURE__ */ jsx26(
               "td",
               {
                 className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
-                children: /* @__PURE__ */ jsx19(
+                children: /* @__PURE__ */ jsx26(
                   "input",
                   {
                     type: "checkbox",
@@ -2146,45 +2517,56 @@ 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__ */ jsx26("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__ */ jsx26(
               "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__ */ jsx26(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__ */ jsx26("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx26("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("td", { colSpan: totalColumnCount, className: "border-b bg-muted/50 p-2 font-medium", children: /* @__PURE__ */ jsxs12(
-        "button",
+    return /* @__PURE__ */ jsxs17(Fragment2, { children: [
+      /* @__PURE__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx26(
+        "td",
         {
-          type: "button",
-          className: "flex w-full items-center gap-1 text-left",
-          onClick: () => toggleGroupExpanded(bucket.key),
-          "aria-expanded": expanded,
-          children: [
-            /* @__PURE__ */ jsx19(
-              ChevronRight,
-              {
-                className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
-                "aria-hidden": true
-              }
-            ),
-            renderGroupHeader ? renderGroupHeader(bucket.key, originalRows, expanded) : `${bucket.key} (${originalRows.length})`
-          ]
+          colSpan: totalColumnCount,
+          className: cn(
+            "sticky z-20 border-b p-2 font-medium",
+            zebra ? "bg-muted" : "bg-background"
+          ),
+          style: { top: groupHeaderTop },
+          children: /* @__PURE__ */ jsxs17(
+            "button",
+            {
+              type: "button",
+              className: "flex w-full items-center gap-1 text-left",
+              onClick: () => toggleGroupExpanded(bucket.key),
+              "aria-expanded": expanded,
+              children: [
+                /* @__PURE__ */ jsx26(
+                  ChevronRight,
+                  {
+                    className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
+                    "aria-hidden": true
+                  }
+                ),
+                renderGroupHeader ? renderGroupHeader(bucket.key, originalRows, expanded) : `${bucket.key} (${originalRows.length})`
+              ]
+            }
+          )
         }
-      ) }) }) }),
+      ) }) }),
       expanded && bucket.items.map((row) => renderRow(row))
     ] }, `group-${bucket.key}`);
   }
@@ -2201,32 +2583,81 @@ 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__ */ jsxs17("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
+      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          "data-testid": "datagrid-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__ */ jsxs17("span", { "aria-live": "polite", children: [
+              pendingEdits.size,
+              " row",
+              pendingEdits.size === 1 ? "" : "s",
+              " changed",
+              hasEditErrors && /* @__PURE__ */ jsxs17("span", { className: "ml-2 text-destructive", children: [
+                "Fix the highlighted errors before saving (",
+                describeErrorRows(editErrors),
+                ")."
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx26(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  "data-testid": "datagrid-discard-edits",
+                  disabled: editing.saving,
+                  onClick: handleDiscardEdits,
+                  children: resolveEditLabel(editing.discardLabel, pendingEdits.size, () => "Discard")
+                }
+              ),
+              /* @__PURE__ */ jsx26(
+                Button,
+                {
+                  type: "button",
+                  size: "sm",
+                  "data-testid": "datagrid-save-edits",
+                  disabled: editing.saving || hasEditErrors,
+                  onClick: () => void handleSaveEdits(),
+                  children: resolveEditLabel(
+                    editing.saveLabel,
+                    pendingEdits.size,
+                    (count) => `Save ${count} change${count === 1 ? "" : "s"}`
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs17("span", { children: [
           selectedRows.length,
           " selected"
         ] }),
-        /* @__PURE__ */ jsx19(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
+        /* @__PURE__ */ jsx26(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "relative min-h-0 flex-1", children: [
-        loading && /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsxs17("div", { className: "relative min-h-0 flex-1", children: [
+        loading && /* @__PURE__ */ jsx26(
           "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__ */ jsx26(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
           }
         ),
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx26(
           "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", { className: "bg-muted", children: [
+            children: /* @__PURE__ */ jsxs17("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
+              /* @__PURE__ */ jsxs17("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) {
@@ -2237,9 +2668,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__ */ jsxs17("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
+                      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
+                        sortable ? /* @__PURE__ */ jsxs17(
                           "button",
                           {
                             type: "button",
@@ -2247,8 +2678,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__ */ jsx26(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                              sortEntry?.dir === "desc" && /* @__PURE__ */ jsx26(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
                             ]
                           }
                         ) : (
@@ -2257,10 +2688,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__ */ jsx26("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__ */ jsxs17(Popover, { children: [
+                          /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx26(
                             FunnelIcon7,
                             {
                               className: cn(
@@ -2270,10 +2701,10 @@ function DataGrid({
                               "aria-hidden": true
                             }
                           ) }) }),
-                          /* @__PURE__ */ jsx19(PopoverContent, { children: renderFilterWidget(column) })
+                          /* @__PURE__ */ jsx26(PopoverContent, { children: renderFilterWidget(column) })
                         ] })
                       ] }),
-                      enableColumnResizing && /* @__PURE__ */ jsx19(
+                      enableColumnResizing && /* @__PURE__ */ jsx26(
                         "div",
                         {
                           "data-testid": `resize-handle-${column.id}`,
@@ -2284,9 +2715,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__ */ jsxs17(Fragment2, { children: [
+                    hasHeaderGroups && /* @__PURE__ */ jsxs17("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
+                      showDetailColumn && /* @__PURE__ */ jsx26(
                         "th",
                         {
                           rowSpan: 2,
@@ -2295,13 +2726,13 @@ function DataGrid({
                           "aria-hidden": true
                         }
                       ),
-                      showSelectionColumn && /* @__PURE__ */ jsx19(
+                      showSelectionColumn && /* @__PURE__ */ jsx26(
                         "th",
                         {
                           rowSpan: 2,
                           className: selectionHeaderCellProps.className,
                           style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx19(
+                          children: /* @__PURE__ */ jsx26(
                             "input",
                             {
                               type: "checkbox",
@@ -2313,7 +2744,7 @@ function DataGrid({
                         }
                       ),
                       headerRuns.map(
-                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx19(
+                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx26(
                           "th",
                           {
                             colSpan: run.columns.length,
@@ -2323,7 +2754,7 @@ function DataGrid({
                           `group-${run.label}-${run.columns[0].id}`
                         )
                       ),
-                      showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      showRowActionsColumn && /* @__PURE__ */ jsx26(
                         "th",
                         {
                           rowSpan: 2,
@@ -2333,8 +2764,8 @@ function DataGrid({
                         }
                       )
                     ] }, `${headerGroup.id}-groups`),
-                    /* @__PURE__ */ jsxs12("tr", { className: "divide-x divide-border", children: [
-                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx19(
+                    /* @__PURE__ */ jsxs17("tr", { className: "divide-x divide-border", children: [
+                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx26(
                         "th",
                         {
                           className: detailHeaderCellProps.className,
@@ -2342,12 +2773,12 @@ function DataGrid({
                           "aria-hidden": true
                         }
                       ),
-                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx19(
+                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx26(
                         "th",
                         {
                           className: selectionHeaderCellProps.className,
                           style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx19(
+                          children: /* @__PURE__ */ jsx26(
                             "input",
                             {
                               type: "checkbox",
@@ -2363,7 +2794,7 @@ function DataGrid({
                         if (!column || hasHeaderGroups && !column.headerGroup) return null;
                         return renderLeafHeaderCell(column);
                       }),
-                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx19(
+                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx26(
                         "th",
                         {
                           className: rowActionsHeaderCellProps.className,
@@ -2374,9 +2805,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__ */ jsxs17("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
+                  showDetailColumn && /* @__PURE__ */ jsx26("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
+                  showSelectionColumn && /* @__PURE__ */ jsx26(
                     "th",
                     {
                       className: selectionHeaderCellProps.className,
@@ -2385,9 +2816,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__ */ jsx26("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
                   }),
-                  showRowActionsColumn && /* @__PURE__ */ jsx19(
+                  showRowActionsColumn && /* @__PURE__ */ jsx26(
                     "th",
                     {
                       className: rowActionsHeaderCellProps.className,
@@ -2396,19 +2827,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__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs17(Fragment3, { children: [
+                paddingTop > 0 && /* @__PURE__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx26("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__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx26("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__ */ jsxs17("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs17("span", { children: [
           "Page ",
           state.page + 1,
           " of ",
@@ -2419,8 +2850,8 @@ function DataGrid({
           rowCount === 1 ? "" : "s",
           ")"
         ] }),
-        /* @__PURE__ */ jsxs12("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx26(
             Button,
             {
               variant: "outline",
@@ -2430,7 +2861,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx26(
             Button,
             {
               variant: "outline",
@@ -2611,7 +3042,7 @@ 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 jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
 function renderCell(column, row) {
@@ -2627,8 +3058,8 @@ function TreeCell({
   onToggle,
   onRetry
 }) {
-  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
-    flatRow.hasChildren ? /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
+    flatRow.hasChildren ? /* @__PURE__ */ jsx27(
       "button",
       {
         type: "button",
@@ -2640,14 +3071,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__ */ jsx27(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx27(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx27(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__ */ jsx27("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx27("span", { className: "truncate", children: renderCell(column, flatRow.row) }),
+    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs18("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx27(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__ */ jsx27("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
     ] }) : null
   ] });
 }
@@ -2754,7 +3185,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__ */ jsxs18(
       "tr",
       {
         ref: measureRef,
@@ -2767,9 +3198,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__ */ jsx27("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);
-            return /* @__PURE__ */ jsx20(
+            return /* @__PURE__ */ jsx27(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -2780,7 +3211,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          columns.map((column) => /* @__PURE__ */ jsx20("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx20(
+          columns.map((column) => /* @__PURE__ */ jsx27("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx27(
             TreeCell,
             {
               flatRow,
@@ -2792,7 +3223,7 @@ function TreeDataGrid({
               onRetry: () => retry(flatRow.row)
             }
           ) : renderCell(column, flatRow.row) }, column.id)),
-          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx20("td", { className: "p-2", children: /* @__PURE__ */ jsx20(
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx27("td", { className: "p-2", children: /* @__PURE__ */ jsx27(
             ActionsMenu,
             {
               items: rowActions,
@@ -2808,15 +3239,15 @@ 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(
+  return /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: /* @__PURE__ */ jsx27(
     "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(
+      children: /* @__PURE__ */ jsxs18("table", { className: "w-full border-collapse text-sm", children: [
+        /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsxs18("tr", { className: "divide-x divide-border", children: [
+          showSelectionColumn && /* @__PURE__ */ jsx27("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx27(
             Checkbox,
             {
               "aria-label": "Select all visible rows",
@@ -2824,7 +3255,7 @@ function TreeDataGrid({
               onCheckedChange: toggleAllVisibleSelected
             }
           ) }),
-          columns.map((column) => /* @__PURE__ */ jsx20(
+          columns.map((column) => /* @__PURE__ */ jsx27(
             "th",
             {
               style: column.width ? { width: column.width } : void 0,
@@ -2833,14 +3264,14 @@ function TreeDataGrid({
             },
             column.id
           )),
-          showRowActionsColumn && /* @__PURE__ */ jsx20("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
+          showRowActionsColumn && /* @__PURE__ */ jsx27("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 } }) }),
+        /* @__PURE__ */ jsx27("tbody", { children: flatRows.length === 0 ? /* @__PURE__ */ jsx27("tr", { children: /* @__PURE__ */ jsx27("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
+          paddingTop > 0 && /* @__PURE__ */ jsx27("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx27("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(
+          paddingBottom > 0 && /* @__PURE__ */ jsx27("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx27(
             "td",
             {
               colSpan: totalColumnCount,
@@ -2854,14 +3285,20 @@ function TreeDataGrid({
 }
 export {
   ActionsMenu,
+  BooleanEditor,
   BooleanFilter,
   ColumnSelector,
   DataGrid,
+  DateEditor,
   DateRangeFilter,
+  EditFieldError,
+  EnumEditor,
   EnumFilter,
   NumberComparisonFilter,
+  NumberEditor,
   NumberHistogramFilter,
   NumberRangeFilter,
+  StringEditor,
   StringFilter,
   TreeDataGrid,
   UNARY_OPERATORS,
@@ -2871,6 +3308,7 @@ export {
   countVisible,
   defaultAlign,
   defaultFormat,
+  editErrorId,
   evaluateFilter,
   facetedNumberValues,
   fieldKey,
@@ -2879,13 +3317,16 @@ export {
   groupColumns,
   isColumnVisible,
   isCompositeFilterDescriptor,
+  isEditable,
   isFilterDescriptor,
   isFilterable,
   isSortable,
   processClientData,
+  renderDefaultEditWidget,
   renderDefaultFilterWidget,
   resolveMenuItems,
   storageKeyFor,
+  toDate,
   useDebouncedCallback,
   useGridState,
   useTreeState