react-glide-table 1.7.0 → 2.0.1

package/dist/core.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/core/index.ts
 var core_exports = {};
 __export(core_exports, {
+  BUILTIN_CELL_RENDERERS: () => BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS: () => CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS: () => DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD: () => DEFAULT_TREE_CHILDREN_FIELD,
@@ -27,6 +28,7 @@ __export(core_exports, {
   DEFAULT_TREE_PARENT_ID_FIELD: () => DEFAULT_TREE_PARENT_ID_FIELD,
   DEFAULT_TREE_QTY_FIELD: () => DEFAULT_TREE_QTY_FIELD,
   INLINE_SEARCH_MAX_RESULTS: () => INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell: () => ResolvedTableCell,
   applyCellEdit: () => applyCellEdit,
   applyFillData: () => applyFillData,
   applySelectionUpdater: () => applySelectionUpdater,
@@ -45,9 +47,13 @@ __export(core_exports, {
   collectFillChanges: () => collectFillChanges,
   collectRowSpanColumns: () => collectRowSpanColumns,
   collectSearchMatchesInRange: () => collectSearchMatchesInRange,
+  commitCellValue: () => commitCellValue,
+  createCellRendererRegistry: () => createCellRendererRegistry,
   createSearchRegex: () => createSearchRegex,
   escapeSearchRegex: () => escapeSearchRegex,
   flattenSubtreeRows: () => flattenSubtreeRows,
+  formatCellValue: () => formatCellValue,
+  formatDefaultCellValue: () => formatDefaultCellValue,
   formatSearchResultLabel: () => formatSearchResultLabel,
   getCellEditDraftValue: () => getCellEditDraftValue,
   getCellSelectionEdgeStyle: () => getCellSelectionEdgeStyle,
@@ -69,8 +75,10 @@ __export(core_exports, {
   parseClipboardTSV: () => parseClipboardTSV,
   parseClipboardTSVWithDepths: () => parseClipboardTSVWithDepths,
   previousSearchIndex: () => previousSearchIndex,
+  resolveCellRenderer: () => resolveCellRenderer,
   resolveColumnFreezeSide: () => resolveColumnFreezeSide,
   resolveDataTableLabels: () => resolveDataTableLabels,
+  resolveHeaderFreezeOffset: () => resolveHeaderFreezeOffset,
   resolvePasteColumnIds: () => resolvePasteColumnIds,
   resolveRowSelection: () => resolveRowSelection,
   resolveRowSpanAt: () => resolveRowSpanAt,
@@ -175,6 +183,37 @@ function applyCellEdit(data, rows, rowIndex, colIndex, raw) {
   return newData;
 }
 
+// src/components/ui/table/features/cell-render/commitCellValue.ts
+function commitCellValue({
+  data,
+  rows,
+  rowId,
+  columnId,
+  value,
+  onCellChange,
+  onDataChange
+}) {
+  if (!onCellChange && !onDataChange) return true;
+  if (onCellChange) {
+    onCellChange(rowId, columnId, value);
+    return true;
+  }
+  const row = rows.find((item) => item.id === rowId);
+  if (!row) return false;
+  const cell = row.getAllCells().find((item) => item.column.id === columnId) ?? row.getVisibleCells().find((item) => item.column.id === columnId);
+  if (!cell) return false;
+  const accessorKey = getColumnAccessorKey(cell.column.columnDef);
+  if (!accessorKey) return false;
+  const dataIndex = row.index;
+  if (dataIndex < 0 || dataIndex >= data.length) return false;
+  const next = data.map((item) => ({ ...item }));
+  const target = next[dataIndex];
+  if (!target) return false;
+  target[accessorKey] = value;
+  onDataChange?.(next);
+  return true;
+}
+
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 function useCellEdit({
   data,
@@ -210,21 +249,23 @@ function useCellEdit({
         cancelEdit();
         return true;
       }
-      const value = raw ?? draftValueRef.current;
       if (!isColumnEditable(cell.column.columnDef)) {
         cancelEdit();
         return true;
       }
+      const value = raw ?? draftValueRef.current;
       const parsed = parseCellEditValue(value, getColumnEditType(cell.column.columnDef));
       if (!parsed.ok) return false;
-      if (onCellChange) {
-        onCellChange(row.id, cell.column.id, parsed.value);
-        cancelEdit();
-        return true;
-      }
-      const next = applyCellEdit(data, rows, current.rowIndex, current.colIndex, value);
-      if (!next) return false;
-      onDataChange?.(next);
+      const committed = commitCellValue({
+        data,
+        rows,
+        rowId: row.id,
+        columnId: cell.column.id,
+        value: parsed.value,
+        onCellChange,
+        onDataChange
+      });
+      if (!committed) return false;
       cancelEdit();
       return true;
     },
@@ -253,6 +294,218 @@ function useCellEdit({
   };
 }
 
+// src/components/ui/table/features/cell-render/builtins.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function asString(value) {
+  if (value == null) return "";
+  return String(value);
+}
+function asStringList(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => asString(item)).filter(Boolean);
+  }
+  if (value == null || value === "") return [];
+  return [asString(value)];
+}
+function asDrilldownItems(value) {
+  if (!Array.isArray(value)) return [];
+  return value.flatMap((item) => {
+    if (item == null) return [];
+    if (typeof item === "string") return [{ text: item }];
+    if (typeof item === "object") {
+      const record = item;
+      const text = asString(record.text ?? record.label ?? "");
+      if (!text) return [];
+      const img = record.img ?? record.image;
+      return [{ text, ...typeof img === "string" ? { img } : {} }];
+    }
+    return [{ text: asString(item) }];
+  });
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function simpleMarkdownToHtml(source) {
+  const escaped = escapeHtml(source);
+  return escaped.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*]+)\*/g, "<em>$1</em>").replace(/\n/g, "<br />");
+}
+function TextCell({ value }) {
+  return asString(value);
+}
+function NumberCell({ value }) {
+  if (value == null || value === "") return null;
+  return asString(value);
+}
+function BooleanCell({ value, update, cellProps }) {
+  const checked = Boolean(value);
+  const readonly = Boolean(cellProps?.readonly);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      type: "checkbox",
+      className: "data-table-cell-boolean",
+      checked,
+      disabled: readonly,
+      "aria-checked": checked,
+      onChange: (event) => {
+        if (readonly) return;
+        update(event.target.checked);
+      },
+      onClick: (event) => {
+        event.stopPropagation();
+      },
+      onMouseDown: (event) => {
+        event.stopPropagation();
+      }
+    }
+  );
+}
+function sanitizeUriHref(raw) {
+  const href = raw.trim();
+  if (!href) return null;
+  if (href.startsWith("/") || href.startsWith("#") || href.startsWith("?") || href.startsWith("./") || href.startsWith("../")) {
+    return href;
+  }
+  try {
+    const parsed = new URL(href);
+    const protocol = parsed.protocol.toLowerCase();
+    if (protocol === "http:" || protocol === "https:" || protocol === "mailto:") {
+      return href;
+    }
+    return null;
+  } catch {
+    if (/^[a-z][a-z0-9+.-]*:/i.test(href)) return null;
+    return href;
+  }
+}
+function UriCell({ value }) {
+  const raw = asString(value);
+  if (!raw) return null;
+  const href = sanitizeUriHref(raw);
+  if (!href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-uri", children: raw });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: "data-table-cell-uri",
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      onClick: (event) => event.stopPropagation(),
+      onMouseDown: (event) => event.stopPropagation(),
+      children: raw
+    }
+  );
+}
+function ImageCell({ value }) {
+  const urls = asStringList(value);
+  if (urls.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-image", children: urls.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "img",
+    {
+      src: url,
+      alt: "",
+      className: "data-table-cell-image-item"
+    },
+    `${index}:${url}`
+  )) });
+}
+function BubbleCell({ value }) {
+  const items = asStringList(value);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-bubble", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-bubble-item", children: item }, `${index}:${item}`)) });
+}
+function MarkdownCell({ value }) {
+  const source = asString(value);
+  if (!source) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "data-table-cell-markdown",
+      dangerouslySetInnerHTML: { __html: simpleMarkdownToHtml(source) }
+    }
+  );
+}
+function DrilldownCell({ value }) {
+  const items = asDrilldownItems(value);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-drilldown", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: "data-table-cell-drilldown-item",
+      children: [
+        item.img ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src: item.img,
+            alt: "",
+            className: "data-table-cell-drilldown-image"
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-drilldown-text", children: item.text })
+      ]
+    },
+    `${index}:${item.text}:${item.img ?? ""}`
+  )) });
+}
+function LoadingCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-loading", "aria-busy": "true" });
+}
+function ProtectedCell() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-protected", "aria-label": "protected", children: "****" });
+}
+function RowIdCell({ value }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "data-table-cell-row-id", children: asString(value) });
+}
+var BUILTIN_RENDER_MAP = {
+  text: TextCell,
+  number: NumberCell,
+  boolean: BooleanCell,
+  uri: UriCell,
+  image: ImageCell,
+  bubble: BubbleCell,
+  markdown: MarkdownCell,
+  drilldown: DrilldownCell,
+  loading: LoadingCell,
+  protected: ProtectedCell,
+  "row-id": RowIdCell
+};
+var BUILTIN_CELL_RENDERERS = Object.keys(BUILTIN_RENDER_MAP).map((kind) => ({
+  kind,
+  render: BUILTIN_RENDER_MAP[kind]
+}));
+
+// src/components/ui/table/features/cell-render/registry.ts
+function createCellRendererRegistry(customRenderers = []) {
+  const registry = /* @__PURE__ */ new Map();
+  for (const renderer of BUILTIN_CELL_RENDERERS) {
+    registry.set(renderer.kind, renderer);
+  }
+  for (const renderer of customRenderers) {
+    registry.set(renderer.kind, renderer);
+  }
+  return registry;
+}
+function resolveCellRenderer(registry, kind, ctx) {
+  if (!kind) return void 0;
+  const renderer = registry.get(kind);
+  if (!renderer) return void 0;
+  if (renderer.isMatch && !renderer.isMatch(ctx)) {
+    return void 0;
+  }
+  return renderer;
+}
+function formatDefaultCellValue(value) {
+  if (value == null) return null;
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "bigint") return value.toString();
+  return String(value);
+}
+
 // src/components/ui/table/features/cell-selection/useCellSelection.ts
 var import_react2 = require("react");
 
