94 lines
3.6 KiB
JavaScript
94 lines
3.6 KiB
JavaScript
import { Alert } from "sigpro-ui";
|
|
import { Grid } from "sigpro-grid";
|
|
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', 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,
|
|
filter: 'agMultiColumnFilter',
|
|
cellRenderer: (params) => params.value ? "✅ Sí" : "❌ No"
|
|
},
|
|
{ field: "fecha", headerName: "Fecha Registro", width: 130, filter: 'agMultiColumnFilter' }
|
|
];
|
|
|
|
// ✅ 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
|
|
enableClickSelection: true, // ← Reemplaza a suppressRowClickSelection
|
|
checkboxes: false
|
|
},
|
|
enableCellTextSelection: true,
|
|
animateRows: true,
|
|
// domLayout: 'autoHeight'
|
|
// 2. CORREGIDO: stopEditingWhenCellsLoseFocus eliminado (o déjalo si lo necesitas)
|
|
// Si lo necesitas, puedes dejarlo. La advertencia no es un error crítico.
|
|
// stopEditingWhenCellsLoseFocus: true
|
|
};
|
|
|
|
const onGridReady = (params) => {
|
|
console.log("Grid lista", params);
|
|
params.api.sizeColumnsToFit();
|
|
};
|
|
|
|
const onCellClicked = (params) => {
|
|
console.log("Celda clickeada:", params.data);
|
|
Alert({ class: "alert-info" }, `Clicked: ${params.data.nombre}`);
|
|
};
|
|
|
|
const onSelectionChanged = (params) => {
|
|
const selectedRows = params.api.getSelectedRows();
|
|
console.log("Filas seleccionadas:", selectedRows.length);
|
|
};
|
|
|
|
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()
|
|
})
|
|
])
|
|
}; |