Configuring a Table with Child Rows in Nuxt3
Configuring a Table with Child Rows in Nuxt3
choongsil
Posts: 4Questions: 3Answers: 0
I'm sorry to ask such a basic question.
I'm currently setting up a project using Nuxt3 and TypeScript, and I've created a table using datatables.net-vue3. Now, I want to add a toggle button in the first column to show and hide child rows, but I'm completely stuck and can't figure it out.
Below is the configuration of the component I've written.
I know this is a very basic question, but I would appreciate your help.
Happy New Year!
<template>
<v-container>
<v-col cols="12">
<DataTable :data="data" :columns="columns" class="table table-hover table-striped text-no-wrap" :options="options" width="100%"
ref="table">
</DataTable>
</v-col>
</v-container>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';
DataTable.use(DataTablesCore);
let dt:any;
const table = ref();
onMounted( ()=> {
dt = table.value;
});
const data = [
{ nowProgress: "방문완료", position: "seo", name: "kim", adress: "korea", age: "34", phone: "010-9999-8888" },
];
const columns = [
{ data: 'nowProgress', title: '현재상태' },
{ data: 'position', title: '상담자' },
{ data: 'name', title: '이름' },
{ data: 'adress', title: '거주지' },
{ data: 'age', title: '나이' },
{ data: 'phone', title: '연락처' },
];
const options = {
lengthMenu: [
[10, 25, 50, -1],
['10건', '25건', '50건', '모두']
],
responsive: {
details: true
},
select: true,
language: { search: "검색", info: "전체 _TOTAL_ 건 중 _END_ 건", paginate: { previous: "이전", next: "다음" }, lengthMenu: "페이지당 _MENU_ 표시"},
};
</script>
<style>
@import 'bootstrap';
@import 'datatables.net-bs5';
</style>
Answers
At the moment it isn't yet possible to have Vue components as part of a cell's contents. That will change with the release of DataTables 2 and a major update to the Vue component for DataTables, which should happen later this month.
Allan