Personalize headers in v-data-table while preserving default sorting capabilities

I'm looking to enhance my v-data-table by making the table headers "tab-able".

To achieve this, I decided to create a slot and include tabindex on the columns.

However, I encountered an issue where the sorting functionality stopped working.

Does anyone have suggestions on how to make the columns "tab-able" while maintaining the standard header functionality?

Below is the code snippet for reference:

<template v-slot:header="{ props:{ headers} }">
    <thead>
        <tr>
            <th v-for="header in headers" :key="header.value">
                <td sortable="true" tabindex="0">{{header.text}}</td>
            </th>
        </tr>
    </thead>
</template>
javascriptvue.jsvuetify.jsv-data-table

Answer №1

To maintain the default functionality, avoid overriding the header slot and instead focus on overriding only the header.<name> slot, which generates solely the header text.

If you wish to apply the same slot template for all columns, you can utilize a clever technique involving v-for and Dynamic Slot Names.

<v-data-table
  :headers="headers"
  :items="desserts"
  class="elevation-1"
>
  <template v-for="header in headers" v-slot:[`header.${header.value}`]="{ header }">
    <span tabindex="0">{{ header.text }}</span>
  </template>
</v-data-table>

Check out the demo here

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

Display JSON array as a table using JavaScript

Looking for assistance with integrating an API that queries the Instagram API. I want to consume my API and display the Tags Search results in a table format. The JSON response structure is as follows: {"data":[{"media_count":13485788,"name":"argentina"}, ...

javascripthtmljsonrequirejs

How to effectively utilize signed requests for AWS S3 when uploading images?

My project involves developing a react native application similar to Slack, and I'm currently facing an issue with image uploads to S3. I decided to use the getSignedUrl route for this functionality. The process goes as follows: the client selects a ...

javascriptamazon-web-servicesreact-nativeamazon-s3

Toggle the status of active to inactive instantaneously with the click of a

Incorporating DataTables with ajax using PHP CodeIgniter Framework has presented me with a challenge. I am struggling to toggle between Active and Inactive buttons seamlessly. My desired outcome: When the Active button is clicked, it should transition ...

javascriptphpajaxcodeigniterdatatable

Ways to update modal content upon clicking a button

I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...

javascripthtmljquerycss

Script - Retrieve the content of the code element

I am currently developing an extension for VS Code that will enhance Skript syntax support. One challenge I am facing is the inability to select the body of the code block. Skript syntax includes various blocks such as commands, functions, and events, eac ...

javascriptregextypescriptvscode-extensions

What is the recommended way to delete Mesh objects in ThreeJS?

What are some effective methods in ThreeJS for creating and deleting Meshes (comprised of Geometry and Materials) efficiently? I want to showcase latitude/longitude points on a revolving 3D globe. Each point should be clickable, revealing additional infor ...

vue.jsthree.js

Is there a way to load information retrieved from an API into a dropdown menu in Laravel with the help of VueJS and axios?

After many attempts, I still can't seem to fetch my API data into a select list successfully. Everything seems to be retrieved properly, but when it comes to displaying them, nothing shows up. Could there be an issue with my code? Here's my rout ...

laravelapivue.jsaxios

Can you explain the purpose of using the 'apply' method in this particular implementation of memoization in JavaScript?

_.memoize = function(func) { var cache = []; return function(n){ if(cache[n]){ return cache[n]; } cache[n] = func.apply(this,arguments); return cache[n]; } }; I'm curious about the usage of 'this' in func.appl ...

javascriptthisapply

What is the significance of a red dot in Visual Studio Code?

Currently diving into vue.js and I've noticed that vsCode is showing me a red dot on my code. Surprisingly, the code functions well without any issues, and other editors like Atom don't indicate any errors. Any idea what this ominous red dot sign ...

vue.jsvisual-studio-code

Issues with importing Three.js as a module - encountering an Uncaught SyntaxError:

I am currently delving into the world of three.js and working on my first project. I am following the example code provided on the three.js website. Everything runs smoothly when I have three.js stored in a folder like: js/ directory However, I am enco ...

javascriptnpmimportmodulethree.js

A promise was caught with the following error: "Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded"

As a newcomer to Angular2, I am currently developing a web application that requires three separate calls to a REST API. To test these calls, I decided to simulate the API responses by creating three JSON files with the necessary data. However, my implemen ...

javascriptjsonangulartypescript

Comparison: executing an immediately invoked function expression (IIFE) and a separate

During my recent refactoring of some legacy code, I stumbled upon the following example: // within another function const isTriggerValid = await (async () => { try { const triggers = await db.any(getTriggerBeforeBook, { param ...

javascriptnode.jstypescript

Ways to increase the date by one month in this scenario

I am facing an issue with manipulating two date variables. One of the dates is set to last Friday by default, and I am attempting to add a month to this date using the code snippet below. However, it does not produce the desired result. var StartDate = ne ...

javascriptjquery

Having trouble looping through an array of objects containing images in Javascript?

I am currently facing challenges with iterating through an array of objects that contain images. The array appears empty when logged in the console, but upon inspecting it in the console, I can see all the objects along with their iteration numbers. I have ...

javascriptarraysimage-processingvue.js

The challenge of executing JavaScript in the correct order

I am facing an issue where 5 always prints before 4 in my code snippet below. I expected the callback to postUsers within a return statement from matchAgainstAD to wait for the completion of the for loop and ad lookup before returning. What is the simple ...

javascript

Enhancing game menus for various mobile screen sizes

I've noticed a consistent pattern in the games I download from the Google Play Store - they all have a background image at the menu with clickable buttons. When testing these games on different devices, I found that the backgrounds didn't stretch ...

javascriptcsshtmlmobile

Remove nested comments using Ajax

I'm encountering a problem while attempting to delete my comments using Ajax. I believe I am on the right track but could use some guidance. Still in the process of familiarizing myself with jquery and similar technologies. While I can remove the comm ...

javascriptjqueryruby-on-railsajax

What is the best way to provide Monaco editor's loader.js and its dependencies on a local server for my React project?

Currently, I have integrated Monaco Editor in my project by utilizing the npm package Monaco Editor. When I build and serve my code on localhost, I noticed that the Loader Script is being loaded from a Content Delivery Network (CDN). I am curious to know ...

javascriptreactjsnpmwebpackmonaco-editor

Exploring Angular2: The Router Event NavigationCancel occurring prior to the resolution of the Route Guard

My application has routes protected by an AuthGuard that implements CanActivate. This guard first checks if the user is logged in and then verifies if certain configuration variables are set before allowing access to the route. If the user is authenticated ...

javascriptangulartypescriptroutes

I'm looking to create a unit test for my AngularJS application

I am currently working on a weather application that utilizes the to retrieve weather data. The JavaScript code I have written for this app is shown below: angular.module('ourAppApp') .controller('MainCtrl', function($scope,apiFac) { ...

javascripthtmlangularjsunit-testing