Nuxt•8mo ago

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.

6 Replies

NizaOP•8mo ago

I want to date format to be something like this

NizaOP•8mo ago

Template code

NizaOP•8mo ago

Script code

Kealanau•8mo 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.

NizaOP•8mo 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>

Gaming

Programming

Manipulate Row Values in a Nuxt UI's UTable