Sorting Columns in PrimeVue DataTable by Date and Time

I am using a PrimeVue DataTable () with the following structure:

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

The table is populated with data fetched from an API call, and the field layout is as follows:

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

The data retrieved from the API is in the format of a JS Date() component displayed as: "08/01/2022 08:33:32" for both initialDate and finishDate.

My concern is how to sort the columns in ascending or descending order based on both the date AND time stamps. Currently, when sorting, the columns are rearranged based only on the first digits (month), but I need them to be sorted taking into account not just the month but also the time.

Any assistance would be highly appreciated. Thank you.

javascriptvue.jsvuejs3primevue

Answer №1

When data is fetched from the API, it may not be in the form of a Date() object, but rather a string. Consequently, sorting by this column could result in lexicographical order instead of chronological.

To address this issue, it is recommended to convert the API data into Date objects. Converting it to a timestamp enables easy chronological sorting:

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

You can then specify this as the field for sorting a column:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective way to ensure a user's email address is not already in my database before submitting a form?

Welcome to my first question post. I'm in the process of creating a test where users can sign in and retake it if they wish. However, I'm facing a challenge in checking whether the user's email already exists in my mariaDB database when they ...

javascriptmysqlnode.jsexpressmariadb

How to create a clickable link using Vuetify's v-btn component

As a newcomer to vue and vuetify, I would greatly appreciate some explanation and examples. My goal is to create a button that directs users to an external site, like youtube.com. Below is the code I currently have, but unfortunately it's not function ...

javascriptvue.jsvuetify.js

Leveraging AngularJS to enhance the dynamic HTML content within Datatables

My angular application includes a Datatable where I alter cell content to include HTML elements. In the given code snippet, I specifically modify the cell content of the 5th column to incorporate links. Additionally, I intend to implement a tooltip featur ...

javascriptjqueryhtmlangularjstwitter-bootstrap

Conceal a request URL within JavaScript through the use of Laravel/Ajax

I have an idea that I'm not sure is great or even feasible, but I really need to make it work. I am attempting to obfuscate a URL that needs to be used in a Javascript function as a parameter. This is what I currently have: <script> myFunction ...

javascriptphpjqueryajaxlaravel-4

Retrieve a snippet of code following the image URL on your web browser

While attempting to change the background image upon hovering, I encountered an interesting issue. The code for the image URL initially appears as follows: background-image: url('../assets/img/project1.png'); However, upon inspecting the co ...

vue.js

Controlling international shortcuts for numerous npm packages

Within my root folder, I have 3 npm projects organized in a more complex structure than the following example (using webpack, JS frameworks, etc.), but for simplicity sake, here is the layout: root ├── root_index.js ├── package.json ├── p ...

javascriptnode.jsnpm

Tips for accessing .js variables in .ejs files

I am facing an issue with my index.js and list.ejs files in Express. Here is the relevant code: index.js: const express = require("express"); const app = express(); app.set("view engine", "ejs"); app.set("views", __dirname + "\\views"); let ...

javascriptnode.jsexpressejstemplate-engine

Tips for automatically setting focus to the following cell after inserting a new row in AngularJS

Transitioning from the Knockout world to Angular, I am facing an issue with a key-press event for tab. Whenever I add a new row in the table, the focus shifts to the information icon in the URI bar instead of the next cell in the newly created row. I belie ...

javascriptangularjshtml

Choosing KineticJS path based on its identification number

I've been working on creating an interactive map using some prebuilt templates. Each country in the map highlights when the mouse hovers over it. My question is, how can I make another country, like Brazil, highlight when any country is hovered over? ...

javascriptkineticjs

Executing the JavaScript function on a batch of 6 IDs at once (should return every 6 calls?)

I'm curious if there's a function available that can group called data into sets of 6. Here's the expanded version of the code var currentResults; function init() { getProducts(); } function getProducts() { $.ajax({ url:" ...

javascriptjqueryajaxdom

Implementing relative pathing in front-end development while using ExpressJS for the back-end

I'm currently in the process of developing an application with Express 4.14. When it comes to routing, I have a situation where the incoming request is "https://example.com/page", and I am using res.sendFile(__dirname + "/../client/pages/page/index.ht ...

javascriptnode.jsexpresspath

Developing a pop-up feature that triggers upon clicking for a miniature rich text editing

Looking to integrate the Tiny rich text editor into my code. Check out the TextEditor.js component below: import React from 'react'; import { Editor } from '@tinymce/tinymce-react'; class App extends React.Component { handleEditorCha ...

javascriptreactjsnext.jstinymcetinymce-4

In order to resolve this issue, I must eliminate any duplicate objects and then calculate the total sum using JavaScript

I have successfully removed the duplicates so far, but now I am stuck on how to sum the Total_Quantity. Is there a way to achieve this within the reduced method itself? Any help would be appreciated. Thank you. const test = [ { Item_Nam ...

javascriptarraysjsonobjectreduce

Highcharts is experiencing a duplication issue with the Y-Axis Series

This is a snippet from my code: $.get('https://dl.dropboxusercontent.com/u/75734877/data.csv', function (data) { var lines = data.split('\n'); $.each(lines, function (lineNo, line) { var items = line.split(',& ...

javascriptjqueryhighcharts

Utilizing Angular's ng-repeat with varying directives for each iteration

I am trying to utilize ng-repeat within Angular to iterate through multiple <li> elements with a directive embedded. My goal is to have the first two items in the ng-repeat display differently in terms of styling and content compared to the remaining ...

javascripthtmlcssangularjs

Removing users from a Socket.IO chat room using Node.js

I am facing an issue with removing users from Socket.IO when their browser is closed. The 'user' in the array 'users[]' is not getting removed or updated. Additionally, I would like to update the users on the client side as well. Can so ...

javascriptnode.jswebsocketsocket.io

Trouble displaying MongoDB data on Meteor template

As I embarked on building my first app with Meteor, everything seemed to be going smoothly until I encountered an issue where a collection was no longer displaying in a template. Here is the code snippet: App.js Tasks = new Mongo.Collection("tasks"); i ...

javascriptmongodbmeteor

Vue alert: A duplicate key with the value of '10' has been identified. This could potentially lead to an issue with updates

I've been encountering a persistent error that I can't seem to resolve: [Vue warn]: Duplicate keys detected: '10'. This issue is causing an update error in my application. Despite trying the following steps, the error continues to appe ...

javascriptjsonvue.jsaxiosv-for

What is causing the backslash character to be removed from my ajax request?

When using Ajax to call a rest endpoint, the request takes two parameters: user and permission. $.ajax({ type: 'GET', cache: false, url: "/app/Rest/4.0/UserManagement/AddPermissionToUser", data: { username: encodeURI(user ...

javascriptjqueryajaxrestrazor-2

Ways to increase the number of rows on datatables while utilizing ajax integration

My issue lies in trying to implement pageLength for my datatables using ajax. Instead of displaying 50 table rows per page as expected, it shows the entire dataset on each page. Here is the code snippet I am working with: JS $('table.dataTableAjax&ap ...

javascriptjquerydatatables