react-glide-table 1.7.0 → 2.0.2

package/dist/compound.js

@@ -71,19 +71,15 @@ function getCellEditDraftValue(value) {
   if (value === null || value === void 0) return "";
   return String(value);
 }
-function applyCellEdit(data, rows, rowIndex, colIndex, raw) {
-  const cell = rows[rowIndex]?.getVisibleCells()[colIndex];
-  if (!cell) return null;
-  const columnDef = cell.column.columnDef;
-  if (!isColumnEditable(columnDef)) return null;
-  const accessorKey = getColumnAccessorKey(columnDef);
-  if (!accessorKey) return null;
-  const parsed = parseCellEditValue(raw, getColumnEditType(columnDef));
-  if (!parsed.ok) return null;
-  const newData = data.map((row) => ({ ...row }));
-  if (!newData[rowIndex]) return null;
-  newData[rowIndex][accessorKey] = parsed.value;
-  return newData;
+
+// 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
@@ -469,10 +465,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/column-resize/columnResize.ts
 function getColumnSizeStyle(size, options) {
@@ -1086,6 +1112,7 @@ function DataTableRow({
     selection,
     cellSelection,
     cellEdit,
+    cellRender,
     expand,
     columnResize,
     columnFreeze,
@@ -1123,6 +1150,10 @@ function DataTableRow({
     onCommitEdit,
     onCancelEdit
   } = cellEdit;
+  const renderCell = (tableCell) => flexRender(
+    tableCell.column.columnDef.cell,
+    withCellUpdate(tableCell.getContext(), cellRender.commitValue)
+  );
   const {
     enableExpand,
     toggleField,
@@ -1435,7 +1466,7 @@ function DataTableRow({
                             "expand-cell-value",
                             classNames?.expandCellValue
                           ),
-                          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                          children: renderCell(cell)
                         }
                       )
                     ]
@@ -1474,7 +1505,7 @@ function DataTableRow({
                     )
                   }
                 )
-              ] }) : flexRender(cell.column.columnDef.cell, cell.getContext()),
+              ] }) : renderCell(cell),
               isBottomRightCell && /* @__PURE__ */ jsx3(
                 "div",
                 {
@@ -1744,6 +1775,39 @@ import {
 
 // src/components/ui/table/features/cell-edit/useCellEdit.ts
 import { useCallback, useEffect as useEffect3, useRef as useRef3, useState } from "react";
+
+// 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,
   rows,
@@ -1778,21 +1842,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;
     },
@@ -1821,13 +1887,250 @@ function useCellEdit({
   };
 }
 
+// src/components/ui/table/features/cell-render/builtins.tsx
+import { jsx as jsx6, jsxs as jsxs5 } 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__ */ jsx6(
+    "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__ */ jsx6("span", { className: "data-table-cell-uri", children: raw });
+  }
+  return /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("span", { className: "data-table-cell-image", children: urls.map((url, index) => /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("span", { className: "data-table-cell-bubble", children: items.map((item, index) => /* @__PURE__ */ jsx6("span", { className: "data-table-cell-bubble-item", children: item }, `${index}:${item}`)) });
+}
+function MarkdownCell({ value }) {
+  const source = asString(value);
+  if (!source) return null;
+  return /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("span", { className: "data-table-cell-drilldown", children: items.map((item, index) => /* @__PURE__ */ jsxs5(
+    "span",
+    {
+      className: "data-table-cell-drilldown-item",
+      children: [
+        item.img ? /* @__PURE__ */ jsx6(
+          "img",
+          {
+            src: item.img,
+            alt: "",
+            className: "data-table-cell-drilldown-image"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx6("span", { className: "data-table-cell-drilldown-text", children: item.text })
+      ]
+    },
+    `${index}:${item.text}:${item.img ?? ""}`
+  )) });
+}
+function LoadingCell() {
+  return /* @__PURE__ */ jsx6("span", { className: "data-table-cell-loading", "aria-busy": "true" });
+}
+function ProtectedCell() {
+  return /* @__PURE__ */ jsx6("span", { className: "data-table-cell-protected", "aria-label": "protected", children: "****" });
+}
+function RowIdCell({ value }) {
+  return /* @__PURE__ */ jsx6("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
 import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef4, useState as useState2 } from "react";
 
 // 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];
@@ -2716,6 +3019,7 @@ function useGlideTable(options) {
     onDataChange,
     onCellChange,
     onBatchChange,
+    cellRenderers,
     preserveRowSelection = false,
     toggleField,
     childField,
@@ -2941,6 +3245,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;
@@ -3177,6 +3501,10 @@ function useGlideTable(options) {
         onCommitEdit: commitEdit,
         onCancelEdit: cancelEdit
       },
+      cellRender: {
+        registry: cellRendererRegistry,
+        commitValue: commitRenderedCellValue
+      },
       expand: {
         enableExpand,
         toggleField,
@@ -3223,6 +3551,8 @@ function useGlideTable(options) {
     startEdit,
     commitEdit,
     cancelEdit,
+    cellRendererRegistry,
+    commitRenderedCellValue,
     enableExpand,
     toggleField,
     expandedRows,
@@ -3267,6 +3597,7 @@ function useGlideTable(options) {
     paddingTop,
     paddingBottom,
     rowContextValue,
+    getCellContext,
     handleToggleSelect,
     clearHover,
     copySelection: stableCopySelection,
@@ -3288,20 +3619,20 @@ function useGlideTable(options) {
 }
 
 // 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(
@@ -3311,7 +3642,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 })
     }
   );
 }
@@ -3320,7 +3651,7 @@ function DefaultEmpty({
   columnCount,
   classNames
 }) {
-  return /* @__PURE__ */ jsx6("tr", { children: /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7("tr", { children: /* @__PURE__ */ jsx7(
     "td",
     {
       colSpan: columnCount,
@@ -3378,7 +3709,7 @@ function DataTable({
     [rowContextValue, classNames]
   );
   if (isPending) {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       PendingSlot,
       {
         loadingText,
@@ -3387,7 +3718,7 @@ function DataTable({
       }
     );
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: rootRef,
@@ -3401,7 +3732,7 @@ function DataTable({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           ToolbarSlot,
           {
             filteredCount: filteredCount ?? tableData.length,
@@ -3413,7 +3744,7 @@ function DataTable({
             classNames
           }
         ),
-        enableInlineSearch ? /* @__PURE__ */ jsx6(
+        enableInlineSearch ? /* @__PURE__ */ jsx7(
           DataTableSearch,
           {
             showSearch: inlineSearch.showSearch,
@@ -3435,14 +3766,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),
@@ -3454,7 +3785,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
@@ -3463,7 +3794,7 @@ function DataTable({
                       ...sizeStyle,
                       ...freezeStyle
                     };
-                    return /* @__PURE__ */ jsxs5(
+                    return /* @__PURE__ */ jsxs6(
                       "th",
                       {
                         colSpan: header.colSpan,
@@ -3480,8 +3811,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",
@@ -3507,20 +3841,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,
@@ -3528,7 +3862,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx6(
+                        children: /* @__PURE__ */ jsx7(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3544,7 +3878,7 @@ function DataTable({
                     virtualRows.map((virtualRow) => {
                       const row = rows[virtualRow.index];
                       if (!row) return null;
-                      return /* @__PURE__ */ jsx6(
+                      return /* @__PURE__ */ jsx7(
                         RowSlot,
                         {
                           row,
@@ -3555,7 +3889,7 @@ function DataTable({
                         row.id
                       );
                     }),
-                    paddingBottom > 0 && /* @__PURE__ */ jsx6(
+                    paddingBottom > 0 && /* @__PURE__ */ jsx7(
                       "tr",
                       {
                         "aria-hidden": true,
@@ -3563,7 +3897,7 @@ function DataTable({
                           "data-table-virtual-spacer",
                           classNames?.virtualSpacer
                         ),
-                        children: /* @__PURE__ */ jsx6(
+                        children: /* @__PURE__ */ jsx7(
                           "td",
                           {
                             colSpan: columnCount,
@@ -3576,7 +3910,7 @@ function DataTable({
                         )
                       }
                     )
-                  ] }) : rows.map((row) => /* @__PURE__ */ jsx6(
+                  ] }) : rows.map((row) => /* @__PURE__ */ jsx7(
                     RowSlot,
                     {
                       row,
@@ -3595,10 +3929,44 @@ 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/features/cell-render/ResolvedTableCell.tsx
+import { useCallback as useCallback5 } from "react";
+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/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,
@@ -3607,15 +3975,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" })
       ]
     }
   );
@@ -3637,6 +4008,8 @@ function buildColumnDef(props, sort, onSort) {
     editable,
     editType,
     editInputProps,
+    kind,
+    cellProps,
     className,
     headerClassName,
     render
@@ -3648,18 +4021,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,
@@ -3667,6 +4042,9 @@ function buildColumnDef(props, sort, onSort) {
       editable,
       editType,
       editInputProps,
+      kind,
+      cellProps,
+      cellRender: render,
       frozen,
       className,
       headerClassName
@@ -3689,10 +4067,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: {
@@ -3859,7 +4235,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,
@@ -3871,8 +4247,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",
@@ -3880,15 +4256,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",
@@ -3896,7 +4272,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" })
       }
     )
   ] });
@@ -3904,7 +4280,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,
@@ -3918,7 +4294,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" };
@@ -3946,8 +4322,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,
@@ -3958,7 +4334,7 @@ function TableRoot({
         className: cn(className, paginationProps && "DataTableJSX--with-pagination")
       }
     ),
-    paginationProps && /* @__PURE__ */ jsx9(
+    paginationProps && /* @__PURE__ */ jsx10(
       TablePagination,
       {
         page,
@@ -3983,7 +4359,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,