Llevo horas intentando insertar checkboxs en una tabla con Vue y me está resultando imposible.
Estoy usando primeVue para los componentes y por mucho que leo la documentación de la DataTable me está resultando imposible comprenderla.
Os paso una foto de lo que estoy intentando:
Cada vez que inserto el componente RadioButton de primeVue o me lo pone arriba fuera de la tabla o abajo fuera de la tabla. Os paso el código por si os facilita la respuesta:
import Column from "primevue/column";
import DataTable from "primevue/datatable";
import { reactive } from "vue";
import Button from "primevue/button";
import RadioButton from "primevue/radiobutton";
const state = reactive<{
tableItems: any[];
}>({
tableItems: [],
});
setTimeout(() => {
state.tableItems = [
{
policy: "Póliza",
// eslint-disable-next-line sonarjs/no-duplicate-string
name: "Nombre y Apellidos",
age: "Edad",
rol: "Rol",
dni: "DNI",
},
{
policy: "Póliza",
name: "Nombre y Apellidos",
age: "Edad",
rol: "Rol",
dni: "DNI",
},
{
policy: "Póliza",
name: "Nombre y Apellidos",
age: "Edad",
rol: "Rol",
dni: "DNI",
},
{
policy: "Póliza",
name: "Nombre y Apellidos",
age: "Edad",
rol: "Rol",
dni: "DNI",
},
];
}, 2000);
function btnAlert() {
alert("Abriendo!");
}
</script>
<template>
<div id="app">
<DataTable
:value="state.tableItems"
:paginator="true"
:rows="10"
:rowsPerPageOptions="[10, 25, 50]"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
>
<Column field="policy" header="Póliza"></Column>
<Column field="name" header="Nombre y Apellidos"></Column>
<Column field="age" header="Edad"></Column>
<Column field="rol" header="Rol"></Column>
<Column field="dni" header="DNI"></Column>
</DataTable>
<RadioButton />
<Button type="submit" :label="'Abrir Caso'" @click="btnAlert" />
</div>
</template>
He intentado poner el componente RadioButton dentro de DataTable, en Column, dentro de Column... y nada.
templating
?