@object-ui/plugin-aggrid 0.5.0 → 2.0.0

package/dist/src/AgGridImpl.d.ts

@@ -1,5 +1,5 @@
 import { ColDef, GridOptions } from 'ag-grid-community';
-import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 export interface AgGridImplProps {
     rowData?: any[];
     columnDefs?: ColDef[];
@@ -23,9 +23,12 @@ export interface AgGridImplProps {
     enableRangeSelection?: boolean;
     enableCharts?: boolean;
     contextMenu?: ContextMenuConfig;
+    treeData?: TreeDataConfig;
+    rowGrouping?: RowGroupingConfig;
+    excelExport?: ExcelExportConfig;
 }
 /**
  * AgGridImpl - The heavy implementation that imports AG Grid
  * This component is lazy-loaded to avoid including AG Grid in the initial bundle
  */
-export default function AgGridImpl({ rowData, columnDefs, gridOptions, pagination, paginationPageSize, domLayout, animateRows, rowSelection, theme, height, className, editable, editType, singleClickEdit, stopEditingWhenCellsLoseFocus, exportConfig, statusBar, callbacks, columnConfig, enableRangeSelection, enableCharts, contextMenu, }: AgGridImplProps): import("react/jsx-runtime").JSX.Element;
+export default function AgGridImpl({ rowData, columnDefs, gridOptions, pagination, paginationPageSize, domLayout, animateRows, rowSelection, theme, height, className, editable, editType, singleClickEdit, stopEditingWhenCellsLoseFocus, exportConfig, statusBar, callbacks, columnConfig, enableRangeSelection, enableCharts, contextMenu, treeData, rowGrouping, excelExport, }: AgGridImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/field-renderers.d.ts

@@ -0,0 +1,67 @@
+import { Root } from 'react-dom/client';
+import { ICellRendererParams, ICellEditorParams } from 'ag-grid-community';
+import { FieldMetadata } from '../../types/src';
+/**
+ * AG Grid Cell Renderer using Field Widgets (Read-only mode)
+ */
+export declare class FieldWidgetCellRenderer {
+    eGui: HTMLDivElement;
+    root: Root | null;
+    init(params: ICellRendererParams & {
+        field: FieldMetadata;
+    }): void;
+    getGui(): HTMLDivElement;
+    refresh(params: ICellRendererParams & {
+        field: FieldMetadata;
+    }): boolean;
+    destroy(): void;
+}
+/**
+ * AG Grid Cell Editor using Field Widgets (Edit mode)
+ */
+export declare class FieldWidgetCellEditor {
+    eGui: HTMLDivElement;
+    root: Root | null;
+    currentValue: unknown;
+    params: ICellEditorParams & {
+        field: FieldMetadata;
+    };
+    init(params: ICellEditorParams & {
+        field: FieldMetadata;
+    }): void;
+    getGui(): HTMLDivElement;
+    getValue(): unknown;
+    destroy(): void;
+    isPopup(): boolean;
+}
+/**
+ * Factory function to create cell renderer with field metadata
+ */
+export declare function createFieldCellRenderer(field: FieldMetadata): {
+    new (): {
+        init(params: ICellRendererParams): void;
+        refresh(params: ICellRendererParams): boolean;
+        eGui: HTMLDivElement;
+        root: Root | null;
+        getGui(): HTMLDivElement;
+        destroy(): void;
+    };
+};
+/**
+ * Factory function to create cell editor with field metadata
+ */
+export declare function createFieldCellEditor(field: FieldMetadata): {
+    new (): {
+        init(params: ICellEditorParams): void;
+        eGui: HTMLDivElement;
+        root: Root | null;
+        currentValue: unknown;
+        params: ICellEditorParams & {
+            field: FieldMetadata;
+        };
+        getGui(): HTMLDivElement;
+        getValue(): unknown;
+        destroy(): void;
+        isPopup(): boolean;
+    };
+};

package/dist/src/index.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 import { DataSource } from '../../types/src';
-export type { AgGridSchema, SimpleColumnDef, AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+export type { AgGridSchema, SimpleColumnDef, AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 export type { ObjectAgGridSchema } from './object-aggrid.types';
 export interface AgGridRendererProps {
     schema: {
@@ -29,6 +29,9 @@ export interface AgGridRendererProps {
         enableRangeSelection?: boolean;
         enableCharts?: boolean;
         contextMenu?: ContextMenuConfig;
+        treeData?: TreeDataConfig;
+        rowGrouping?: RowGroupingConfig;
+        excelExport?: ExcelExportConfig;
     };
 }
 /**

package/dist/src/types.d.ts

@@ -7,7 +7,7 @@ export interface AgGridCallbacks {
     onRowClicked?: (event: RowClickedEvent) => void;
     onSelectionChanged?: (event: SelectionChangedEvent) => void;
     onCellValueChanged?: (event: CellValueChangedEvent) => void;
-    onExport?: (data: any[], format: 'csv') => void;
+    onExport?: (data: any[], format: 'csv' | 'excel') => void;
     onContextMenuAction?: (action: string, rowData: any) => void;
 }
 /**
@@ -19,6 +19,50 @@ export interface ExportConfig {
     skipColumnHeaders?: boolean;
     allColumns?: boolean;
     onlySelected?: boolean;
+    format?: 'csv' | 'excel';
+}
+/**
+ * Tree data configuration
+ */
+export interface TreeDataConfig {
+    enabled?: boolean;
+    /** Field that contains the hierarchy path (array of strings) */
+    pathField?: string;
+    /** Field that contains parent ID for parent-child relationships */
+    parentIdField?: string;
+    /** Field that contains the unique ID */
+    idField?: string;
+    /** Whether to expand all rows by default */
+    expandAll?: boolean;
+    /** Depth to expand to by default */
+    expandDepth?: number;
+}
+/**
+ * Row grouping configuration
+ */
+export interface RowGroupingConfig {
+    enabled?: boolean;
+    /** Fields to group by */
+    groupByFields?: string[];
+    /** Whether to show group row count */
+    showRowCount?: boolean;
+    /** Whether to allow user to change grouping */
+    userGroupable?: boolean;
+    /** Aggregation functions for grouped columns */
+    aggregations?: Record<string, 'sum' | 'avg' | 'count' | 'min' | 'max' | 'first' | 'last'>;
+}
+/**
+ * Excel export configuration
+ */
+export interface ExcelExportConfig {
+    enabled?: boolean;
+    fileName?: string;
+    sheetName?: string;
+    includeHeaders?: boolean;
+    includeGrouping?: boolean;
+    onlySelected?: boolean;
+    /** Custom column widths */
+    columnWidths?: Record<string, number>;
 }
 /**
  * Status bar configuration
@@ -72,6 +116,9 @@ export interface AgGridSchema {
     enableRangeSelection?: boolean;
     enableCharts?: boolean;
     contextMenu?: ContextMenuConfig;
+    treeData?: TreeDataConfig;
+    rowGrouping?: RowGroupingConfig;
+    excelExport?: ExcelExportConfig;
     callbacks?: AgGridCallbacks;
     theme?: 'alpine' | 'balham' | 'material' | 'quartz';
     height?: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-aggrid",
-  "version": "0.5.0",
+  "version": "2.0.0",
   "type": "module",
   "license": "MIT",
   "description": "AG Grid data grid plugin for Object UI, powered by AG Grid Community",
@@ -25,11 +25,12 @@
     "./style.css": "./dist/index.css"
   },
   "dependencies": {
-    "@object-ui/components": "0.5.0",
-    "@object-ui/core": "0.5.0",
-    "@object-ui/react": "0.5.0",
-    "@object-ui/types": "0.5.0",
-    "@object-ui/data-objectstack": "0.5.0"
+    "@object-ui/components": "2.0.0",
+    "@object-ui/core": "2.0.0",
+    "@object-ui/fields": "2.0.0",
+    "@object-ui/react": "2.0.0",
+    "@object-ui/types": "2.0.0",
+    "@object-ui/data-objectstack": "2.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -38,7 +39,7 @@
     "ag-grid-react": "^32.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.10",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.3",
     "ag-grid-community": "^32.3.9",

package/src/AgGridImpl.tsx

@@ -9,7 +9,7 @@
 import React, { useMemo, useRef, useCallback } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import type { ColDef, GridOptions, GridReadyEvent, CellClickedEvent, RowClickedEvent, SelectionChangedEvent, CellValueChangedEvent, StatusPanelDef, GetContextMenuItemsParams, MenuItemDef } from 'ag-grid-community';
-import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 
 export interface AgGridImplProps {
   rowData?: any[];
@@ -34,6 +34,9 @@ export interface AgGridImplProps {
   enableRangeSelection?: boolean;
   enableCharts?: boolean;
   contextMenu?: ContextMenuConfig;
+  treeData?: TreeDataConfig;
+  rowGrouping?: RowGroupingConfig;
+  excelExport?: ExcelExportConfig;
 }
 
 /**
@@ -63,6 +66,9 @@ export default function AgGridImpl({
   enableRangeSelection = false,
   enableCharts = false,
   contextMenu,
+  treeData,
+  rowGrouping,
+  excelExport,
 }: AgGridImplProps) {
   const gridRef = useRef<any>(null);
 
@@ -113,6 +119,31 @@ export default function AgGridImpl({
     }
   }, [exportConfig, callbacks, rowData]);
 
+  // Excel-compatible CSV Export handler
+  // Exports CSV format which can be opened directly in Excel
+  const handleExportExcel = useCallback(() => {
+    if (!gridRef.current?.api) return;
+    
+    const fileName = excelExport?.fileName || exportConfig?.fileName || 'export.csv';
+    const includeHeaders = excelExport?.includeHeaders !== false;
+    
+    const params = {
+      fileName,
+      skipColumnHeaders: !includeHeaders,
+      allColumns: true,
+      onlySelected: excelExport?.onlySelected || false,
+    };
+    
+    gridRef.current.api.exportDataAsCsv(params);
+    
+    if (callbacks?.onExport) {
+      const data = excelExport?.onlySelected 
+        ? gridRef.current.api.getSelectedRows()
+        : rowData;
+      callbacks.onExport(data || [], 'excel');
+    }
+  }, [excelExport, exportConfig, callbacks, rowData]);
+
   // Context Menu handler
   const getContextMenuItems = useCallback((params: GetContextMenuItemsParams): (string | MenuItemDef)[] => {
     if (!contextMenu?.enabled) return [];
@@ -127,6 +158,12 @@ export default function AgGridImpl({
           icon: '<span>📥</span>',
           action: () => handleExportCSV(),
         });
+      } else if (item === 'export-excel') {
+        items.push({
+          name: 'Export Excel (CSV)',
+          icon: '<span>📊</span>',
+          action: () => handleExportExcel(),
+        });
       } else if (item === 'autoSizeAll') {
         items.push({
           name: 'Auto-size All Columns',
@@ -170,7 +207,7 @@ export default function AgGridImpl({
     }
     
     return items;
-  }, [contextMenu, handleExportCSV, callbacks]);
+  }, [contextMenu, handleExportCSV, handleExportExcel, callbacks]);
 
   // Event handlers
   const handleCellClicked = useCallback((event: CellClickedEvent) => {
@@ -218,9 +255,20 @@ export default function AgGridImpl({
         }
       }
       
+      // Apply grouping
+      if (rowGrouping?.enabled && rowGrouping.groupByFields?.includes(col.field || '')) {
+        processed.rowGroup = true;
+        processed.hide = true;
+      }
+
+      // Apply aggregation
+      if (rowGrouping?.aggregations && col.field && rowGrouping.aggregations[col.field]) {
+        processed.aggFunc = rowGrouping.aggregations[col.field];
+      }
+      
       return processed;
     });
-  }, [columnDefs, editable, columnConfig]);
+  }, [columnDefs, editable, columnConfig, rowGrouping]);
 
   // Merge grid options with props
   const mergedGridOptions = useMemo(() => ({
@@ -237,6 +285,31 @@ export default function AgGridImpl({
     enableRangeSelection,
     enableCharts,
     getContextMenuItems: contextMenu?.enabled ? getContextMenuItems : undefined,
+    // Tree data support
+    ...(treeData?.enabled ? {
+      treeData: true,
+      getDataPath: treeData.pathField 
+        ? (data: any) => data[treeData.pathField as string] 
+        : undefined,
+      autoGroupColumnDef: {
+        headerName: 'Hierarchy',
+        minWidth: 250,
+        cellRendererParams: {
+          suppressCount: false,
+        },
+      },
+      groupDefaultExpanded: treeData.expandAll ? -1 : (treeData.expandDepth ?? 0),
+    } : {}),
+    // Row grouping
+    ...(rowGrouping?.enabled ? {
+      groupDefaultExpanded: rowGrouping.groupByFields?.length ? 1 : 0,
+      autoGroupColumnDef: {
+        minWidth: 200,
+        cellRendererParams: {
+          suppressCount: !rowGrouping.showRowCount,
+        },
+      },
+    } : {}),
     // Default options for better UX
     suppressCellFocus: !editable,
     enableCellTextSelection: true,
@@ -265,6 +338,8 @@ export default function AgGridImpl({
     enableCharts,
     contextMenu,
     getContextMenuItems,
+    treeData,
+    rowGrouping,
     editable,
     rowData.length,
     handleCellClicked,
@@ -294,14 +369,24 @@ export default function AgGridImpl({
 
   return (
     <div className="ag-grid-container">
-      {exportConfig?.enabled && (
+      {(exportConfig?.enabled || excelExport?.enabled) && (
         <div className="mb-2 flex gap-2">
-          <button
-            onClick={handleExportCSV}
-            className="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
-          >
-            Export CSV
-          </button>
+          {exportConfig?.enabled && (
+            <button
+              onClick={handleExportCSV}
+              className="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
+            >
+              Export CSV
+            </button>
+          )}
+          {excelExport?.enabled && (
+            <button
+              onClick={handleExportExcel}
+              className="px-3 py-1.5 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors"
+            >
+              Export Excel (CSV)
+            </button>
+          )}
         </div>
       )}
       <div 

package/src/ObjectAgGridImpl.tsx

@@ -18,12 +18,11 @@ import type {
   StatusPanelDef,
   GetContextMenuItemsParams,
   MenuItemDef,
-  IServerSideDatasource,
-  IServerSideGetRowsParams
 } from 'ag-grid-community';
-import type { DataSource, FieldMetadata, ObjectSchemaMetadata } from '@object-ui/types';
+import type { FieldMetadata, ObjectSchemaMetadata } from '@object-ui/types';
 import type { ObjectAgGridImplProps } from './object-aggrid.types';
 import { FIELD_TYPE_TO_FILTER_TYPE } from './object-aggrid.types';
+import { createFieldCellRenderer, createFieldCellEditor } from './field-renderers';
 
 /**
  * ObjectAgGridImpl - Metadata-driven AG Grid implementation
@@ -61,7 +60,6 @@ export default function ObjectAgGridImpl({
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<ObjectSchemaMetadata | null>(null);
   const [rowData, setRowData] = useState<any[]>([]);
-  const [totalCount, setTotalCount] = useState(0);
 
   // Fetch object metadata
   useEffect(() => {
@@ -115,7 +113,6 @@ export default function ObjectAgGridImpl({
 
         const result = await dataSource.find(objectName, queryParams);
         setRowData(result.data || []);
-        setTotalCount(result.total || 0);
         callbacks?.onDataLoaded?.(result.data || []);
       } catch (err) {
         const error = err instanceof Error ? err : new Error(String(err));
@@ -416,15 +413,6 @@ export default function ObjectAgGridImpl({
   );
 }
 
-/**
- * Escape HTML to prevent XSS attacks
- */
-function escapeHtml(text: string): string {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}
-
 /**
  * Get filter type based on field metadata
  */
@@ -438,166 +426,76 @@ function getFilterType(field: FieldMetadata): string | boolean {
 
 /**
  * Apply field type-specific formatting to column definition
+ * Uses field widgets from @object-ui/fields for consistent rendering
  */
 function applyFieldTypeFormatting(colDef: ColDef, field: FieldMetadata): void {
-  switch (field.type) {
-    case 'boolean':
-      colDef.cellRenderer = (params: any) => {
-        if (params.value === true) return '✓ Yes';
-        if (params.value === false) return '✗ No';
-        return '';
-      };
-      break;
-      
-    case 'currency':
-      colDef.valueFormatter = (params: any) => {
-        if (params.value == null) return '';
-        const currency = (field as any).currency || 'USD';
-        const precision = (field as any).precision || 2;
-        return new Intl.NumberFormat('en-US', {
-          style: 'currency',
-          currency,
-          minimumFractionDigits: precision,
-          maximumFractionDigits: precision,
-        }).format(params.value);
-      };
-      break;
-      
-    case 'percent':
-      colDef.valueFormatter = (params: any) => {
-        if (params.value == null) return '';
-        const precision = (field as any).precision || 2;
-        return `${(params.value * 100).toFixed(precision)}%`;
-      };
-      break;
-      
-    case 'date':
-      colDef.valueFormatter = (params: any) => {
-        if (!params.value) return '';
-        try {
-          const date = new Date(params.value);
-          if (isNaN(date.getTime())) return '';
-          return date.toLocaleDateString();
-        } catch {
-          return '';
-        }
-      };
-      break;
-      
-    case 'datetime':
-      colDef.valueFormatter = (params: any) => {
-        if (!params.value) return '';
-        try {
-          const date = new Date(params.value);
-          if (isNaN(date.getTime())) return '';
-          return date.toLocaleString();
-        } catch {
-          return '';
-        }
-      };
-      break;
-      
-    case 'time':
-      colDef.valueFormatter = (params: any) => {
-        if (!params.value) return '';
-        return params.value;
-      };
-      break;
-      
-    case 'email':
-      colDef.cellRenderer = (params: any) => {
-        if (!params.value) return '';
-        const escaped = escapeHtml(params.value);
-        return `<a href="mailto:${escaped}" class="text-blue-600 hover:underline">${escaped}</a>`;
-      };
-      break;
-      
-    case 'url':
-      colDef.cellRenderer = (params: any) => {
-        if (!params.value) return '';
-        const escaped = escapeHtml(params.value);
-        return `<a href="${escaped}" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline">${escaped}</a>`;
-      };
-      break;
-      
-    case 'phone':
-      colDef.cellRenderer = (params: any) => {
-        if (!params.value) return '';
-        const escaped = escapeHtml(params.value);
-        return `<a href="tel:${escaped}" class="text-blue-600 hover:underline">${escaped}</a>`;
-      };
-      break;
-      
-    case 'select':
-      colDef.valueFormatter = (params: any) => {
-        if (!params.value) return '';
-        const options = (field as any).options || [];
-        const option = options.find((opt: any) => opt.value === params.value);
-        return option?.label || params.value;
-      };
-      break;
-      
-    case 'lookup':
-    case 'master_detail':
-      colDef.valueFormatter = (params: any) => {
-        if (!params.value) return '';
-        // Handle lookup values - could be an object or just an ID
-        if (typeof params.value === 'object') {
-          return params.value.name || params.value.label || params.value.id || '';
-        }
-        return String(params.value);
-      };
-      break;
+  // Define field types that should use field widgets for rendering
+  const fieldWidgetTypes = [
+    'text', 'textarea', 'number', 'currency', 'percent',
+    'boolean', 'select', 'date', 'datetime', 'time',
+    'email', 'phone', 'url', 'password', 'color',
+    'rating', 'image', 'avatar', 'lookup', 'slider', 'code'
+  ];
+
+  // Use field widget renderer if the type is supported
+  if (fieldWidgetTypes.includes(field.type)) {
+    colDef.cellRenderer = createFieldCellRenderer(field);
+    
+    // Add cell editor for editable fields
+    if (colDef.editable) {
+      colDef.cellEditor = createFieldCellEditor(field);
       
-    case 'number': {
-      const precision = (field as any).precision;
-      if (precision !== undefined) {
+      // Configure editor based on field type
+      if (['date', 'datetime', 'select', 'lookup', 'color'].includes(field.type)) {
+        colDef.cellEditorPopup = true;
+      }
+    }
+  } else {
+    // Fallback to simple rendering for unsupported types
+    switch (field.type) {
+      case 'master_detail':
         colDef.valueFormatter = (params: any) => {
-          if (params.value == null) return '';
-          return Number(params.value).toFixed(precision);
+          if (!params.value) return '';
+          // Handle lookup values - could be an object or just an ID
+          if (typeof params.value === 'object') {
+            return params.value.name || params.value.label || params.value.id || '';
+          }
+          return String(params.value);
+        };
+        break;
+        
+      case 'object':
+        colDef.cellRenderer = () => {
+          const span = document.createElement('span');
+          span.className = 'text-gray-500 italic';
+          span.textContent = '[Object]';
+          return span;
+        };
+        break;
+        
+      case 'vector':
+        colDef.cellRenderer = () => {
+          const span = document.createElement('span');
+          span.className = 'text-gray-500 italic';
+          span.textContent = '[Vector]';
+          return span;
+        };
+        break;
+        
+      case 'grid':
+        colDef.cellRenderer = () => {
+          const span = document.createElement('span');
+          span.className = 'text-gray-500 italic';
+          span.textContent = '[Grid]';
+          return span;
+        };
+        break;
+        
+      default:
+        // Default text rendering
+        colDef.valueFormatter = (params: any) => {
+          return params.value != null ? String(params.value) : '';
         };
-      }
-      break;
     }
-      
-    case 'color':
-      colDef.cellRenderer = (params: any) => {
-        if (!params.value) return '';
-        const escaped = escapeHtml(params.value);
-        return `<div class="flex items-center gap-2">
-          <div style="width: 16px; height: 16px; background-color: ${escaped}; border: 1px solid #ccc; border-radius: 2px;"></div>
-          <span>${escaped}</span>
-        </div>`;
-      };
-      break;
-      
-    case 'rating':
-      colDef.cellRenderer = (params: any) => {
-        if (params.value == null) return '';
-        const max = (field as any).max || 5;
-        const stars = '⭐'.repeat(Math.min(params.value, max));
-        return stars;
-      };
-      break;
-      
-    case 'image':
-      colDef.cellRenderer = (params: any) => {
-        if (!params.value) return '';
-        const url = typeof params.value === 'string' ? params.value : params.value.url;
-        if (!url) return '';
-        const escapedUrl = escapeHtml(url);
-        return `<img src="${escapedUrl}" alt="" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;" />`;
-      };
-      break;
-      
-    case 'avatar':
-      colDef.cellRenderer = (params: any) => {
-        if (!params.value) return '';
-        const url = typeof params.value === 'string' ? params.value : params.value.url;
-        if (!url) return '';
-        const escapedUrl = escapeHtml(url);
-        return `<img src="${escapedUrl}" alt="" style="width: 32px; height: 32px; object-fit: cover; border-radius: 50%;" />`;
-      };
-      break;
   }
 }