Trier la colonne PrimeVue DataTable par date/heure

Question

J'ai une DataTable PrimeVue (https://primefaces.org/primevue/datatable) disposée comme suit :

<DataTable
  :rows = "5"
  :value = "apiItems"
>
  <Column
    v-for="data in columns"
    :field="data.field"
    :header="data.header"
    :key="data.field"
    :sortable="true"
    />
</DataTable>

où le tableau est rempli avec les données reçues de l'appel API, avec la disposition des champs répertoriée ci-dessous :

const columns = [
  { field: 'initialDate', header: 'Initial Date'},
  { field: 'finishDate', header: 'Finish Date'}
];

Les données récupérées de l'API se présentent sous la forme du composant JS Date() et s'affichent comme suit : initialDate et finishDate sont tous deux "08/01/2022 08:33:32"

Comment trier une colonne par date et horodatage par ordre croissant ou décroissant, et pour le moment, trier la colonne consiste simplement à réorganiser les valeurs en fonction du premier nombre disponible (qui se trouve être le mois dont j'ai besoin) ; non seulement pour correspondre au bon mois, mais aussi pour trier en fonction du temps.

Toute aide est appréciée, merci.

Answer 1

Le contenu que vous recevez de l'API ne peut pas être Date() 对象，但可能是 string. Ainsi, si vous effectuez un tri selon cette colonne, les lignes seront triées lexicographiquement et non chronologiquement.

Pour éviter cela, vous devez convertir les données de l'API en Date objets. Le tri chronologique est très pratique si vous le convertissez en horodatage :

for (item of apiItems) {
  item.initialDateObj = new Date(item.initialDate)
  item.initialDateTimestamp = item.intialDateTimeObj.getTime()
}

Vous pouvez ensuite le spécifier comme champ pour trier la colonne par :

const columns = [
  { field: 'initialDate', sortField: 'initialDateTimestamp', header: 'Initial Date'},
  { field: 'finishDate', sortField: 'finishDateTimestamp', header: 'Finish Date'}
];