react-glide-table 1.7.0 → 2.0.2

package/dist/index.js

@@ -106,6 +106,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,
@@ -141,21 +172,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;
     },
@@ -184,6 +217,228 @@ function useCellEdit({
   };
 }
 
+// src/components/ui/table/features/cell-render/builtins.tsx
+import { jsx, jsxs } from "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__ */ 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__ */ jsx("span", { className: "data-table-cell-uri", children: raw });
+  }
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: "data-table-cell-image", children: urls.map((url, index) => /* @__PURE__ */ 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__ */ jsx("span", { className: "data-table-cell-bubble", children: items.map((item, index) => /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "data-table-cell-drilldown", children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "data-table-cell-drilldown-item",
+      children: [
+        item.img ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: item.img,
+            alt: "",
+            className: "data-table-cell-drilldown-image"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("span", { className: "data-table-cell-drilldown-text", children: item.text })
+      ]
+    },
+    `${index}:${item.text}:${item.img ?? ""}`
+  )) });
+}
+function LoadingCell() {
+  return /* @__PURE__ */ jsx("span", { className: "data-table-cell-loading", "aria-busy": "true" });
+}
+function ProtectedCell() {
+  return /* @__PURE__ */ jsx("span", { className: "data-table-cell-protected", "aria-label": "protected", children: "****" });
+}
+function RowIdCell({ value }) {
+  return /* @__PURE__ */ 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-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";
 
@@ -493,9 +748,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];
@@ -1119,10 +1399,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;
@@ -1873,6 +2183,7 @@ function useGlideTable(options) {
     onDataChange,
     onCellChange,
     onBatchChange,
+    cellRenderers,
     preserveRowSelection = false,
     toggleField,
     childField,
@@ -2098,6 +2409,26 @@ function useGlideTable(options) {
     commitEdit,
     cancelEdit
   } = useCellEdit({ data: tableData, rows, onDataChange, onCellChange });
+  const cellRendererRegistry = useMemo3(
+    () => createCellRendererRegistry(cellRenderers),
+    [cellRenderers]
+  );
+  const commitRenderedCellValue = useCallback4(
+    (rowId, columnId, value) => commitCellValue({
+      data: tableData,
+      rows,
+      rowId,
+      columnId,
+      value,
+      onCellChange,
+      onDataChange
+    }),
+    [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;
@@ -2334,6 +2665,10 @@ function useGlideTable(options) {
         onCommitEdit: commitEdit,
         onCancelEdit: cancelEdit
       },
+      cellRender: {
+        registry: cellRendererRegistry,
+        commitValue: commitRenderedCellValue
+      },
       expand: {
         enableExpand,
         toggleField,
@@ -2380,6 +2715,8 @@ function useGlideTable(options) {
     startEdit,
     commitEdit,
     cancelEdit,
+    cellRendererRegistry,
+    commitRenderedCellValue,
     enableExpand,
     toggleField,
     expandedRows,
@@ -2424,6 +2761,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,
@@ -2444,6 +2782,60 @@ function useGlideTable(options) {
   };
 }
 
+// src/components/ui/table/features/cell-render/ResolvedTableCell.tsx
+import { useCallback as useCallback5 } from "react";
+
+// src/components/ui/table/DataTableContext.tsx
+import { createContext, use } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DataTableContext = createContext(null);
+function useDataTableRowContext() {
+  const context = use(DataTableContext);
+  if (!context) {
+    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
+  }
+  return context;
+}
+function DataTableContextProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(DataTableContext, { value, children });
+}
+
+// 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 = useCallback5(
+    (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 ?? {};
@@ -2465,28 +2857,10 @@ import { useMemo as useMemo4 } from "react";
 import { flexRender } from "@tanstack/react-table";
 import { useEffect as useEffect6, useRef as useRef6 } from "react";
 
-// src/components/ui/table/DataTableContext.tsx
-import { createContext, use } from "react";
-import { jsx } from "react/jsx-runtime";
-var DataTableContext = createContext(null);
-function useDataTableRowContext() {
-  const context = use(DataTableContext);
-  if (!context) {
-    throw new Error("useDataTableRowContext must be used within a DataTableContextProvider");
-  }
-  return context;
-}
-function DataTableContextProvider({
-  value,
-  children
-}) {
-  return /* @__PURE__ */ jsx(DataTableContext, { value, children });
-}
-
 // src/components/ui/table/components/icons.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2499,12 +2873,12 @@ function ChevronDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
 function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2517,12 +2891,12 @@ function ChevronUp({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m18 15-6-6-6 6" })
     }
   );
 }
 function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2535,12 +2909,12 @@ function ChevronLeft({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m15 18-6-6 6-6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m15 18-6-6 6-6" })
     }
   );
 }
 function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "svg",
     {
       className,
@@ -2553,12 +2927,12 @@ function ChevronRight({ className, "aria-hidden": ariaHidden = true }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" })
+      children: /* @__PURE__ */ jsx3("path", { d: "m9 18 6-6-6-6" })
     }
   );
 }
 function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       className,
@@ -2572,14 +2946,14 @@ function ArrowUp({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "m18 15-6-6-6 6" }),
-        /* @__PURE__ */ jsx2("path", { d: "M12 21V9" })
+        /* @__PURE__ */ jsx3("path", { d: "m18 15-6-6-6 6" }),
+        /* @__PURE__ */ jsx3("path", { d: "M12 21V9" })
       ]
     }
   );
 }
 function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       className,
