react-glide-table 2.0.1 → 2.0.2

package/README.md

@@ -74,7 +74,7 @@ export function Products({ data }: { data: Product[] }) {
 | `slots.Pending` / `slots.Empty`                      | Loading and empty states                                                          |
 | `className` / column `className` / `headerClassName` | Extra class hooks                                                                 |
 | `labels` / `summary` / `toolbar`                     | Copy and slot nodes                                                               |
-| `Column.render`                                      | Cell content custom render (single context object; prefer `update`)               |
+| `Column.render` / `ColumnDef.cell`                   | Cell content custom render (prefer `update` via context)                          |
 | `Column.kind` / `cellRenderers`                      | Built-in or custom cell kinds (override / add via registry)                       |
 
 Row/cell **state** is exposed as `data-*` attributes for Tailwind variants:
@@ -105,7 +105,25 @@ Row-level UI → `slots.Row`. Cell content → `Column.render` or `Column.kind`.
 
 `update` commits through `onCellChange` (preferred) or `onDataChange`. Prefer `update` over calling `setData` inside the render.
 
-Double-click inline editing (`editable` / `editType`) stays separate: use it for overlay text/number edits; use `render` + `update` for always-visible controls.
+The same `update` is available on TanStack `ColumnDef.cell` when using `DataTable` directly (or `useGlideTable().getCellContext` with `flexRender`). Bare `cell.getContext()` does **not** include `update` at runtime — only the wrapped context does (`CellContextWithUpdate`).
+
+```tsx
+const columns: ColumnDef<Product, unknown>[] = [
+  {
+    accessorKey: "status",
+    header: "Status",
+    cell: ({ getValue, update }) => (
+      <button type="button" onClick={() => update?.("done")}>
+        {String(getValue())}
+      </button>
+    ),
+  },
+];
+
+<DataTable data={data} columns={columns} onCellChange={...} />
+```
+
+Double-click inline editing (`editable` / `editType`) stays separate: use it for overlay text/number edits; use `render` / `cell` + `update` for always-visible controls.
 
 ### Cell kinds (`Column.kind` + `cellRenderers`)
 
@@ -148,15 +166,26 @@ type Product = { id: string; name: string; qty: number };
 
 const columns: ColumnDef<Product, unknown>[] = [
   { accessorKey: "name", header: "Name" },
-  { accessorKey: "qty", header: "Qty" },
+  {
+    accessorKey: "qty",
+    header: "Qty",
+    cell: ({ getValue, update }) => (
+      <button type="button" onClick={() => update?.(Number(getValue()) + 1)}>
+        {String(getValue())}
+      </button>
+    ),
+  },
 ];
 
 export function ProductTable({ data }: { data: Product[] }) {
-  const { table, rows, scrollRef } = useGlideTable({
+  const { table, rows, scrollRef, getCellContext } = useGlideTable({
     data,
     columns,
     getRowId: (row) => row.id,
     rowSelectionMode: "multi",
+    onCellChange: (rowId, columnId, value) => {
+      /* update your data */
+    },
   });
 
   return (
@@ -183,7 +212,7 @@ export function ProductTable({ data }: { data: Product[] }) {
             <tr key={row.id}>
               {row.getVisibleCells().map((cell) => (
                 <td key={cell.id}>
-                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  {flexRender(cell.column.columnDef.cell, getCellContext(cell))}
                 </td>
               ))}
             </tr>
@@ -195,7 +224,7 @@ export function ProductTable({ data }: { data: Product[] }) {
 }
 ```
 
-Wire `rowContextValue` into your own row/cell components for edit, selection, expand, and row-span behavior.
+Wire `rowContextValue` into your own row/cell components for edit, selection, expand, and row-span behavior. Use `getCellContext(cell)` (not bare `cell.getContext()`) so `ColumnDef.cell` receives `update`.
 
 ## Clipboard copy & paste
 

package/dist/compound.cjs

@@ -100,6 +100,16 @@ function getCellEditDraftValue(value) {
   return String(value);
 }
 
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/cellSelection.ts
 var INITIAL_DRAG_STATE = {
   isSelecting: false,
@@ -1130,6 +1140,7 @@ function DataTableRow({
     selection,
     cellSelection,
     cellEdit,
+    cellRender,
     expand,
     columnResize,
     columnFreeze,
@@ -1167,6 +1178,10 @@ function DataTableRow({
     onCommitEdit,
     onCancelEdit
   } = cellEdit;
+  const renderCell = (tableCell) => (0, import_react_table.flexRender)(
+    tableCell.column.columnDef.cell,
+    withCellUpdate(tableCell.getContext(), cellRender.commitValue)
+  );
   const {
     enableExpand,
     toggleField,
@@ -1479,7 +1494,7 @@ function DataTableRow({
                             "expand-cell-value",
                             classNames?.expandCellValue
                           ),
-                          children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                          children: renderCell(cell)
                         }
                       )
                     ]
@@ -1518,7 +1533,7 @@ function DataTableRow({
                     )
                   }
                 )
-              ] }) : (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
+              ] }) : renderCell(cell),
               isBottomRightCell && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "div",
                 {
@@ -3256,6 +3271,10 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
+  const getCellContext = (0, import_react7.useCallback)(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = (0, import_react7.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -3588,6 +3607,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,

package/dist/compound.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { l as DataTableProps, r as TableColumnProps, T as TableColumnGroupProps, s as TableProps } from './types-DJOlsDL8.cjs';
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, f as ColumnFreezeMeta, h as ColumnFreezeSide, i as DataTableClassNames, k as DataTableLabels, m as DataTableScrollSlotProps, n as DataTableSlots, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, p as SearchResultItem } from './types-DJOlsDL8.cjs';
+import { l as DataTableProps, r as TableColumnProps, T as TableColumnGroupProps, s as TableProps } from './types-bgEceyRV.cjs';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, f as ColumnFreezeMeta, h as ColumnFreezeSide, i as DataTableClassNames, k as DataTableLabels, m as DataTableScrollSlotProps, n as DataTableSlots, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, p as SearchResultItem } from './types-bgEceyRV.cjs';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**

package/dist/compound.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { l as DataTableProps, r as TableColumnProps, T as TableColumnGroupProps, s as TableProps } from './types-DJOlsDL8.js';
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, f as ColumnFreezeMeta, h as ColumnFreezeSide, i as DataTableClassNames, k as DataTableLabels, m as DataTableScrollSlotProps, n as DataTableSlots, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, p as SearchResultItem } from './types-DJOlsDL8.js';
+import { l as DataTableProps, r as TableColumnProps, T as TableColumnGroupProps, s as TableProps } from './types-bgEceyRV.js';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, f as ColumnFreezeMeta, h as ColumnFreezeSide, i as DataTableClassNames, k as DataTableLabels, m as DataTableScrollSlotProps, n as DataTableSlots, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, p as SearchResultItem } from './types-bgEceyRV.js';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 
 /**

package/dist/compound.js

@@ -72,6 +72,16 @@ function getCellEditDraftValue(value) {
   return String(value);
 }
 
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/cellSelection.ts
 var INITIAL_DRAG_STATE = {
   isSelecting: false,
@@ -1102,6 +1112,7 @@ function DataTableRow({
     selection,
     cellSelection,
     cellEdit,
+    cellRender,
     expand,
     columnResize,
     columnFreeze,
@@ -1139,6 +1150,10 @@ function DataTableRow({
     onCommitEdit,
     onCancelEdit
   } = cellEdit;
+  const renderCell = (tableCell) => flexRender(
+    tableCell.column.columnDef.cell,
+    withCellUpdate(tableCell.getContext(), cellRender.commitValue)
+  );
   const {
     enableExpand,
     toggleField,
@@ -1451,7 +1466,7 @@ function DataTableRow({
                             "expand-cell-value",
                             classNames?.expandCellValue
                           ),
-                          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          children: renderCell(cell)
                         }
                       )
                     ]
@@ -1490,7 +1505,7 @@ function DataTableRow({
                     )
                   }
                 )
-              ] }) : flexRender(cell.column.columnDef.cell, cell.getContext()),
+              ] }) : renderCell(cell),
               isBottomRightCell && /* @__PURE__ */ jsx3(
                 "div",
                 {
@@ -3246,6 +3261,10 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
+  const getCellContext = useCallback4(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = useCallback4(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -3578,6 +3597,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,

package/dist/core.cjs

@@ -91,6 +91,7 @@ __export(core_exports, {
   useConvertTreeData: () => useConvertTreeData,
   useGlideTable: () => useGlideTable,
   useInlineSearch: () => useInlineSearch,
+  withCellUpdate: () => withCellUpdate,
   writeSelectionToClipboard: () => writeSelectionToClipboard
 });
 module.exports = __toCommonJS(core_exports);
@@ -506,6 +507,16 @@ function formatDefaultCellValue(value) {
   return String(value);
 }
 
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 var import_react2 = require("react");
 
@@ -2485,6 +2496,10 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
+  const getCellContext = (0, import_react5.useCallback)(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2817,6 +2832,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,
@@ -2970,5 +2986,6 @@ function getColumnSizeStyle(size, options) {
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,
+  withCellUpdate,
   writeSelectionToClipboard
 });

package/dist/core.d.cts

@@ -1,6 +1,6 @@
-import { W as CellEditType, c as CellRenderer, C as CellKind, a as CellRenderContext, i as DataTableClassNames, R as RowSelectionMode, g as ColumnFreezeOffset, p as SearchResultItem, q as SearchStatus, l as DataTableProps, k as DataTableLabels, j as DataTableCopyActions, P as PasteMode, o as RowsPastePayload } from './types-DJOlsDL8.cjs';
-export { B as BuiltinCellKind, b as CellRenderFn, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-DJOlsDL8.cjs';
-import { Row, ColumnDef, Table, CellContext, Updater, RowSelectionState } from '@tanstack/react-table';
+import { W as CellEditType, c as CellRenderer, C as CellKind, a as CellRenderContext, i as DataTableClassNames, R as RowSelectionMode, g as ColumnFreezeOffset, p as SearchResultItem, q as SearchStatus, l as DataTableProps, k as DataTableLabels, j as DataTableCopyActions, P as PasteMode, o as RowsPastePayload } from './types-bgEceyRV.cjs';
+export { B as BuiltinCellKind, b as CellRenderFn, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-bgEceyRV.cjs';
+import { Row, ColumnDef, CellContext, Table, Cell, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import * as react from 'react';
@@ -197,6 +197,19 @@ type DataTableRowContextValue = {
     };
 };
 
+/**
+ * TanStack `CellContext` with a guaranteed `update` commit helper.
+ * Prefer this over bare `cell.getContext()`, which does not include `update` at runtime.
+ */
+type CellContextWithUpdate<TData, TValue> = CellContext<TData, TValue> & {
+    update: (next: TValue) => void;
+};
+/**
+ * Injects `update` into a TanStack `CellContext` so `ColumnDef.cell` can commit
+ * through `onCellChange` / `onDataChange` the same way compound `Column.render` does.
+ */
+declare function withCellUpdate<TData extends Record<string, unknown>, TValue>(context: CellContext<TData, TValue>, commitValue: (rowId: string, columnId: string, value: unknown) => boolean): CellContextWithUpdate<TData, TValue>;
+
 type UseInlineSearchOptions = {
     enabled?: boolean;
     rowCount: number;
@@ -258,6 +271,11 @@ type UseGlideTableResult<T extends Record<string, unknown>> = {
     paddingTop: number;
     paddingBottom: number;
     rowContextValue: DataTableRowContextValue;
+    /**
+     * TanStack `CellContext` with `update` injected for custom `ColumnDef.cell` renders.
+     * Prefer this over `cell.getContext()` when calling `flexRender` yourself.
+     */
+    getCellContext: <TValue>(cell: Cell<T, TValue>) => CellContextWithUpdate<T, TValue>;
     handleToggleSelect: (row: Row<T>) => void;
     clearHover: () => void;
     copySelection: DataTableCopyActions["copySelection"];
@@ -445,4 +463,4 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
 declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
 declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
 
-export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellKind, CellRenderContext, CellRenderer, type CellRendererRegistry, type CellSelectionBounds, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, ResolvedTableCell, RowSelectionMode, type RowSpanInfo, RowsPastePayload, SearchResultItem, SearchStatus, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, type UseInlineSearchOptions, type UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard };
+export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, type CellContextWithUpdate, CellKind, CellRenderContext, CellRenderer, type CellRendererRegistry, type CellSelectionBounds, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, ResolvedTableCell, RowSelectionMode, type RowSpanInfo, RowsPastePayload, SearchResultItem, SearchStatus, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, type UseInlineSearchOptions, type UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, withCellUpdate, writeSelectionToClipboard };

package/dist/core.d.ts

@@ -1,6 +1,6 @@
-import { W as CellEditType, c as CellRenderer, C as CellKind, a as CellRenderContext, i as DataTableClassNames, R as RowSelectionMode, g as ColumnFreezeOffset, p as SearchResultItem, q as SearchStatus, l as DataTableProps, k as DataTableLabels, j as DataTableCopyActions, P as PasteMode, o as RowsPastePayload } from './types-DJOlsDL8.js';
-export { B as BuiltinCellKind, b as CellRenderFn, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-DJOlsDL8.js';
-import { Row, ColumnDef, Table, CellContext, Updater, RowSelectionState } from '@tanstack/react-table';
+import { W as CellEditType, c as CellRenderer, C as CellKind, a as CellRenderContext, i as DataTableClassNames, R as RowSelectionMode, g as ColumnFreezeOffset, p as SearchResultItem, q as SearchStatus, l as DataTableProps, k as DataTableLabels, j as DataTableCopyActions, P as PasteMode, o as RowsPastePayload } from './types-bgEceyRV.js';
+export { B as BuiltinCellKind, b as CellRenderFn, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-bgEceyRV.js';
+import { Row, ColumnDef, CellContext, Table, Cell, Updater, RowSelectionState } from '@tanstack/react-table';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import * as react from 'react';
@@ -197,6 +197,19 @@ type DataTableRowContextValue = {
     };
 };
 
+/**
+ * TanStack `CellContext` with a guaranteed `update` commit helper.
+ * Prefer this over bare `cell.getContext()`, which does not include `update` at runtime.
+ */
+type CellContextWithUpdate<TData, TValue> = CellContext<TData, TValue> & {
+    update: (next: TValue) => void;
+};
+/**
+ * Injects `update` into a TanStack `CellContext` so `ColumnDef.cell` can commit
+ * through `onCellChange` / `onDataChange` the same way compound `Column.render` does.
+ */
+declare function withCellUpdate<TData extends Record<string, unknown>, TValue>(context: CellContext<TData, TValue>, commitValue: (rowId: string, columnId: string, value: unknown) => boolean): CellContextWithUpdate<TData, TValue>;
+
 type UseInlineSearchOptions = {
     enabled?: boolean;
     rowCount: number;
@@ -258,6 +271,11 @@ type UseGlideTableResult<T extends Record<string, unknown>> = {
     paddingTop: number;
     paddingBottom: number;
     rowContextValue: DataTableRowContextValue;
+    /**
+     * TanStack `CellContext` with `update` injected for custom `ColumnDef.cell` renders.
+     * Prefer this over `cell.getContext()` when calling `flexRender` yourself.
+     */
+    getCellContext: <TValue>(cell: Cell<T, TValue>) => CellContextWithUpdate<T, TValue>;
     handleToggleSelect: (row: Row<T>) => void;
     clearHover: () => void;
     copySelection: DataTableCopyActions["copySelection"];
@@ -445,4 +463,4 @@ declare const useConvertTreeData: <T extends Record<string, unknown>>({ data, en
 declare function resolveRowSelection(mode: RowSelectionMode, controlledSelection: RowSelectionState | undefined, internalSelection: RowSelectionState): RowSelectionState;
 declare function applySelectionUpdater(mode: RowSelectionMode, updater: Updater<RowSelectionState>, previous: RowSelectionState): RowSelectionState;
 
-export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellKind, CellRenderContext, CellRenderer, type CellRendererRegistry, type CellSelectionBounds, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, ResolvedTableCell, RowSelectionMode, type RowSpanInfo, RowsPastePayload, SearchResultItem, SearchStatus, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, type UseInlineSearchOptions, type UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard };
+export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, type CellContextWithUpdate, CellKind, CellRenderContext, CellRenderer, type CellRendererRegistry, type CellSelectionBounds, ColumnFreezeOffset, type ColumnRowSpanMap, type CopyRowEntry, type CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DataTableCopyActions, DataTableLabels, DataTableProps, type DragState, type EditingCell, PasteMode, ResolvedTableCell, RowSelectionMode, type RowSpanInfo, RowsPastePayload, SearchResultItem, SearchStatus, type TreeRow, type UseConvertTreeDataParams, type UseGlideTableOptions, type UseGlideTableResult, type UseInlineSearchOptions, type UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, withCellUpdate, writeSelectionToClipboard };

package/dist/core.js

@@ -420,6 +420,16 @@ function formatDefaultCellValue(value) {
   return String(value);
 }
 
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
@@ -2406,6 +2416,10 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
+  const getCellContext = useCallback4(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = useCallback4(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2738,6 +2752,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,
@@ -2890,5 +2905,6 @@ export {
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,
+  withCellUpdate,
   writeSelectionToClipboard
 };

package/dist/index.cjs

@@ -94,6 +94,7 @@ __export(src_exports, {
   useConvertTreeData: () => useConvertTreeData,
   useGlideTable: () => useGlideTable,
   useInlineSearch: () => useInlineSearch,
+  withCellUpdate: () => withCellUpdate,
   writeSelectionToClipboard: () => writeSelectionToClipboard
 });
 module.exports = __toCommonJS(src_exports);
@@ -518,6 +519,16 @@ function formatDefaultCellValue(value) {
   return String(value);
 }
 
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 var import_react2 = require("react");
 
@@ -2497,6 +2508,10 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
+  const getCellContext = (0, import_react5.useCallback)(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2829,6 +2844,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,
@@ -3110,6 +3126,7 @@ function DataTableRow({
     selection,
     cellSelection,
     cellEdit,
+    cellRender,
     expand,
     columnResize,
     columnFreeze,
@@ -3147,6 +3164,10 @@ function DataTableRow({
     onCommitEdit,
     onCancelEdit
   } = cellEdit;
+  const renderCell = (tableCell) => (0, import_react_table2.flexRender)(
+    tableCell.column.columnDef.cell,
+    withCellUpdate(tableCell.getContext(), cellRender.commitValue)
+  );
   const {
     enableExpand,
     toggleField,
@@ -3459,7 +3480,7 @@ function DataTableRow({
                             "expand-cell-value",
                             classNames?.expandCellValue
                           ),
-                          children: (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                          children: renderCell(cell)
                         }
                       )
                     ]
@@ -3498,7 +3519,7 @@ function DataTableRow({
                     )
                   }
                 )
-              ] }) : (0, import_react_table2.flexRender)(cell.column.columnDef.cell, cell.getContext()),
+              ] }) : renderCell(cell),
               isBottomRightCell && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "div",
                 {
@@ -4551,5 +4572,6 @@ var Table = Object.assign(TableRoot, {
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,
+  withCellUpdate,
   writeSelectionToClipboard
 });

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-DJOlsDL8.cjs';
-export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellRendererRegistry, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard } from './core.cjs';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-bgEceyRV.cjs';
+export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellContextWithUpdate, CellRendererRegistry, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, withCellUpdate, writeSelectionToClipboard } from './core.cjs';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.cjs';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import 'react';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-DJOlsDL8.js';
-export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellRendererRegistry, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard } from './core.js';
+export { B as BuiltinCellKind, C as CellKind, a as CellRenderContext, b as CellRenderFn, c as CellRenderer, d as ColumnFreezeColumnInput, e as ColumnFreezeEdgeSide, f as ColumnFreezeMeta, g as ColumnFreezeOffset, h as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, i as DataTableClassNames, j as DataTableCopyActions, k as DataTableLabels, l as DataTableProps, m as DataTableScrollSlotProps, n as DataTableSlots, I as INLINE_SEARCH_MAX_RESULTS, P as PasteMode, R as RowSelectionMode, o as RowsPastePayload, S as SearchCorpusRow, p as SearchResultItem, q as SearchStatus, T as TableColumnGroupProps, r as TableColumnProps, s as TableProps, t as buildColumnFreezeOffsets, u as buildFlatSearchCorpus, v as buildSearchMatchKey, w as buildSearchMatchKeys, x as buildTreeSearchCorpus, y as cellValueToSearchText, z as collectAncestorKeysToExpand, A as collectSearchMatchesInRange, E as createSearchRegex, F as escapeSearchRegex, G as formatSearchResultLabel, H as getColumnFreezeEdgeAttr, J as getColumnFreezeStyle, K as mapSearchResultToVisibleItem, L as mapSearchResultsToVisibleKeys, M as nextSearchIndex, N as nextSearchStride, O as previousSearchIndex, Q as resolveColumnFreezeSide, U as resolveDataTableLabels, V as resolveHeaderFreezeOffset } from './types-bgEceyRV.js';
+export { BUILTIN_CELL_RENDERERS, CELL_SELECTION_EDGES_CLASS, CellContextWithUpdate, CellRendererRegistry, CellSelectionBounds, ColumnRowSpanMap, CopyRowEntry, CopySelectionMode, DEFAULT_TREE_CHILDREN_FIELD, DEFAULT_TREE_ID_FIELD, DEFAULT_TREE_PARENT_ID_FIELD, DEFAULT_TREE_QTY_FIELD, DragState, EditingCell, ResolvedTableCell, RowSpanInfo, TreeRow, UseConvertTreeDataParams, UseGlideTableOptions, UseGlideTableResult, UseInlineSearchOptions, UseInlineSearchResult, applyCellEdit, applyFillData, applySelectionUpdater, buildColumnRowSpanMap, buildRowsPastePayload, canExpandRow, collectCopyRowEntries, collectCopyRows, collectFillChanges, collectRowSpanColumns, commitCellValue, createCellRendererRegistry, flattenSubtreeRows, formatCellValue, formatDefaultCellValue, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolveCellRenderer, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, withCellUpdate, writeSelectionToClipboard } from './core.js';
 export { DataTable, Table, TableCompoundComponent, createTable } from './compound.js';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import 'react';

package/dist/index.js

@@ -429,6 +429,16 @@ function formatDefaultCellValue(value) {
   return String(value);
 }
 
+// src/components/ui/table/features/cell-render/withCellUpdate.ts
+function withCellUpdate(context, commitValue) {
+  return {
+    ...context,
+    update: (next) => {
+      commitValue(context.row.id, context.column.id, next);
+    }
+  };
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
@@ -2415,6 +2425,10 @@ function useGlideTable(options) {
     }),
     [onCellChange, onDataChange, rows, tableData]
   );
+  const getCellContext = useCallback4(
+    (cell) => withCellUpdate(cell.getContext(), commitRenderedCellValue),
+    [commitRenderedCellValue]
+  );
   const handleCellMouseDownWithCommit = useCallback4(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2747,6 +2761,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,
@@ -3028,6 +3043,7 @@ function DataTableRow({
     selection,
     cellSelection,
     cellEdit,
+    cellRender,
     expand,
     columnResize,
     columnFreeze,
@@ -3065,6 +3081,10 @@ function DataTableRow({
     onCommitEdit,
     onCancelEdit
   } = cellEdit;
+  const renderCell = (tableCell) => flexRender(
+    tableCell.column.columnDef.cell,
+    withCellUpdate(tableCell.getContext(), cellRender.commitValue)
+  );
   const {
     enableExpand,
     toggleField,
@@ -3377,7 +3397,7 @@ function DataTableRow({
                             "expand-cell-value",
                             classNames?.expandCellValue
                           ),
-                          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          children: renderCell(cell)
                         }
                       )
                     ]
@@ -3416,7 +3436,7 @@ function DataTableRow({
                     )
                   }
                 )
-              ] }) : flexRender(cell.column.columnDef.cell, cell.getContext()),
+              ] }) : renderCell(cell),
               isBottomRightCell && /* @__PURE__ */ jsx4(
                 "div",
                 {
@@ -4468,5 +4488,6 @@ export {
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,
+  withCellUpdate,
   writeSelectionToClipboard
 };

package/dist/{types-DJOlsDL8.d.cts → types-bgEceyRV.d.cts}

@@ -207,6 +207,15 @@ declare module "@tanstack/react-table" {
          */
         frozen?: ColumnFreezeMeta;
     }
+    interface CellContext<TData, TValue> {
+        /**
+         * Commit a cell value through `onCellChange` / `onDataChange`.
+         * Present at runtime only when the context was wrapped by `DataTable`,
+         * `withCellUpdate`, or `useGlideTable().getCellContext` — not on bare
+         * `cell.getContext()`. Prefer those helpers for a guaranteed `update`.
+         */
+        update?: (next: TValue) => void;
+    }
     interface Row<TData> {
         /**
          * Returns whether this row's cell is inside the active drag selection.

package/dist/{types-DJOlsDL8.d.ts → types-bgEceyRV.d.ts}

@@ -207,6 +207,15 @@ declare module "@tanstack/react-table" {
          */
         frozen?: ColumnFreezeMeta;
     }
+    interface CellContext<TData, TValue> {
+        /**
+         * Commit a cell value through `onCellChange` / `onDataChange`.
+         * Present at runtime only when the context was wrapped by `DataTable`,
+         * `withCellUpdate`, or `useGlideTable().getCellContext` — not on bare
+         * `cell.getContext()`. Prefer those helpers for a guaranteed `update`.
+         */
+        update?: (next: TValue) => void;
+    }
     interface Row<TData> {
         /**
          * Returns whether this row's cell is inside the active drag selection.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-glide-table",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/zpxlffjrm/react-glide-table.git"