Hello, i have i problem with implementation the DataTable.net-vue3

hblms

here my code:

<script setup>
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-dt';

DataTable.use(DataTablesCore);

const props = defineProps({
    subRentals: Object
});

const columns = [
    { title: 'Réf', data: null, render: 'ref' },
    { title: 'Sous-traitant', data: null, render: 'company' },
    { title: 'Client', data: null, render: 'client' },
    { title: 'Véhicule', data: null, render: 'vehicle' },
    { title: 'Avances', data: null, render: 'total' },
    { title: 'Prix de location', data: null, render: 'rentPrice' },
    { title: 'Sortie le', data: 'start_date', render: 'startDate' },
    { title: 'Retour le', data: 'end_date', render: 'endDate' },
    { title: 'Solde', data: null, render: 'financials' },
    { title: 'Agence', data: null, render: 'agency' },
    { title: 'Actions', data: null, render: 'actions' },
];
</script>
<template>
<DataTable :data="subRentals" :columns="columns">
                        <template #ref="props">
                            <SimpleLink v-tooltip="`Voir le contrat en PDF`" :href="`/p/sub-rental/${props.rowData.id}`">{{ props.cellData }}</SimpleLink>
                        </template>
                        <template #company="props">
                            {{ props.rowData.company ? props.rowData.company.name : "Non-défini" }}
                        </template>
                        <template #client="props">
                            <NavLink :href="`/clients/${props.rowData.client.id}/edit`">
                                {{ props.rowData.client.is_company ? (props.rowData.client.company_name?.trim() || props.rowData.client.fullname) : props.rowData.client.fullname }}
                            </NavLink>
                        </template>
                        <template #vehicle="props">
                            <Division class="d-flex">
                                <Image :height="30" class="me-2 my-auto" :width="30" :src="'/images/brands/' + props.rowData.brand.logo" />
                                <Division class="my-auto">
                                    <Text class="m-0 text-nowrap">{{ props.rowData.registration }}</Text>
                                    <SpanField class="text-uppercase bg-teal-600 badge px-1">{{ props.rowData.model }}</SpanField>
                                </Division>
                            </Division>
                        </template>
                        <template #total="props">
                            <Text class="m-0 border mb-1 badge text-primary border-2 border-primary">TOTAL: {{ formatCurrency(props.rowData.total) }}</Text>
                            <Text class="m-0 border mb-1 badge border-2" :class="remainingAmount(props.rowData.total, props.rowData.amount_paid) > 0 ? 'border-danger text-danger' : 'border-success text-success'">
                                RESTE: {{ formatCurrency(remainingAmount(props.rowData.total, props.rowData.amount_paid)) }}
                            </Text>
                            <br />
                            <template v-if="$hasPermission('list_payments_sub_rental')">
                                <NavLink class="btn btn-sm btn-success px-4 py-0" :href="`/sub-rental/${props.rowData.id}/payments-history`">Payé</NavLink>
                            </template>
                        </template>
                        <template #rentPrice="props">
                            {{ formatCurrency(props.rowData.rent_price) }}
                            <Text class="m-0 border mb-1 badge text-primary border-2 border-primary">ST: {{ formatCurrency(props.rowData.rent_price_base || 0) }}</Text>
                        </template>
                        <template #startDate="props">
                            {{ formatDateTime(props.rowData.start_date) }}
                        </template>
                        <template #endDate="props">
                            {{ formatDateTime(props.rowData.end_date) }}
                            <SpanField :class="getStatusClass(props.rowData.start_date, props.rowData.end_date)">
                                {{ getStatus(props.rowData.start_date, props.rowData.end_date) }}
                            </SpanField>
                            <Text class="m-0 badge bg-brown-400" v-if="props.rowData.extended_duration">Prolonger: {{ props.rowData.extended_duration }} {{ props.rowData.is_monthly ? 'Mois' : `Jour${props.rowData.extended_duration !== 1 ? 's' : ''}` }}</Text>
                        </template>
                        <template #financials="props">
                            <Text class="m-0 badge bg-teal">TOTAL: {{ formatCurrency(props.rowData.rent_total || 0) }}</Text>
                            <Text class="m-0 badge bg-orange">DUE: {{ formatCurrency(props.rowData.rent_total_base || 0) }}</Text>
                            <Text class="m-0 badge bg-info">BENEFICE: {{ formatCurrency((props.rowData.rent_total || 0) - (props.rowData.rent_total_base || 0)) }}</Text>
                        </template>
                        <template #agency="props">
                            <SpanField v-if="props.rowData.agency" class="badge" :class="props.rowData.agency.color">{{ props.rowData.agency.company_name }}</SpanField>
                            <template v-else>Non-défini</template>
                        </template>
                        <template #actions="props">
                            <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">
                                    <template v-if="$hasPermission('edit_sub_rental')">
                                        <li><Button class="dropdown-item text-success" @click="closeSubRentalFunc(props.rowData)">Fermer la sous-location</Button></li>
                                        <li><hr class="m-1" /></li>
                                        <li><NavLink class="dropdown-item" :href="`/sub-rentals/${props.rowData.id}/edit`">Modifier</NavLink></li>
                                        <li><Button class="dropdown-item" @click="extendedDuration(props.rowData)">Prolonger</Button></li>
                                    </template>
                                    <template v-if="$hasPermission('list_payments_sub_rental')">
                                        <li><NavLink class="dropdown-item" :href="`/sub-rental/${props.rowData.id}/payments-history`">Paiements</NavLink></li>
                                    </template>
                                    <li><SimpleLink class="dropdown-item" :href="`/p/sub-rental/${props.rowData.id}`">Voir le contrat</SimpleLink></li>
                                    <template v-if="$hasPermission('create_sub_rental_invoice')">
                                        <li v-if="props.rowData.invoice"><SimpleLink class="dropdown-item" :href="`/p/invoice/${props.rowData.invoice.id}`">Voir la facture</SimpleLink></li>
                                        <li v-else><Button class="dropdown-item" @click="invoiceGenerate(props.rowData.client, props.rowData.id)">Générer une facture</Button></li>
                                    </template>
                                    <template v-if="$hasPermission('edit_sub_rental')">
                                        <li><Button class="dropdown-item text-warning" @click="cancelReservation(props.rowData.id)">Annuler la sous-location</Button></li>
                                    </template>
                                    <template v-if="$hasPermission('delete_sub_rental')">
                                        <li><hr class="m-1" /></li>
                                        <li><Button class="dropdown-item text-danger" @click="deleteItem(props.rowData.id)">Supprimer la sous-location</Button></li>
                                    </template>
                                </ul>
                            </Division>
                        </template>
                    </DataTable>
