Configuring a Table with Child Rows in Nuxt3

Configuring a Table with Child Rows in Nuxt3

choongsilchoongsil 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

  • allanallan Posts: 63,446Questions: 1Answers: 10,465 Site admin

    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

Sign In or Register to comment.