Search code examples
datatablevuejs3primevue

Formatting DateTime property in PrimeVue Table

I am trying to no avail to format the date on my rows in my data table. i am using a template body inside the data table to loop trhough each row to fing if column is of type date, but i keep ketting the same values per row over and over again

<template>
  <data-table :value="props.rows" stripedRows resizable-columns column-resize-mode="fit" tableStyle="min-width: 50rem"
    showGridlines scroll-height="1000px" :virtualScrollerOptions="{ itemSize: 15 }" removableSort
    sortField="row[columnKey]" :sort-order="-1">
    <column sortable v-for="(column, columnKey) in props.columns" :key="columnKey" :field="columnKey"
      :header="$t(column.name)">
      <template #body v-for="(row, rowKey) in props.rows">
        <div v-if="column.type === 'date'">
          {{ row[columnKey] !== undefined
            ? row[columnKey].toLocaleDateString() +
            " " +
            row[columnKey].toLocaleTimeString()
            : ""
          }}
        </div>
        <div v-else>
          {{ parseValue(row[columnKey]) }}
        </div>
      </template>

    </column>
    <column></column>
  </data-table>
</template>

my props are:

const props = defineProps({
  columns: Object,
  rows: Object,
  actions: Array,
  massUpdatable: Boolean,
  isLoading: Boolean,
  lastPageLoaded: Boolean,
  fullPage: Boolean,
});

im getting repeats of rows now, what am i mssing here? enter image description here

Solution

  • I followed that example and did the following:

    <template>
  <data-table :value="filteredData" stripedRows resizable-columns column-resize-mode="fit" tableStyle="min-width: 50rem"
    showGridlines scroll-height="1000px" :virtualScrollerOptions="{ itemSize: 15 }" removableSort
    sortField="row[columnKey]" :sort-order="-1">
    <column sortable v-for="(column, columnKey) in tableColumns" :key="columnKey" :field="columnKey"
      :header="$t(column.name)">
      <template #body="{ data, field }">
        {{ column.type === 'date' ? `${data[field].toLocaleDateString()} ${data[field].toLocaleTimeString()}` : data[field] }}
      </template>

    </column>
    <column></column>
  </data-table>
</template>

    the value of deconstructed data and fields in the template are the exact same as "row[columnKey]" somehow, and then i can run a 'date' condition against that value, used a template literal and it works now. its not documented anywhere how this happens though.