Is there a way to incorporate hyperlinks into the Application column of my v-data-table component?

When loading data table from the database, I have included links along with the names of the Applications. However, I only want to display the Application name and open the corresponding link when clicked.

    headers: [
      {
        text: 'Name',
        left: true,
        value: 'CustomerFullName',
      },
      { text: 'Application Name', value: 'ApplicationName' },
      { text: 'Country', value: 'CustomerCountryCode' },
      { text: 'Email Adress', value: 'CustomerEmailAddress' },
      { text: 'Status', value: 'NewStatus'},
      { text: 'CB Status', value: 'CBStatusID' },
      { text: 'Trial ending', value: 'FormattedTrialEndsAt' },
      { text: 'Next billing at', value: 'FormattedCBNextBillingAt'},
      { text: 'User Limit', value: 'UserLimit' },
      { text: 'QuickBooks', value: 'QBEnabled' },
      { text: 'Wizard', value: 'NewWizardStatus'}
    ],



    <td v-for="(header, index) in headers" :key="index"
        :class="[ index === 0? 'text-xs-left': 'text-xs-center', 'body-2', 'ma-0', 'pa-0', 'pl-2']" v-if="header.value!==''">
      {{renderData(props.item, header)}}
    </td>
javascriptvue.jsdatatablehrefvuetify.js

Answer №1

If you want to customize the header name in a data table, you can pass a template tag for that specific column.

<v-data-table
          :headers="headers"
          class="elevation-1">
  <template v-slot:item.data.dataName="{ item }">
    <a :href="'mydata/'+ item.data.dataId" target="_blank">
      {{ item.data.dataName }}
    </a>
  </template>
</v-data-table>

Answer №2

<td v-for="(header, index) in headers" :key="index"
        :class="[ index === 0? 'text-xs-left': 'text-xs-center', 'body-2', 'ma-0', 'pa-0', 'pl-2']" v-if="header.value!==''">
<a :href="header.link">
      {{displayData(props.item, header)}}
</a>
    </td>

assuming that the header object has a link attribute.

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 best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

javascriptcssdom-eventsbootstrap-5

Incorporating a variety of classes by utilizing loops

Looking to add a class to specific li elements - the 1st, 4th, and 7th, the 2nd, 5th, and 8th, and the 3rd, 6th, and 9th. Is this possible? Is there a way to achieve this? ...

javascriptjquery

Vue Validator will trigger only after a change event, blur event, or form submission

I am new to using Vue and trying out Vue Validator for the first time. Below is a snippet of my code: <label for="first_name">First name: <span v-if="$validation1.first_name.required" class="invalid">Please enter your first name.</span ...

vue.js

"Exploring multi-touch gestures with KonvaJS for panning and zooming on

Having recently switched to a Macbook, I am using KonvaJS, specifically `vue-konva`. I am looking to enable two-finger scrolling and panning. Although I have the `mousemove`/`mouseup`/`mousedown` event set up for one-click panning, I am struggling with imp ...

vue.jskonvajsvue-konva

Testing the equality of nested arrays: A step-by-step guide

My maze generator creates walls for each "cell", resulting in duplicate walls - such as the left wall of one cell being identical to the right wall of the adjacent cell. I have managed to convert the maze data into a different program where it is stored in ...

javascriptarraysmultidimensional-arrayarray-comparison

Issue with Android date input field not resetting the value

When testing in Android Tablet (version 4.1.2), I encountered a strange issue with an input date field that looks like this: <input type="date" value="2013-06-10"/>. Upon clicking on the field and trying to set a new date, instead of replacing the o ...

javascriptandroidhtmldatepicker

Is Redux really the new trend in the world of action creators?

I am new to this. I'm a bit unsure, is it okay or silly to use the pattern below? import { createAction, handleActions } from "redux-actions"; const CHANGE_STATE = "appState/CHANGE_STATE"; export const changeState = createAction(CHANGE_STATE, (key, ...

javascriptreactjsreduxreact-redux

Expand the scope of the javascript in your web application to cater