@@ -562,9 +815,34 @@ function hasCellSelectionEdges(style) {
 }
 
 // src/components/ui/table/features/cell-selection/copyData.ts
+function formatPrimitive(value) {
+  if (value === null || value === void 0) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") {
+    return String(value);
+  }
+  return "";
+}
+function formatObjectValue(value) {
+  const text = value.text ?? value.label ?? value.name ?? value.title;
+  if (text != null && text !== "") {
+    return formatCellValue(text);
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return "";
+  }
+}
 function formatCellValue(value) {
   if (value === null || value === void 0) return "";
-  return String(value);
+  if (Array.isArray(value)) {
+    return value.map((item) => formatCellValue(item)).filter((item) => item.length > 0).join(", ");
+  }
+  if (typeof value === "object") {
+    return formatObjectValue(value);
+  }
+  return formatPrimitive(value);
 }
 function getNestedValue(row, path) {
   if (!path.includes(".")) return row[path];
@@ -1188,10 +1466,40 @@ function getColumnFreezeStyle(offset, options) {
   return {
     position: "sticky",
     ...offset.side === "left" ? { left: offset.offset } : { right: offset.offset },
-    zIndex: zBase + offset.stack,
-    ...options?.isHeader ? { top: options.headerTop ?? 0 } : {}
+    zIndex: zBase + offset.stack
   };
 }
+function resolveHeaderFreezeOffset(column, freezeOffsets) {
+  const direct = freezeOffsets.get(column.id);
+  if (direct) return direct;
+  const leaves = typeof column.getLeafColumns === "function" ? column.getLeafColumns() : column.columns && column.columns.length > 0 ? flattenHeaderLeaves(column) : [];
+  if (leaves.length === 0) return void 0;
+  const leafOffsets = [];
+  for (const leaf of leaves) {
+    const offset2 = freezeOffsets.get(leaf.id);
+    if (!offset2) return void 0;
+    leafOffsets.push(offset2);
+  }
+  const side = leafOffsets[0]?.side;
+  if (!side || leafOffsets.some((offset2) => offset2.side !== side)) {
+    return void 0;
+  }
+  const offset = Math.min(...leafOffsets.map((item) => item.offset));
+  const leftmost = leafOffsets[0];
+  const rightmost = leafOffsets[leafOffsets.length - 1];
+  return {
+    side,
+    offset,
+    edgeLeft: leftmost.edgeLeft,
+    edgeRight: rightmost.edgeRight,
+    isEdge: leftmost.edgeLeft || rightmost.edgeRight,
+    stack: Math.max(...leafOffsets.map((item) => item.stack))
+  };
+}
+function flattenHeaderLeaves(column) {
+  if (!column.columns || column.columns.length === 0) return [column];
+  return column.columns.flatMap((child) => flattenHeaderLeaves(child));
+}
 
 // src/components/ui/table/features/inline-search/inlineSearch.ts
 var INLINE_SEARCH_MAX_RESULTS = 1e3;
@@ -1935,6 +2243,7 @@ function useGlideTable(options) {
     onDataChange,
     onCellChange,
     onBatchChange,
+    cellRenderers,
     preserveRowSelection = false,
     toggleField,
     childField,
@@ -2160,6 +2469,22 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
+  const cellRendererRegistry = (0, import_react5.useMemo)(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
+  const commitRenderedCellValue = (0, import_react5.useCallback)(
+    (rowId, columnId, value) => commitCellValue({
+      data: tableData,
+      rows,
+      rowId,
+      columnId,
+      value,
+      onCellChange,
+      onDataChange
+    }),
+    [onCellChange, onDataChange, rows, tableData]
+  );
   const handleCellMouseDownWithCommit = (0, import_react5.useCallback)(
     (rowIndex, colIndex, options2) => {
       const isSameEditingCell = editingCell?.rowIndex === rowIndex && editingCell?.colIndex === colIndex;
@@ -2396,6 +2721,10 @@ function useGlideTable(options) {
         onCommitEdit: commitEdit,
         onCancelEdit: cancelEdit
       },
+      cellRender: {
+        registry: cellRendererRegistry,
+        commitValue: commitRenderedCellValue
+      },
       expand: {
         enableExpand,
         toggleField,
@@ -2442,6 +2771,8 @@ function useGlideTable(options) {
     startEdit,
     commitEdit,
     cancelEdit,
+    cellRendererRegistry,
+    commitRenderedCellValue,
     enableExpand,
     toggleField,
     expandedRows,
@@ -2506,6 +2837,54 @@ function useGlideTable(options) {
   };
 }
 
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+var import_react7 = require("react");
+
+// src/components/ui/table/DataTableContext.tsx
+var import_react6 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DataTableContext = (0, import_react6.createContext)(null);
+function useDataTableRowContext() {
+  const context = (0, import_react6.use)(DataTableContext);
+  if (!context) {
+    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
+  }
+  return context;
+}
+
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+function ResolvedTableCell({
+  info
+}) {
+  const { cellRender } = useDataTableRowContext();
+  const { row, column, getValue } = info;
+  const meta = column.columnDef.meta;
+  const value = getValue();
+  const columnId = column.id;
+  const update = (0, import_react7.useCallback)(
+    (next) => {
+      cellRender.commitValue(row.id, columnId, next);
+    },
+    [cellRender, columnId, row.id]
+  );
+  const ctx = {
+    value,
+    row,
+    index: row.index,
+    columnId,
+    cellProps: meta?.cellProps,
+    update
+  };
+  if (meta?.cellRender) {
+    return meta.cellRender(ctx);
+  }
+  const renderer = resolveCellRenderer(cellRender.registry, meta?.kind, ctx);
+  if (renderer) {
+    return renderer.render(ctx);
+  }
+  return formatDefaultCellValue(value);
+}
+
 // src/components/ui/table/features/column-resize/columnResize.ts
 function getColumnSizeStyle(size, options) {
   const { force = false, lockMax = false } = options ?? {};
@@ -2520,6 +2899,7 @@ function getColumnSizeStyle(size, options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD,
@@ -2527,6 +2907,7 @@ function getColumnSizeStyle(size, options) {
   DEFAULT_TREE_PARENT_ID_FIELD,
   DEFAULT_TREE_QTY_FIELD,
   INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell,
   applyCellEdit,
   applyFillData,
   applySelectionUpdater,
@@ -2545,9 +2926,13 @@ function getColumnSizeStyle(size, options) {
   collectFillChanges,
   collectRowSpanColumns,
   collectSearchMatchesInRange,
+  commitCellValue,
+  createCellRendererRegistry,
   createSearchRegex,
   escapeSearchRegex,
   flattenSubtreeRows,
+  formatCellValue,
+  formatDefaultCellValue,
   formatSearchResultLabel,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
@@ -2569,8 +2954,10 @@ function getColumnSizeStyle(size, options) {
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
   previousSearchIndex,
+  resolveCellRenderer,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
+  resolveHeaderFreezeOffset,
   resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,

package/dist/core.d.cts

@@ -1,6 +1,6 @@
-import { M as CellEditType, e as DataTableClassNames, R as RowSelectionMode, c as ColumnFreezeOffset, l as SearchResultItem, m as SearchStatus, h as DataTableProps, g as DataTableLabels, f as DataTableCopyActions, P as PasteMode, k as RowsPastePayload } from './types-Cs9MiZs1.cjs';
-export { C as ColumnFreezeColumnInput, a as ColumnFreezeEdgeSide, b as ColumnFreezeMeta, d as ColumnFreezeSide, D as DEFAULT_DATA_TABLE_LABELS, I as INLINE_SEARCH_MAX_RESULTS, S as SearchCorpusRow, p as buildColumnFreezeOffsets, q as buildFlatSearchCorpus, r as buildSearchMatchKey, s as buildSearchMatchKeys, t as buildTreeSearchCorpus, u as cellValueToSearchText, v as collectAncestorKeysToExpand, w as collectSearchMatchesInRange, x as createSearchRegex, y as escapeSearchRegex, z as formatSearchResultLabel, A as getColumnFreezeEdgeAttr, B as getColumnFreezeStyle, E as mapSearchResultToVisibleItem, F as mapSearchResultsToVisibleKeys, G as nextSearchIndex, H as nextSearchStride, J as previousSearchIndex, K as resolveColumnFreezeSide, L as resolveDataTableLabels } from './types-Cs9MiZs1.cjs';
-import { Row, ColumnDef, Table, 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-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';
 export { ColumnDef, ColumnResizeMode, ColumnSizingState, RowSelectionState } from '@tanstack/react-table';
 import { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import * as react from 'react';
@@ -36,6 +36,12 @@ declare function getCellEditDraftValue(value: unknown): string;
 /** Returns updated data on success; null if parsing fails or the cell is not editable */
 declare function applyCellEdit<T extends Record<string, unknown>>(data: T[], rows: Row<T>[], rowIndex: number, colIndex: number, raw: string): T[] | null;
 
+type CellRendererRegistry = Map<string, CellRenderer>;
+/** Later entries with the same `kind` override earlier ones (including builtins). */
+declare function createCellRendererRegistry(customRenderers?: readonly CellRenderer[]): CellRendererRegistry;
+declare function resolveCellRenderer<T extends Record<string, unknown>>(registry: CellRendererRegistry, kind: CellKind | undefined, ctx: CellRenderContext<T>): CellRenderer | undefined;
+declare function formatDefaultCellValue(value: unknown): string | null;
+
 type CellPosition = {
     row: number;
     col: number;
@@ -164,6 +170,10 @@ type DataTableRowContextValue = {
         onCommitEdit: (raw?: string) => boolean;
         onCancelEdit: () => void;
     };
+    cellRender: {
+        registry: CellRendererRegistry;
+        commitValue: (rowId: string, columnId: string, value: unknown) => boolean;
+    };
     expand: {
         enableExpand: boolean;
         toggleField?: string;
@@ -284,6 +294,27 @@ declare function useCellEdit<T extends Record<string, unknown>>({ data, rows, on
     cancelEdit: () => void;
 };
 
+declare const BUILTIN_CELL_RENDERERS: CellRenderer[];
+
+type CommitCellValueOptions<T extends Record<string, unknown>> = {
+    data: T[];
+    rows: Row<T>[];
+    rowId: string;
+    columnId: string;
+    value: unknown;
+    onCellChange?: (rowId: string, columnId: string, value: unknown) => void;
+    onDataChange?: (data: T[]) => void;
+};
+/**
+ * Shared commit path for custom `render` updates and built-in cell kinds.
+ * Prefers `onCellChange`; falls back to immutable `onDataChange` patch.
+ */
+declare function commitCellValue<T extends Record<string, unknown>>({ data, rows, rowId, columnId, value, onCellChange, onDataChange, }: CommitCellValueOptions<T>): boolean;
+
+declare function ResolvedTableCell<T extends Record<string, unknown>>({ info, }: {
+    info: CellContext<T, unknown>;
+}): react.ReactNode;
+
 /** Width styles for header/body cells when column sizing is active. */
 declare function getColumnSizeStyle(size: number, options?: {
     force?: boolean;
@@ -350,6 +381,11 @@ type CopyRowEntry<T extends Record<string, unknown>> = {
     /** Tree depth relative to the table root (0 = top-level). */
     depth: number;
 };
+/**
+ * Clipboard / Excel paste expects one plain string per cell.
+ * Avoids `String(object)` → `[object Object]` and joins arrays with `, `.
+ */
+declare function formatCellValue(value: unknown): string;
 declare function flattenSubtreeRows<T extends Record<string, unknown>>(row: T): T[];
 /**
  * Collects copy rows with tree depth so paste can rebuild parent/child nesting.
@@ -409,4 +445,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 { CELL_SELECTION_EDGES_CLASS, 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, 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, flattenSubtreeRows, getCellEditDraftValue, getCellSelectionEdgeStyle, getColumnEditType, getColumnSizeStyle, getRowIndexInMergedCell, hasCellSelectionEdges, isCellInSelection, isColumnEditable, isEditablePasteTarget, measureMergedSpanRowHeights, parseCellEditValue, parseClipboardTSV, parseClipboardTSVWithDepths, resolvePasteColumnIds, resolveRowSelection, resolveRowSpanAt, rowRangeToHeightRatios, serializeCopyRowsToTSV, serializeSelectionToTSV, toggleExpandedRowId, useCellEdit, useCellSelection, useConvertTreeData, useGlideTable, useInlineSearch, writeSelectionToClipboard };
+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 };