0
410
Vistas¿Cómo fusionar celdas en una sola columna?
Dado el código de muestra usando ag-grid con Vue 3
<script setup lang="ts"> import "ag-grid-community/dist/styles/ag-grid.css"; import "ag-grid-community/dist/styles/ag-theme-alpine.css"; import { AgGridVue } from "ag-grid-vue3"; import { ref } from "vue"; const columnDefs = ref([ { field: "person", }, { field: "car", }, ]); const rowData = ref([ { person: "person-1", car: "car-1", }, { person: "person-1", car: "car-2", }, { person: "person-1", car: "car-3", }, { person: "person-2", car: "car-4", }, { person: "person-3", car: "car-5", }, { person: "person-3", car: "car-6", }, ]); </script> <template> <ag-grid-vue style="width: 500px; height: 500px" class="ag-theme-alpine" :columnDefs="columnDefs" :rowData="rowData" > </ag-grid-vue> </template>Obtendrá el siguiente resultado
Podría agrupar la tabla según la persona, pero ¿hay alguna forma de combinar celdas en una sola columna?
Creo que no puedo usar la expansión de filas para una sola definición de columna porque dentro de la función rowSpan no es posible decirle a ag-grid que combine varias celdas de una sola columna.
¿Algunas ideas?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
¿Estás seguro de que la expansión de filas no funcionará? ¿Puedes intentar implementar esto?
function rowSpan(params) { const person = params.data.person; return rowData.value.filter((e) => e.person === person).length; } const columnDefs = ref([ { field: "person", rowSpan: rowSpan, }, { field: "car", }, ]);
·
Juan Pablo Isaza
Denunciar
Responde la pregunta