N
Nuxt7mo ago
Niza

Manipulate Row Values in a Nuxt UI's UTable

I am trying to manipulate the date column of my UTable to change the date format.
No description
6 Replies
Niza
NizaOP7mo ago
I want to date format to be something like this
Niza
NizaOP7mo ago
No description
Niza
NizaOP7mo ago
Template code
No description
Niza
NizaOP7mo ago
Script code
No description
Kealanau
Kealanau7mo ago
So to represent the date in that format, you'd want something like the below
const timeZone = 'UTC';
const options = { timeZone, month: 'numeric', day: 'numeric', year: 'numeric' };
// this assumes you want american date system of mm/dd/yyyy
date.toLocaleString('en-US', options);
const timeZone = 'UTC';
const options = { timeZone, month: 'numeric', day: 'numeric', year: 'numeric' };
// this assumes you want american date system of mm/dd/yyyy
date.toLocaleString('en-US', options);
You can either apply it to the column of your dataset, or apply it on that data by expanding out the template https://ui.nuxt.com/components/table#column-data
<UTable :rows="latestAppointments" :columns="appointmentColumns">
<template #date-data="{ row }">
<span class="if you want to apply styling ">{{ row.date.toLocaleString('en-US', options); }}</span>
</template>
<template #reason-data="{ row }">
<span class="if you want to apply styling ">{{ row.reason}}</span>
</template>
</UTable>
<UTable :rows="latestAppointments" :columns="appointmentColumns">
<template #date-data="{ row }">
<span class="if you want to apply styling ">{{ row.date.toLocaleString('en-US', options); }}</span>
</template>
<template #reason-data="{ row }">
<span class="if you want to apply styling ">{{ row.reason}}</span>
</template>
</UTable>
Also in future, just copy the code and provide a bit more context, as it means i could just run it locally and ensure it's working 100% instead of inferring.
Nuxt UI
Table - Nuxt UI
Display data in a table.
Niza
NizaOP7mo ago
Hi Thank you so much for responding I've attempted to implement your suggestion With the help of it, I have learnt something new about UTable in the Nuxt UI library. I managed to solve the issue in this way:
<UTable :rows="latestAppointments" :columns="appointmentColumns">
<template #date-data="{ row }">
<span class="">{{ new Date(row.date).toLocaleString('en-GB') }}</span>
</template>
<template #reason-data="{ row }">
<span class="">{{ row.reason }}</span>
</template>
</UTable>
<UTable :rows="latestAppointments" :columns="appointmentColumns">
<template #date-data="{ row }">
<span class="">{{ new Date(row.date).toLocaleString('en-GB') }}</span>
</template>
<template #reason-data="{ row }">
<span class="">{{ row.reason }}</span>
</template>
</UTable>
Want results from more Discord servers?
Add your server