</template>

here i need to ask is that correct or not?
the props is render from backend with inertia

hblms

i have a fixed by adding #

const columns = [
    { title: 'Réf', data: null, render: '#ref' },
    { title: 'Sous-traitant', data: null, render: '#company' },
    { title: 'Client', data: null, render: '#client' },
    { title: 'Véhicule', data: null, render: '#vehicle' },
    { title: 'Avances', data: null, render: '#total' },
    { title: 'Prix de location', data: null, render: '#rentPrice' },
    { title: 'Sortie le', data: 'start_date', render: '#startDate' },
    { title: 'Retour le', data: 'end_date', render: '#endDate' },
    { title: 'Solde', data: null, render: '#financials' },
    { title: 'Agence', data: null, render: '#agency' },
    { title: 'Actions', data: null, render: '#actions' },
];

but now i have little problem is when i update (on modal datatable change new values and i have use change data on page seprate and return to index it stack with old values untill i reload whole page with F5 )

allan

Can you create a test case on StackBltiz, a minimal git repo or similar so I can take a look and debug it.

Allan

hblms

i have used datatable with vue js and laravel and inertia Js mixed so the data when update inertia handle route it return data in props so it not render on datatable like datatable still show old data until i click f5 and when i update in other page and return to index it show datatable it still has old data until i relload and there are another case when i return from update to index actions not work show ref on null like they missing DOm or something like that