I am in the process of creating a web application that utilizes its own API to display content, and it is done through JavaScript using AJAX. In the past, when working with server-side processing (PHP), I used gettext for translation. However, I am now ...

phpjavascriptajaxinternationalizationgettext

Navigating through PWAs and implementing deep linking in both single page applications (SPAs) and multi-page applications

QUESTION: How can navigation, history, and deep-linking be managed in a PWA without relying on a heavy JS Framework? Tasked with transitioning an existing shopping website from Angular 1 SPA to a Multi Page App (MPA) PWA, I find myself grappling with desi ...

javascriptangularpolymeraureliaprogressive-web-apps

Personalize the layout for vertical table headings and table information

I need help with a table that has vertical headers. I want to remove the extra space within the table header and data cells. Here is the code for my table: <table> <tr> <th class="field">Item ID Number:</th> < ...

htmlcssvue.jsvuetify.js

What is the process for launching a new terminal within Node.js?

I'm seeking advice on creating a secondary window in my node.js application where I can output text separate from the main application. Imagine having a main window for displaying information and a secondary window specifically for errors that closes ...

javascriptnode.js

The code functions properly on React Webpack when running on localhost, however, it fails to work once deployed to AWS Amplify

As I work on my React.js app, I encountered an issue with hosting pdf files on Amplify. While everything runs smoothly on localhost/3000, allowing me to access and view the pdf files as desired either in a new tab or embedded with html, the same cannot be ...

javascripthtmlnode.jsreactjsaws-amplify

Is there a way to set the default state of a checkbox in a spring-form?

I have set up my web content using spring-boot with .jsp files. The controller code is as follows: @Slf4j @Controller @AllArgsConstructor @SessionAttributes({"language", "amount", "words"}) public class LanguageController { private LanguageService lang ...

javascriptjavahtmlspringspring-form

Breaking down classes and cross-referencing them with a different DIV using JQuery

Trying to create a variable named relatedBoxes that will store checkboxes sharing similar classes as the box div. To do this, I am splitting up the classes and storing them in a variable called splitClass. Now, all that's left is to find out if any o ...

javascriptjqueryclassjquery-selectors

Subclass declaration with an assignment - React.Component

I recently started going through a React tutorial on Egghead and came across an interesting class declaration in one of the lessons: class StopWatch extends React.Component { state = {lapse: 0, running: false} render() { const ...

javascriptreactjssyntaxecmascript-6ecmascript-next

Converting all numbers separated by commas to numbers separated by periods in a string using JavaScript

Imagine a scenario where you have a string containing numbers, such as, test() test 12,01% test (12,4) 12.3 s 2 some other text, other text, 2,text Your task is to replace the numbers with decimals instead of commas without altering anything else in the ...

javascriptregex

The malfunctioning Bootstrap 5 Dropdown menu within a Modal in Nuxt

Incorporating Nuxt (vueJs) and Bootstrap 5, I have successfully implemented a dropdown menu within a NavBar : <nav class="navbar navbar-expand-lg navbar-dark bg-primary pb-xl-5 pt-xl-5"> <div class="container-fluid"> ...

vue.jsnuxt.jsbootstrap-5

Tips on preserving CSS modifications made in Chrome Developer Tools Inspector to .vue file

Currently, I am in the process of setting up a new workflow where my goal is to streamline my work by using the Chrome DevTools Inspector to save any CSS changes directly to my .vue file. While the DevTools Workspaces feature can achieve this, it involves ...

cssvue.jsvuejs2google-chrome-devtools

Mastering the art of navigating through intricate nested properties within JSON data structures

Presented below is a dynamic JSON structure: data = { "name": "deltha", "type": "object", "important": [ "name", "id", "number" ], "information": { "place": { "editable": false, "visible": true }, "info": { ...

javascriptangular

use ".otherwise" or /** with the latest version of Angular2 Router to redirect non-routes using wildcards

Can anyone provide guidance on using wild cards to route in the new Router when a non functional route is specified? Similar to the .otherwise method in Angular 1.X router or /** in previous beta router. Additionally, any example or Plunker code would be ...

javascriptangularangular2-routing