Tips for organizing date columns in Bootstrap-Vue when utilizing a formatter for presentation purposes

I am working with a table containing date objects, and I have transformed them for display using the following code:

{
   key: "date",
   formatter: (value, key, item) => {
     return moment(value).format("L");
   },
   sortable: true
}

However, this transformation has caused issues with the sorting function because it is now a localized string. I am looking for a way to override this and return to sorting by dates, something like:

 sortingKey: value=>value

Unfortunately, I haven't been able to find a solution that fits my requirements.

Update: I have managed to solve the sorting issue, but the solution feels a bit messy to me. A cleaner solution would have looked like this:

field: {
  key: 'date',
  sorter: (value, item, fieldMeta) => {
    // return a comparison that reacts to <
    // key matches fieldMeta.key
    // default implementation
    return fieldMeta.formatter ? fieldMeta.formatter(value, fieldMeta.key, item) : value;
  }

Answer №1

Mastering the sort-compare function is crucial for successful sorting. This method compares two values and necessitates at least three arguments: item a, item b, and the key key that the sorting is based on. Keep in mind that a and b represent the entire data objects being compared.

To implement the above example, follow these steps:

export default {
  // ...
  methods: {
    mySortCompare(a, b, key) {
      if (key === 'date') {
        // If the date field is a `Date` object, subtracting the values works based on epoch value
        return a[key] - b[key]
      } else {
        // Allow b-table to handle sorting other fields (besides the `date` field)
        return false
      }
    }
  }
  // ...
}
<b-table :items="items" :fields="fields" :sort-compare="mySortCompare">
  <!-- ... -->
</b-table>

Answer №2

The component required for your task is called sort-compare.

To learn more about how to use it, visit:

You can find its implementation in the source code here: https://github.com/bootstrap-vue/bootstrap-vue/blob/a660dc518246167aa99cd3cac16b5f8bc0055f2d/src/components/table/helpers/mixin-sorting.js#L85

Keep in mind that this component is configured for the entire table, not just individual columns. If a column should adhere to the default sorting order, simply return undefined, null, or false, as shown in lines 104 to 107.

Answer №3

In my situation, the simple solution was to include sortByFormatted: true in the specific field:

{
  key: 'title',
  sortable: false,
  sortByFormatted: true,
  formatter: (value, key, item) => {
    return item.first_name + ' ' + item.last_name;
  },
},

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

How can you set an input field to be initially read-only and then allow editing upon clicking a button using Vue.js?

//I have two divs that need to be set as readonly initially. When an edit button is clicked, I want to remove the readonly attribute and make them editable. <div> <input type="text" placeholder="<a href="/cdn-cgi/l/email-protection ...

Retrieving component layout from file

Storing the component template within inline HTML doesn't seem very sustainable to me. I prefer to load it from an external file instead. After doing some research, it appears that utilizing DOMParser() to parse the HTML file and then incorporating th ...

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Suppose I have a scenario where I create a button like this: <button #myButton>My Button</button> ...and then use ViewChild in the following way: @ViewChild('myButton', { static: true }) createButton: ElementRef; In this case, creat ...

Seeking assistance with basic Javascript/Jquery for Ajax on Rails 3 - can anyone help?

I've been diving into JavaScript and hit a roadblock. At the moment, I have a very basic gallery/image application. My goal is to create a functionality where clicking on an image will lead the user to a URL stored in my model data using AJAX. Additi ...

Python Selenium scraping script encountered an issue: Javascript element could not be located

I'm currently practicing my skills in scraping Javascript frontend websites and decided to work on the following site: While attempting to locate two elements using their xPath, I encountered an issue. The first element, the title, I was able to find ...

Eliminate the option to locate columns in the column selector of the mui DataGridPro

Currently, I am creating a data table for a personal project. Utilizing the DataGridPro element from material ui has been quite satisfying, especially with the column selector feature. However, I wish to eliminate the "find column" section. Is it feasibl ...

Vue3 - Utilizing a method to dynamically alter an input property

Currently, I am in the process of developing a Vue application that incorporates a map feature. The main functionality involves determining whether a given position on the map is over water or land. If the position is over water, I want to iterate through ...

Is it necessary to dispose of node.js domains? When is the appropriate time to do so?

In my Express application, I utilize domains for each incoming request. To ensure that all subsequent middlewares are executed within a domain, I've implemented a middleware. app.use(function(req, res, next) { var d = domain.create(); d.req ...

Why does the address bar show value changes in IE when using window.location.hash, but the value doesn't change in the DOM when going

Here is a sample JavaScript code that attempts to detect the back button event: document.location.hash="#1"; document.location.hash="#2"; document.location.hash="#3"; function check() { if("#3"!=window.location.hash) { alert("Back button clic ...

Collaborating and passing on a MongoDB connection to different JavaScript files

I am currently working with Node.js/Express.js/Monk.js and attempting to share my MongoDB connection across multiple JS files. Within apps.js, I have set up the following: var mongo = require('mongodb'); var monk = require('monk'); va ...

best way to display an array in HTML

When I input a manufacturer, I want to display the complete data from each object inside the array in the HTML. However, when I call the function on the HTML page, all I get back is the word object repeated as many times as the Manufacturer is defined in ...

What is the best way to convert this jQuery code into an AngularJS implementation?

I'm diving into the world of AngularJS and looking for a more elegant solution using AngularJS principles Controller $scope.filter = function($event, active, id) { var html = ""; if(active){ $http({method: 'GET& ...

Error: The reference to Vue has not been declared

We are in the process of implementing Jest into our current project. I created a sample test code, but encountered the following error: ReferenceError: Vue is not defined 1 | import User from "../components/modal/ad/AdAdd"; > 2 ...

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Recently, I encountered an issue while trying to create a dropdown menu using Jquery. The problem arose when attempting to select the second link, as the entire menu would disappear. Additionally, is there a way to ensure that only one dropdown menu is vis ...

Having trouble loading services within my Angular controller

After developing my Angular application, I added some basic code to my controller which is displayed below. Now, I am attempting to include two services that I created in my services.js file. This file is being loaded in my index.html and required within m ...

When two $scopes are updated simultaneously, it leads to the duplication of data

Here is the snippet of code I am working with: $scope.addToOrder = function(index) { var tempItem = $scope.item; if (tempItem[index].validate == true){ if (_.isEmpty($scope.item2) == true) { $scope.item2.push ...

Working with Variables in Handlebars with Node.js

Is it possible to reference an object key with a space in a handlebars view? The specific key is "Record Number" within the object, but I am encountering difficulties when trying to reference it in the view. Here's the code snippet from the view: {{# ...

steps for executing a Google script

In my program, the structure is as follows: // JavaScript function using Google Script 1. function F1() { ...... return (v1); } // HTML code for Google 1. <script> 2. function F2() { 3. alert ( 1 ); 4. function F2(); 5. alert ( 2 ); 6 ...

Issue with docker-composer module not being detected specifically on windows operating system

We are currently in the process of setting up a container running node.js with docker (specifically docker-compose, as we plan to incorporate mongodb later). Our approach involves copying the package.json in the Dockerfile and then creating a volume mount ...

Retrieving multiple selected row values using an ASP Repeater

Within my repeater, I have three values bound: a visible "User Name" column, a visible "Business" column, and a hidden field called "UserId". My goal is to implement the following functionality: when a row is clicked, it should highlight in a different c ...