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