hi i have problem im using datatable.net-vue3 and inertia so i have component reusable

hblms

"datatables.net-dt": "^2.1.7",
"datatables.net-vue3": "^3.0.2",
///

import $ from 'jquery'; import DataTable from 'datatables.net-vue3'; import DataTablesLib from 'datatables.net'; import "datatables.net-dt/css/dataTables.dataTables.min.css"; DataTable.use(DataTablesLib); import { ref } from "vue"; const props = defineProps({ headers: Array, items: Array, }); const dataTableOptions = ref({ paging: true, searching: true, order: [], language: { search: "Recherche:", info: "Affichage de _START_ à _END_ sur _TOTAL_ entrées", lengthMenu: "Afficher _MENU_ entrées", emptyTable: "Aucune donnée disponible", zeroRecords: "Aucun enregistrement correspondant trouvé", infoEmpty: "Affichage de 0 à 0 sur 0 entrées", infoFiltered: "(filtré de _MAX_ entrées)", }, initComplete: function () { const api = this.api(); api.columns().every(function (index) { let column = this; // Skip the last column if (index < api.columns().count() - 1) { // Create input element let input = document.createElement('input'); input.placeholder = `Filtrer ${column.header().textContent}`; input.className = 'form-control form-control-sm'; // Append input to the respective header cell $(column.header()).html(input); // Event listener for user input input.addEventListener('keyup', () => { if (column.search() !== input.value) { column.search(input.value).draw(); } }); } else { $(column.header()).html(''); } }); }, });

<template>
<Division class="table-responsive">
<DataTable :options="dataTableOptions" class="display table">
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
<tr data-dt-order="disable">
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</DataTable>
</Division>
</template>

<style scoped>
.table-responsive {
min-height: 500px;
}
</style>
i have this components so in index i have used like this
<DataTable :items="subRentals" :headers="['Réf', 'Sous-traitant', 'Actions']">
<template #tbody>
<tr v-for="subRental in subRentals" :key="subRental.id" class="text-sm">
<td>
<SimpleLink v-tooltip="Voir le contrat en PDF" :href="/p/sub-rental/${subRental.id}">{{ subRental.ref }}</SimpleLink>
</td>
<td>{{ subRental.company.name }}</td>

                            <td>
                                <Division class="dropdown position-relative">
                                    <Button class="btn btn-sm btn-outline-primary rounded dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                        Actions
                                    </Button>
                                    <ul class="dropdown-menu dropdown-menu-end text-sm" aria-labelledby="dropdownMenuButton">
                                            <li><Button class="dropdown-item text-success" @click="closeSubRentalFunc(subRental)">Fermer sous-location</Button></li>

                                    </ul>
                                </Division>
                            </td>
                        </tr>
                    </template>
                </DataTable>

when i close an subRental i lclosed with form PUT on modal make it closed so it should removed from datatable but it stack like datatable preserve old state this the problem

and i juust change the databale.net i was used but when i have one record on datatable it stack and show error of nextSubling on null

allan

<tr v-for="subRental in subRentals" :key="subRental.id" class="text-sm">

You can't use v-for to create the DataTable. You have to use the techniques shown in the documentation, otherwise you end up with both Vue and DataTables trying to control the same DOM elements, and that obviously won't work.

Allan

hblms

so how about if i have complex data like this as columns

 <td>
                                    <NavLink class="" :href="`/contracts/${contract.id}/edit`">{{ contract.ref }}</NavLink>                                
                                </td>
                                <td>
                                    <SpanField class="badge px-2" :class="contract.client.is_company ? 'bg-danger' : 'bg-success'">
                                        {{ contract.client.is_company ? "SOCIÉTÉ" : "PARTICULIER" }}
                                    </SpanField>
                                </td>
                                <td>
                                    <NavLink class="" :href="`/clients/${contract.client.id}/edit`">
                                        {{ contract.client.is_company ? (contract.client.company_name?.trim() || contract.client.fullname) : contract.client.fullname }}
                                    </NavLink>
                                </td>
                                <td>
                                    <Division class="d-flex">
                                        <Image :height="30" class="me-2 my-auto" :width="30" :src="'/images/brands/' + contract.vehicle.brand.logo" />
                                        <Division class="my-auto">
                                            <NavLink class="text-nowrap" :href="`/vehicles/${contract.vehicle.id}`">
                                                {{ contract.vehicle.registration || contract.vehicle.registration_ww }}
                                            </NavLink>
                                            <br />
                                            <SpanField class="text-uppercase bg-teal-600 badge px-1">{{ contract.vehicle.model }}</SpanField>
                                        </Division>
                                    </Division>
                                </td>
                                <td>
                                    {{ formatDateTime(contract.start_date) }}
                                    <SpanField class="badge bg-orange">
                                        {{ contract.duration }} {{ contract.is_monthly ? 'Mois' : `Jour${contract.extended_duration !== 1 ? 's' : ''}` }}
                                    </SpanField>
                                    <Comment class="ms-1 text-danger" v-if="contract.remarks" v-tooltip="contract.remarks" />
                                </td>
                                <td>
                                    {{ formatDateTime(contract.end_date) }}
                                </td>
                                <td>
                                    {{ formatCurrency(contract.rent_price) }}
                                </td>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

hblms

and i have used Datatable simpler withou library of datatable-net-vue3 it work good just one problem when i have the just one record in datatable and i closed it show me this
nextSubling on null

allan

For syntax highlighting see this guide.

To use Vue components inside a DataTables column, please see the documentation here.

If you are getting an error, please create a test case using StackBltiz or a minimal git repo showing the issue.

Allan