@@ -2593,14 +2967,14 @@ function ArrowDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }),
-        /* @__PURE__ */ jsx2("path", { d: "M12 3v12" })
+        /* @__PURE__ */ jsx3("path", { d: "m6 9 6 6 6-6" }),
+        /* @__PURE__ */ jsx3("path", { d: "M12 3v12" })
       ]
     }
   );
 }
 function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       className,
@@ -2614,10 +2988,10 @@ function ArrowUpDown({ className, "aria-hidden": ariaHidden = true }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx2("path", { d: "m21 16-4 4-4-4" }),
-        /* @__PURE__ */ jsx2("path", { d: "M17 20V4" }),
-        /* @__PURE__ */ jsx2("path", { d: "m3 8 4-4 4 4" }),
-        /* @__PURE__ */ jsx2("path", { d: "M7 4v16" })
+        /* @__PURE__ */ jsx3("path", { d: "m21 16-4 4-4-4" }),
+        /* @__PURE__ */ jsx3("path", { d: "M17 20V4" }),
+        /* @__PURE__ */ jsx3("path", { d: "m3 8 4-4 4 4" }),
+        /* @__PURE__ */ jsx3("path", { d: "M7 4v16" })
       ]
     }
   );
@@ -2629,7 +3003,7 @@ function cn(...inputs) {
 }
 
 // src/components/ui/table/components/DataTable/DataTableRow.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function isInteractiveMouseTarget(target) {
   if (!(target instanceof Element)) return false;
   const interactiveSelector = [
@@ -2669,6 +3043,7 @@ function DataTableRow({
     selection,
     cellSelection,
     cellEdit,
+    cellRender,
     expand,
     columnResize,
     columnFreeze,
@@ -2706,6 +3081,10 @@ function DataTableRow({
     onCommitEdit,
     onCancelEdit
   } = cellEdit;
+  const renderCell = (tableCell) => flexRender(
+    tableCell.column.columnDef.cell,
+    withCellUpdate(tableCell.getContext(), cellRender.commitValue)
+  );
   const {
     enableExpand,
     toggleField,
@@ -2781,7 +3160,7 @@ function DataTableRow({
     editInputRef.current?.focus();
     editInputRef.current?.select();
   }, [isRowEditing, editingCell?.colIndex]);
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "tr",
     {
       ref: measureElement,
@@ -2875,7 +3254,7 @@ function DataTableRow({
         const searchMatchKey = buildSearchMatchKey(cellIndex, rowIndex);
         const isSearchMatch = enableInlineSearch && searchMatchKeys.has(searchMatchKey);
         const isSearchActive = isSearchMatch && activeMatch !== null && activeMatch[0] === cellIndex && activeMatch[1] === rowIndex;
-        return /* @__PURE__ */ jsxs2(
+        return /* @__PURE__ */ jsxs3(
           "td",
           {
             "data-row-index": rowIndex,
@@ -2949,7 +3328,7 @@ function DataTableRow({
               classNames?.cell
             ),
             children: [
-              isEditing ? /* @__PURE__ */ jsx3(
+              isEditing ? /* @__PURE__ */ jsx4(
                 "input",
                 {
                   ...editInputProps,
@@ -2992,8 +3371,8 @@ function DataTableRow({
                     onCommitEdit(event.currentTarget.value);
                   }
                 }
-              ) : isExpandCell && enableExpand ? /* @__PURE__ */ jsxs2("div", { className: cn("expand-cell", classNames?.expandCell), children: [
-                /* @__PURE__ */ jsxs2(
+              ) : isExpandCell && enableExpand ? /* @__PURE__ */ jsxs3("div", { className: cn("expand-cell", classNames?.expandCell), children: [
+                /* @__PURE__ */ jsxs3(
                   "div",
                   {
                     className: cn(
@@ -3001,7 +3380,7 @@ function DataTableRow({
                       classNames?.expandCellContent
                     ),
                     children: [
-                      rowLevel > 0 && /* @__PURE__ */ jsx3(
+                      rowLevel > 0 && /* @__PURE__ */ jsx4(
                         "span",
                         {
                           className: cn(
@@ -3011,20 +3390,20 @@ function DataTableRow({
                           children: "\xB7"
                         }
                       ),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx4(
                         "div",
                         {
                           className: cn(
                             "expand-cell-value",
                             classNames?.expandCellValue
                           ),
-                          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          children: renderCell(cell)
                         }
                       )
                     ]
                   }
                 ),
-                canExpand && expandKey && /* @__PURE__ */ jsx3(
+                canExpand && expandKey && /* @__PURE__ */ jsx4(
                   "button",
                   {
                     type: "button",
@@ -3038,7 +3417,7 @@ function DataTableRow({
                       onToggleExpand?.(expandKey);
                     },
                     onMouseDown: (event) => event.stopPropagation(),
-                    children: isExpanded ? /* @__PURE__ */ jsx3(
+                    children: isExpanded ? /* @__PURE__ */ jsx4(
                       ChevronUp,
                       {
                         className: cn(
@@ -3046,7 +3425,7 @@ function DataTableRow({
                           classNames?.expandToggleIcon
                         )
                       }
-                    ) : /* @__PURE__ */ jsx3(
+                    ) : /* @__PURE__ */ jsx4(
                       ChevronDown,
                       {
                         className: cn(
@@ -3057,8 +3436,8 @@ function DataTableRow({
                     )
                   }
                 )
-              ] }) : flexRender(cell.column.columnDef.cell, cell.getContext()),
-              isBottomRightCell && /* @__PURE__ */ jsx3(
+              ] }) : renderCell(cell),
+              isBottomRightCell && /* @__PURE__ */ jsx4(
                 "div",
                 {
                   role: "presentation",
@@ -3080,9 +3459,9 @@ function DataTableRow({
 }
 
 // src/components/ui/table/components/DataTable/DataTableSearch.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function SearchCloseIcon({ className }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "svg",
     {
       className,
@@ -3096,8 +3475,8 @@ function SearchCloseIcon({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
-        /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
+        /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+        /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
       ]
     }
   );
@@ -3143,15 +3522,15 @@ function DataTableSearch({
       onPrevious();
     }
   };
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn("data-table-search", classNames?.search),
       role: "search",
       onMouseDown: (event) => event.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs3("div", { className: "data-table-search-row", children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs4("div", { className: "data-table-search-row", children: [
+          /* @__PURE__ */ jsx5(
             "input",
             {
               ref: searchInputRef,
@@ -3167,7 +3546,7 @@ function DataTableSearch({
               onKeyDown: handleKeyDown
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -3177,10 +3556,10 @@ function DataTableSearch({
                 event.stopPropagation();
                 onPrevious();
               },
-              children: /* @__PURE__ */ jsx4(ChevronUp, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ jsx5(ChevronUp, { className: "data-table-search-icon" })
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -3190,10 +3569,10 @@ function DataTableSearch({
                 event.stopPropagation();
                 onNext();
               },
-              children: /* @__PURE__ */ jsx4(ChevronDown, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ jsx5(ChevronDown, { className: "data-table-search-icon" })
             }
           ),
-          canClose ? /* @__PURE__ */ jsx4(
+          canClose ? /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -3203,11 +3582,11 @@ function DataTableSearch({
                 event.stopPropagation();
                 onClose();
               },
-              children: /* @__PURE__ */ jsx4(SearchCloseIcon, { className: "data-table-search-icon" })
+              children: /* @__PURE__ */ jsx5(SearchCloseIcon, { className: "data-table-search-icon" })
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: cn("data-table-search-status", classNames?.searchStatus),
@@ -3215,7 +3594,7 @@ function DataTableSearch({
             children: resultString
           }
         ),
-        searchStatus !== void 0 ? /* @__PURE__ */ jsx4(
+        searchStatus !== void 0 ? /* @__PURE__ */ jsx5(
           "div",
           {
             className: cn(
@@ -3226,7 +3605,7 @@ function DataTableSearch({
             "aria-valuemin": 0,
             "aria-valuemax": 100,
             "aria-valuenow": progress,
-            children: /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx5(
               "div",
               {
                 className: "data-table-search-progress-bar",
@@ -3241,7 +3620,7 @@ function DataTableSearch({
 }
 
 // src/components/ui/table/components/DataTable/DataTableToolbar.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function DataTableToolbar({
   filteredCount,
   totalCount,
@@ -3259,20 +3638,20 @@ function DataTableToolbar({
   const selectionContent = selectionLabel?.(selectedCount) ?? null;
   const hasSelectionContent = selectionContent !== null && selectionContent !== false && selectionContent !== void 0 && typeof selectionContent !== "boolean";
   if (!hasLeftContent && !hasToolbar && !hasSelectionContent) return null;
-  return /* @__PURE__ */ jsxs4("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
-    /* @__PURE__ */ jsxs4("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
-      hasCount && /* @__PURE__ */ jsx5("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx5("span", { className: "toolbar-count-primary", children: displayFiltered }),
-        /* @__PURE__ */ jsxs4("span", { className: "toolbar-count-placeholder", children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("DataTableToolbarJSX", classNames?.toolbar, className), children: [
+    /* @__PURE__ */ jsxs5("div", { className: cn("toolbar-left", classNames?.toolbarLeft), children: [
+      hasCount && /* @__PURE__ */ jsx6("span", { className: cn("toolbar-count", classNames?.toolbarCount), children: displayFiltered !== void 0 && totalCount !== void 0 ? /* @__PURE__ */ jsxs5(Fragment, { children: [
+        /* @__PURE__ */ jsx6("span", { className: "toolbar-count-primary", children: displayFiltered }),
+        /* @__PURE__ */ jsxs5("span", { className: "toolbar-count-placeholder", children: [
           " / ",
           totalCount
         ] })
-      ] }) : /* @__PURE__ */ jsx5("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
+      ] }) : /* @__PURE__ */ jsx6("span", { className: "toolbar-count-primary", children: displayFiltered ?? totalCount }) }),
       summary
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
-      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx5("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
-      hasToolbar && /* @__PURE__ */ jsx5("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
+    /* @__PURE__ */ jsxs5("div", { className: cn("toolbar-right", classNames?.toolbarRight), children: [
+      hasSelectionContent && (typeof selectionContent === "string" || typeof selectionContent === "number" ? /* @__PURE__ */ jsx6("span", { className: cn("toolbar-selection", classNames?.toolbarSelection), children: selectionContent }) : selectionContent),
+      hasToolbar && /* @__PURE__ */ jsx6("div", { className: cn("toolbar-actions", classNames?.toolbarActions), children: toolbar })
     ] })
   ] });
 }
@@ -3310,20 +3689,20 @@ function getMergedHeaderGroups(headerGroups) {
 }
 
 // src/components/ui/table/components/DataTable/DataTable.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function DefaultScroll({
   scrollRef,
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx6("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
+  return /* @__PURE__ */ jsx7("div", { ref: scrollRef, className: cn("data-table-scroll", className), children });
 }
 function DefaultPending({
   loadingText,
   className,
   classNames
 }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: cn(
@@ -3333,7 +3712,7 @@ function DefaultPending({
         classNames?.pending,
         className
       ),
-      children: /* @__PURE__ */ jsx6("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
+      children: /* @__PURE__ */ jsx7("span", { className: cn("data-table-loading-text", classNames?.loadingText), children: loadingText })
     }
   );
 }
@@ -3342,7 +3721,7 @@ function DefaultEmpty({
   columnCount,
   classNames
 }) {
-  return /* @__PURE__ */ jsx6("tr", { children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("tr", { children: /* @__PURE__ */ jsx7(
     "td",
     {
       colSpan: columnCount,
@@ -3400,7 +3779,7 @@ function DataTable({
     [rowContextValue, classNames]
   );
   if (isPending) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       PendingSlot,
       {
         loadingText,
@@ -3409,7 +3788,7 @@ function DataTable({
       }
     );
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: rootRef,
@@ -3423,7 +3802,7 @@ function DataTable({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           ToolbarSlot,
           {
             filteredCount: filteredCount ?? tableData.length,
@@ -3435,7 +3814,7 @@ function DataTable({
             classNames
           }
         ),
-        enableInlineSearch ? /* @__PURE__ */ jsx6(
+        enableInlineSearch ? /* @__PURE__ */ jsx7(
           DataTableSearch,
           {
             showSearch: inlineSearch.showSearch,
@@ -3457,14 +3836,14 @@ function DataTable({
             onPrevious: inlineSearch.goToPrevious
           }
         ) : null,
-        /* @__PURE__ */ jsx6(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsx7(ScrollSlot, { scrollRef, className: classNames?.scroll, children: /* @__PURE__ */ jsxs6(
           "table",
           {
             className: cn("data-table", classNames?.table),
             style: enableColumnResize ? { width: table.getTotalSize() } : void 0,
             onDragStart: enableCellSelection ? (event) => event.preventDefault() : void 0,
             children: [
-              /* @__PURE__ */ jsx6("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7("thead", { className: cn("data-table-head", classNames?.head), children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx7(
                 "tr",
                 {
                   className: cn("data-table-head-row", classNames?.headRow),
@@ -3476,7 +3855,7 @@ function DataTable({
                       force: enableColumnResize,
                       lockMax: enableColumnResize
                     });
-                    const freezeOffset = enableColumnFreeze ? freezeOffsets.get(header.column.id) : void 0;
+                    const freezeOffset = enableColumnFreeze ? resolveHeaderFreezeOffset(header.column, freezeOffsets) : void 0;
                     const freezeStyle = getColumnFreezeStyle(freezeOffset, {
                       isHeader: true,
                       headerTop: header.depth * DATA_TABLE_HEADER_ROW_HEIGHT
@@ -3485,7 +3864,7 @@ function DataTable({
                       ...sizeStyle,
                       ...freezeStyle
                     };
-                    return /* @__PURE__ */ jsxs5(
+                    return /* @__PURE__ */ jsxs6(
                       "th",
                       {
                         colSpan: header.colSpan,
@@ -3502,8 +3881,11 @@ function DataTable({
                           headerClassName
                         ),
                         children: [
-                          header.isPlaceholder ? null : flexRender2(header.column.columnDef.header, header.getContext()),
-                          canResize ? /* @__PURE__ */ jsx6(
+                          header.isPlaceholder ? null : flexRender2(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          ),
+                          canResize ? /* @__PURE__ */ jsx7(
                             "div",
                             {
                               role: "separator",
@@ -3529,20 +3911,20 @@ function DataTable({
                 },
                 headerGroup.id
               )) }),
-              /* @__PURE__ */ jsx6(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(DataTableContextProvider, { value: contextValue, children: /* @__PURE__ */ jsx7(
                 "tbody",
                 {
                   onMouseLeave: clearHover,
                   className: cn("data-table-body", classNames?.body),
-                  children: rows.length === 0 ? /* @__PURE__ */ jsx6(
+                  children: rows.length === 0 ? /* @__PURE__ */ jsx7(
                     EmptySlot,
                     {
                       emptyText,
                       columnCount,
                       classNames
                     }
-                  ) : shouldVirtualize ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
-                    paddingTop > 0 && /* @__PURE__ */ jsx6(
+                  ) : shouldVirtualize ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+                    paddingTop > 0 && /* @__PURE__ */ jsx7(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -3550,7 +3932,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx6(
+                        children: /* @__PURE__ */ jsx7(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3566,7 +3948,7 @@ function DataTable({
                     virtualRows.map((virtualRow) => {
                       const row = rows[virtualRow.index];
                       if (!row) return null;
-                      return /* @__PURE__ */ jsx6(
+                      return /* @__PURE__ */ jsx7(
                         RowSlot,
                         {
                           row,
@@ -3577,7 +3959,7 @@ function DataTable({
                         row.id
                       );
                     }),
-                    paddingBottom > 0 && /* @__PURE__ */ jsx6(
+                    paddingBottom > 0 && /* @__PURE__ */ jsx7(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -3585,7 +3967,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx6(
+                        children: /* @__PURE__ */ jsx7(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3598,7 +3980,7 @@ function DataTable({
                         )
                       }
                     )
-                  ] }) : rows.map((row) => /* @__PURE__ */ jsx6(
+                  ] }) : rows.map((row) => /* @__PURE__ */ jsx7(
                     RowSlot,
                     {
                       row,
@@ -3617,10 +3999,10 @@ function DataTable({
 }
 
 // src/components/ui/table/components/Table/Table.tsx
-import { useCallback as useCallback5, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo5, useState as useState5 } from "react";
 
 // src/components/ui/table/components/Table/buildColumnDef.tsx
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function SortableHeader({
   label,
   field,
@@ -3629,15 +4011,18 @@ function SortableHeader({
 }) {
   const isActive = sort?.field === field;
   const Icon = isActive ? sort.direction === "asc" ? ArrowUp : ArrowDown : ArrowUpDown;
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "button",
     {
       type: "button",
-      className: cn("SortableHeaderJSX", isActive ? "is-active" : "is-inactive"),
+      className: cn(
+        "SortableHeaderJSX",
+        isActive ? "is-active" : "is-inactive"
+      ),
       onClick: () => onSort(field),
       children: [
-        /* @__PURE__ */ jsx7("span", { children: label }),
-        /* @__PURE__ */ jsx7(Icon, { className: "sortable-header-icon" })
+        /* @__PURE__ */ jsx8("span", { children: label }),
+        /* @__PURE__ */ jsx8(Icon, { className: "sortable-header-icon" })
       ]
     }
   );
@@ -3659,6 +4044,8 @@ function buildColumnDef(props, sort, onSort) {
     editable,
     editType,
     editInputProps,
+    kind,
+    cellProps,
     className,
     headerClassName,
     render
@@ -3670,18 +4057,20 @@ function buildColumnDef(props, sort, onSort) {
     ...minWidth != null ? { minSize: minWidth } : {},
     ...maxWidth != null ? { maxSize: maxWidth } : {},
     ...resizable === false ? { enableResizing: false } : {},
-    header: sortable ? () => /* @__PURE__ */ jsx7(SortableHeader, { label: children, field, sort, onSort }) : (
+    header: sortable ? () => /* @__PURE__ */ jsx8(
+      SortableHeader,
+      {
+        label: children,
+        field,
+        sort,
+        onSort
+      }
+    ) : (
       // eslint-disable-next-line @typescript-eslint/promise-function-async
       () => children
     ),
-    ...render ? {
-      // eslint-disable-next-line @typescript-eslint/promise-function-async
-      cell: ({ row, getValue }) => render(
-        getValue(),
-        row,
-        row.index
-      )
-    } : {},
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    cell: (info) => /* @__PURE__ */ jsx8(ResolvedTableCell, { info }),
     meta: {
       align,
       rowSpan,
@@ -3689,6 +4078,9 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      kind,
+      cellProps,
+      cellRender: render,
       frozen,
       className,
       headerClassName
@@ -3711,10 +4103,8 @@ function buildColumnDefsFromTree(nodes, sort, onSort) {
     const { header, align, headerClassName } = node.props;
     return {
       id: resolveGroupId(node.props, index),
-      header: (
-        // eslint-disable-next-line @typescript-eslint/promise-function-async
-        () => header
-      ),
+      // eslint-disable-next-line @typescript-eslint/promise-function-async
+      header: () => header,
       columns: childDefs,
       enableResizing: false,
       meta: {
@@ -3881,7 +4271,7 @@ function TableHeader(props) {
 TableHeader.displayName = TABLE_HEADER_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/TablePagination.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function TablePagination({
   page,
   pageSize = 10,
@@ -3893,8 +4283,8 @@ function TablePagination({
   const safePage = Math.min(Math.max(1, page), totalPages);
   const canGoPrev = safePage > 1;
   const canGoNext = safePage < totalPages;
-  return /* @__PURE__ */ jsxs7("div", { className: cn("TablePaginationJSX", className), children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs8("div", { className: cn("TablePaginationJSX", className), children: [
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -3902,15 +4292,15 @@ function TablePagination({
         disabled: !canGoPrev,
         onClick: () => onChange(safePage - 1),
         "aria-label": "Previous page",
-        children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ jsx9(ChevronLeft, { className: "pagination-button-icon" })
       }
     ),
-    /* @__PURE__ */ jsxs7("span", { className: "pagination-label", children: [
+    /* @__PURE__ */ jsxs8("span", { className: "pagination-label", children: [
       safePage,
       " / ",
       totalPages
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "button",
       {
         type: "button",
@@ -3918,7 +4308,7 @@ function TablePagination({
         disabled: !canGoNext,
         onClick: () => onChange(safePage + 1),
         "aria-label": "Next page",
-        children: /* @__PURE__ */ jsx8(ChevronRight, { className: "pagination-button-icon" })
+        children: /* @__PURE__ */ jsx9(ChevronRight, { className: "pagination-button-icon" })
       }
     )
   ] });
@@ -3926,7 +4316,7 @@ function TablePagination({
 TablePagination.displayName = TABLE_PAGINATION_DISPLAY_NAME;
 
 // src/components/ui/table/components/Table/Table.tsx
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function TableRoot({
   data,
   children,
@@ -3940,7 +4330,7 @@ function TableRoot({
     [children]
   );
   const [sort, setSort] = useState5(null);
-  const handleSort = useCallback5((field) => {
+  const handleSort = useCallback6((field) => {
     setSort((previous) => {
       if (previous?.field !== field) {
         return { field, direction: "asc" };
@@ -3968,8 +4358,8 @@ function TableRoot({
   if (countLeafColumns(columnTree) === 0) {
     console.warn("[Table] Declare at least one Table.Column inside Table.Header.");
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "TableJSX", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs9("div", { className: "TableJSX", children: [
+    /* @__PURE__ */ jsx10(
       DataTable,
       {
         ...dataTableProps,
@@ -3980,7 +4370,7 @@ function TableRoot({
         className: cn(className, paginationProps && "DataTableJSX--with-pagination")
       }
     ),
-    paginationProps && /* @__PURE__ */ jsx9(
+    paginationProps && /* @__PURE__ */ jsx10(
       TablePagination,
       {
         page,
@@ -4005,7 +4395,7 @@ function createTable() {
   ColumnGroup.displayName = TABLE_COLUMN_GROUP_DISPLAY_NAME;
   return Object.assign(
     function BoundTable(props) {
-      return /* @__PURE__ */ jsx9(TableRoot, { ...props });
+      return /* @__PURE__ */ jsx10(TableRoot, { ...props });
     },
     {
       Header: TableHeader,
@@ -4024,6 +4414,7 @@ var Table = Object.assign(TableRoot, {
   Pagination: TablePagination
 });
 export {
+  BUILTIN_CELL_RENDERERS,
   CELL_SELECTION_EDGES_CLASS,
   DEFAULT_DATA_TABLE_LABELS,
   DEFAULT_TREE_CHILDREN_FIELD,
@@ -4032,6 +4423,7 @@ export {
   DEFAULT_TREE_QTY_FIELD,
   DataTable,
   INLINE_SEARCH_MAX_RESULTS,
+  ResolvedTableCell,
   Table,
   applyCellEdit,
   applyFillData,
@@ -4051,10 +4443,14 @@ export {
   collectFillChanges,
   collectRowSpanColumns,
   collectSearchMatchesInRange,
+  commitCellValue,
+  createCellRendererRegistry,
   createSearchRegex,
   createTable,
   escapeSearchRegex,
   flattenSubtreeRows,
+  formatCellValue,
+  formatDefaultCellValue,
   formatSearchResultLabel,
   getCellEditDraftValue,
   getCellSelectionEdgeStyle,
@@ -4076,8 +4472,10 @@ export {
   parseClipboardTSV,
   parseClipboardTSVWithDepths,
   previousSearchIndex,
+  resolveCellRenderer,
   resolveColumnFreezeSide,
   resolveDataTableLabels,
+  resolveHeaderFreezeOffset,
   resolvePasteColumnIds,
   resolveRowSelection,
   resolveRowSpanAt,
@@ -4090,5 +4488,6 @@ export {
   useConvertTreeData,
   useGlideTable,
   useInlineSearch,
+  withCellUpdate,
   writeSelectionToClipboard
 };