Tips for organizing items in a vertical table using the v-data-table

Is it possible to set a default sorting order for true values in a v-data-table column with sortable elements? When I click on the 'sortable' icon in the header, the elements in the first column are sorted accordingly. However, upon opening the page, I would like the 'true' values to be sorted first. How can I achieve this?

   headers: [
  {
    text: '',
    sortable: true,
    value: 'status',
  }]

Html:

<v-data-table
:pagination.sync="pagination"
:headers="headers"
:items="items"
>
<template>
  <tr>
    <td>
      <v-icon v-if="status">
         {{status}}
      </v-icon>
    </td>
  </tr>
 </template>
 </v-data-table>

The values of status can include True and False.

Desired sort ordering: True True False False False

Preferably, the table should display true values before false ones.

Answer №1

To enable sorting, utilize the functionalities of sort-by and sort-desc

<v-data-table
  :pagination.sync="pagination"
  :headers="headers"
  :items="items"
  sort-by="status"
  :sort-desc="true"
>
<template>
  <tr>
    <td>
      <v-icon v-if="status">
         {{status}}
      </v-icon>
    </td>
  </tr>
 </template>
 </v-data-table>

For further information, refer to this resource

Answer №2

To implement external sorting in your Vue application, you can utilize the sortBy and sortDesc properties:

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    headers: [ { text: '', sortable: true, value: 'status' } ],
    items: [ { status: "True" }, { status: "False" }, { status: "True" } ],
    sortBy: "status",
    sortDesc: true
  })
});
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6315160623514d1b">[email protected]</a>/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63151606170a051a23514d1b">[email protected]</a>/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea9c9f8f9e838c93aad8c492">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-data-table 
    :headers="headers" 
    :items="items"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
  >
    <template v-slot:item.status="{ item }">
      <tr>
        <td>
          <v-icon v-if="item.status">{{item.status}}</v-icon>
        </td>
      </tr>
    </template>
  </v-data-table>
</v-app>

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

Having trouble parsing asynchronous script with cheerio parser

Utilizing cheerio for web crawling poses a challenge when encountering websites with asynchronous scripts. When attempting to extract all the scripts from such websites, they are often missed in the process. Here is an example of the code I am currently us ...

Struggling to form an array of arrays: encountering an issue with data.map not being a function

I have received some data in the following format: const mockData = [ { "1": [ { val1: 0.9323809524, val2: 5789.12, val3: 84.467, val4: 189.12, val5: 8, bins: 1, }, { ...

"Step-by-step guide on populating a select box with data from the scope

Hey everyone, I'm new to using Angular and hoping for some help with a simple question. I've created a form (simplified version below) that I want users to see a live preview as they fill it out. Everything was going smoothly with regular field ...

Ways to retrieve information from JSON

I am currently trying to access the values of an object that is within an array which is inside another object. The data is structured as follows: [{ "id": "99a4e6ef-68b0-4cdc-8f2f-d0337290a9be", "stock_name": "J ...

Experiencing occasional "Cannot GET /" error when using node.js on Bluemix

My Bluemix services are giving me trouble. I keep encountering the error "Cannot GET /pathname" on my node.js express services. Strangely, this issue only occurs about one-third of the time. There is no logging or error messages in the application when thi ...

Error: Attempting to access a property of an undefined value (referencing '8') was unsuccessful

Hello everyone, I am new to posting and identify as a junior Frontend developer. I'm encountering a confusing issue with the InputLabel from Material UI (ver. 5) on a specific section of the website I'm working on. On the homepage, I successfully ...

Retrieve information from a MySQL database and integrate it into a different application

This php script is used to generate a table with a "book" button next to each row. The goal is to extract the values of "phase" and "site" from the specific row where the "book" button is clicked, and transfer them to another form (in "restricted.php") fo ...

Crushing a Marionette Controller in Backbone.js

I'm trying to figure out how to properly destroy a Marionette controller. As I delve into understanding Marionette and Backbone garbage collection, I'm encountering some hurdles... The controller in question creates multiple views, each potentia ...

Setting up a Django, Django REST Framework backend along with a VueJS + webpack frontend on GCP's App Engine (standard) platform

My current setup includes: Django==3.1.4 djangorestframework==3.12.2 django-webpack-loader==0.7.0 (I am still undecided about using this - just experimenting for fun) Everything works smoothly on my local development environment. The Webpack-loader succe ...

jQuery functions perfectly in console but fails to execute when the website is loaded

Below is the code that works perfectly in the console: jQuery(".cf7_wrap_com li").each(function(){ jQuery(this).find(".first_univer input").click(function(){ var label1 = jQuery(this).parent().find("label").html(); if( ...

What is the best way to apply styling to an image that is contained within the document.write function?

I'm looking to customize the design of this cat image, but I'm struggling to locate where to incorporate the div class. It's likely a basic step, but as a beginner in JavaScript, I'm hoping that someone can assist me. document.write(&ap ...

Guide to activating "Snapping" feature using the "Select" function in Openlayers 3

I have created an application using OpenLayers 3 that allows users to draw lines or points on a map and add tags to them. While the existing functions in OL3 are helpful for drawing and modifying features, I found it challenging to select the items I drew ...

Step-by-step guide to accessing a PDF file stored locally using Angular2 and HTML5

I am attempting to access a .pdf file in local storage using an iFrame. Here is the code I have tried: In HTML file <object [data]="sanitizer.bypassSecurityTrustResourceUrl(selectedItem.FilePath)" type="application/pdf"> <iframe [src]="sanitizer ...

Tips for saving React console logs to a server

We are looking to understand the root cause of the issue occurring on the client side and figure out a way to store client console logs on the server side. How often should we send these logs to the server for storage? We also want to make sure that when ...

Different image dimensions | Cloud storage platform by Firebase

I'm in the process of developing functionality to generate thumbnails based on an uploaded file. However, I'm uncertain if my current approach is the most efficient way to accomplish this task. The section of code if (fileName.startsWith(THUMB_PR ...

Having an issue in Angular 2 where the correct function is not triggered when a button is placed within a selectable anchor

Within an anchor element, I have a button that triggers its own click listener for an editing popup module. The anchor itself has another click listener assigned to it. For example: <a (click)="onClick(myId)" class="list-group-item clearfix"> < ...

"Troubleshoot the issue of a Meteor (Node.js) service becoming unresponsive

Currently running a Meteor (Node.js) app in production that is experiencing unexplained hang-ups. Despite implementing various log statements, I have pinpointed the issue to a specific method where the server consistently freezes. Are there any tools beyo ...

Incorporate Stripe Elements into your Nuxt Js application

I recently managed to integrate Stripe into my React + Spring Boot application by following the guidelines provided in this documentation: https://stripe.com/docs/stripe-js/react. I used it in my React class component. Now, I am transitioning to Nuxt from ...

The function $scope.removeNinja cannot be found

As a beginner in Angular, I encountered an issue while working on a project that involved creating a Directory of ninjas with various functionalities implemented using Angular. Here is a snippet of my HTML file: <!DOCTYPE html> <html lang="en" n ...

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...