Update

client/tabs/Desktop.js

@@ -1,24 +1,39 @@
 import { Alert } from "sigpro-ui";
 import { Grid } from "sigpro-grid";
-import { isDark} from "../App.js";
+import { isDark } from "../App.js";
+import { h, $ } from "sigpro";
 
 export const Desktop = () => {
+    const test = $(55);
     const rowData = [
         { id: 1, nombre: "Juan Pérez", edad: 28, ciudad: "Madrid", activo: true, fecha: "2024-01-15" },
         { id: 2, nombre: "María García", edad: 34, ciudad: "Barcelona", activo: true, fecha: "2024-02-20" },
         { id: 3, nombre: "Carlos López", edad: 45, ciudad: "Valencia", activo: false, fecha: "2024-03-10" },
         { id: 4, nombre: "Ana Martínez", edad: 23, ciudad: "Sevilla", activo: true, fecha: "2024-04-05" }
     ];
-
+    const detailCellRendererParams = {
+        // provide the Grid Options to use on the Detail Grid
+        detailGridOptions: {
+            columnDefs: [
+                { field: 'callId' },
+                { field: 'direction' },
+                { field: 'number' }
+            ]
+        },
+        // get the rows for each Detail Grid
+        getDetailRowData: params => {
+            params.successCallback(params.data.callRecords);
+        }
+    }
     const columnDefs = [
-        { field: "id", headerName: "ID", width: 80, filter: 'agMultiColumnFilter' },
+        { field: "id", headerName: "ID", width: 80, filter: 'agMultiColumnFilter', cellRenderer: "agGroupCellRenderer" },
         { field: "nombre", headerName: "Nombre", width: 150, filter: 'agMultiColumnFilter', editable: true },
         { field: "edad", headerName: "Edad", width: 100, filter: 'agMultiColumnFilter' },
         { field: "ciudad", headerName: "Ciudad", width: 150, filter: 'agMultiColumnFilter' },
-        { 
-            field: "activo", 
-            headerName: "Activo", 
-            width: 100, 
+        {
+            field: "activo",
+            headerName: "Activo",
+            width: 100,
             filter: 'agMultiColumnFilter',
             cellRenderer: (params) => params.value ? "✅ Sí" : "❌ No"
         },
@@ -28,6 +43,10 @@ export const Desktop = () => {
     // ✅ GridOptions completamente actualizado
     const gridOptions = {
         columnDefs: columnDefs,
+        detailCellRendererParams: detailCellRendererParams,
+        //aggrid enable context menu
+        contextMenu: true,
+        masterDetail: true,
         // 1. CORREGIDO: rowSelection con la sintaxis nueva
         rowSelection: {
             mode: "multiRow",          // o "singleRow" para selección simple
@@ -57,16 +76,19 @@ export const Desktop = () => {
         console.log("Filas seleccionadas:", selectedRows.length);
     };
 
-    return Grid({
-        data: rowData,
-        options: gridOptions,
-        on: {
-            onGridReady: onGridReady,
-            onCellClicked: onCellClicked,
-            onSelectionChanged: onSelectionChanged
-        },
-        class: "my-grid",
-        style: "height: 800px; width: 100%;",
-        dark: isDark()
-    });
+    return div([
+        button({class: "btn", onclick: () => console.log(test(test()+1))}, ()=>test()),
+        Grid({
+            data: rowData,
+            options: gridOptions,
+            on: {
+                onGridReady: onGridReady,
+                onCellClicked: onCellClicked,
+                onSelectionChanged: onSelectionChanged
+            },
+            class: "my-grid",
+            style: "height: 800px; width: 100%;",
+            dark: isDark()
+        })
+    ])
 };