What is the process for searching a specific column in a Vuetify v-data-table that is not included in the headers?

Header for Product Data:

headers: [
 { text: "Product Name", value: "name" },
 { text: "Quantity", value: "quantity" },
 { text: "Price", value: "price" },
 { text: "Orders", value: "itemsSold" },
 { text: "Revenue", value: "revenue" },
 { text: "Status", value: "active" },
],

Template Setup for Items:

<template v-slot:item.name="{ item }">
 {{ item.name }} {{ item.sku }}
</template>

If I want to search by item.sku which is not included in the headers, how can I modify my search functionality to include it?

javascriptvue.jsvuejs2vuetify.jsv-data-table

Answer №1

To easily include the SKU field in headers without needing a custom-filter prop, simply add it to the headers array and set the align property to " d-none". Remember to include a space before d-none:

headers: [
  { text: 'SKU', value: 'sku', align: ' d-none' }, // ✅ align ' d-none' hides it
  { text: "Product Name", value: "name" },
  { text: "Quantity", value: "quantity" },
  { text: "Price", value: "price" },
  { text: "Orders", value: "itemsSold" },
  { text: "Revenue", value: "revenue" },
  { text: "Status", value: "active" },
],

This way, the SKU column will be present for searching purposes but remain hidden from view. You can check out a demo here that showcases this setup using the Vuetify default <v-data-table>.

Answer №2

When you set the align property to 'd-none', the header may still be visible on the mobile version of v-data-table (you can confirm this by resizing the browser window).

If you want to hide it on mobile as well, you will need to use some additional CSS.

I found that the following CSS code worked for me:

.v-data-table
  >>> .v-data-table__wrapper
  > table
  > tbody
  > .v-data-table__mobile-table-row
  > .v-data-table__mobile-row:nth-of-type(2) {
  display: none;
}

Keep in mind that in my case, the header I wanted to hide was second in order. If yours is a different position, adjust the number in the :nth-of-type selector accordingly.

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 ensure all requests have been completed before proceeding?

Is there a way to ensure that the sortOrder function only runs once the getOrders function has fully completed its execution? I have considered using a callback, but I am unsure of how to implement it. Do you have any suggestions on how I can achieve this ...

javascriptvue.js

"Is there a way to reverse the action of $( "button" ).remove()

Currently, I have implemented JQuery's $( ".button" ).remove(); function to get rid of all the buttons on my webpage immediately after a user clicks the print PDF button that changes the HTML page into a PDF. Nevertheless, once this process is done ...

javascriptjquerycsshtml

Optimal approach for incorporating controller As with UI Router

Currently working on a small search application using AngularJS and Elasticsearch. I am in the process of transitioning the app from using $scope to controller As syntax. I have implemented UI Router for managing routes/states. I have been attempting to us ...

javascriptangularjs

Utilizing a dynamic ref in Vue using the composition API

While working with the composition API in Vue 3, I am trying to create a reference to a component dynamically. Typically, this would involve adding ref="name" to the template and then defining a ref using const name = ref(null). However, I am loo ...

javascriptvue.jsfrontendvuejs3

"Exciting Changes in Color According to the Active State of vue-route-link

I am trying to find a way to customize the CSS based on whether a link is exact or active. Essentially, when a user clicks on a menu item, I want the underline to change depending on whether the link is an active router-link. Although I was able to accompl ...

javascriptcssvue.jsvue-routervuetify.js

Updating dynamic parameter in a NextJS 13 application router: A complete guide

In my route user/[userId]/forms, I have a layout.tsx that includes a Select/Dropdown menu. The dropdown menu has options with values representing different form IDs. When the user selects an item from the dropdown, I want to navigate to user/[userId]/form ...

javascriptnext.jsnext.js13

Saving a MongoDB document within an array in Node.js and retrieving it

I am working on retrieving specific documents from MongoDB using Node.js and storing them in an array. const getStockComments = async (req) => { const stockname = req.params.stockName; var comments = []; var data = []; const stock = await sto ...

javascriptnode.jsmongodbasynchronousasync-await

What was the reason for node js not functioning properly on identical paths?

When the search route is placed at the top, everything works fine. However, when it is placed at the end, the route that takes ID as a parameter keeps getting called repeatedly in Node. Why does this happen and how can it be resolved? router.get('/se ...

javascriptnode.jsexpress

What is the best approach to concurrently update a single array from multiple functions?

In my React app, I have a form with various input fields and checkboxes. Before making an API call to submit the data, I have functions set up to check if any fields are left blank or unchecked. These check functions are triggered when the form button is ...

javascriptreactjsarrays

Using Jquery colorbox to redirect or forward within the current colorbox container

I am facing a challenge with a colorbox that is currently loaded. I am looking for a way to redirect or forward to another page within the existing colorbox. window.location = href; does not seem to be effective in this situation. EDIT: To be more precis ...

javascriptjquerycolorbox

Tips for releasing a dual npm package with both CommonJS and module support to ensure consistent imports of submodules

Trying to figure out how to package an NPM package so that it includes both CommonJS and ES modules that can be imported using the same absolute module path has been a challenge for me. I want to ensure that regardless of whether it's in a node or bro ...

javascriptnode.jsnpmes6-modulescommonjs

What steps can I take to pinpoint the exact error location when running assetic:dump in Symfony2?

This error message indicates an issue with assetic:dump in Symfony2. [Assetic\Exception\FilterException] ...

javascriptjquerysymfonyyuiassetic

Transferring $scope information to resolve in $stateProvider.state

In the app.teams.show parent state, "team" is stored in $scope.data.team. From within a controller, I can access $scope.data.team and thus $scope.data.team.organization_id. The question is: How can I retrieve $scope.data.team.organization_id from inside t ...

javascriptajaxangularjsangularjs-scopeangularjs-routing

Using VueResource to send a GET request in Vue.js returned a response with a status

There is an issue I am facing with sending a request to the API to retrieve all users. The login function is called (index.vue) and it attempts to access api/users/all which should return all the users in that collection. Using Postman, the API returns th ...

ajaxnode.jsexpressvue.jsvue-resource

Tips for incorporating error messages based on specific errors in HTML

In the current setup, a common error message is displayed for all errors. However, I want to customize the error messages based on the specific type of error. For example, if the password is invalid, it should display "invalid password", and for an invalid ...

javascripthtmlcss

Refreshing Angular Services: A Guide to Resetting Factories

My angular factory is quite intricate and structured like this: app.factory("mainFcty", function(){ return { a:"", b:"", c:"" } }); When users progress through the app and complete actions such as booking a service, they f ...

javascriptangularjsservicefactory

Using socket.io-client in Angular 4: A Step-by-Step Guide

I am attempting to establish a connection between my server side, which is PHP Laravel with Echo WebSocket, and Angular 4. I have attempted to use both ng2-socket-io via npm and laravel-echo via npm, but unfortunately neither were successful. If anyone h ...

javascriptangulartypescriptsocket.iolaravel-echo

Running Windows commands from Node.js on WSL2 Ubuntu and handling escape sequences

When running the following command in the CMD shell on Windows, it executes successfully: CMD /S /C " "..\..\Program Files\Google\Chrome\Application\chrome.exe" " However, attempting to run the same comman ...

javascriptnode.jsbashcmdwindows-subsystem-for-linux

Is it necessary to have both index.js and Component.js files for a single component in React?

Continuously analyzing various projects, I often come across authors who organize their file structures in ways that are perplexing to me without proper explanation. Take, for instance, a component where there is a folder named Header. Inside this folder, ...

javascriptreactjs

Developing a fresh Outlook email using a combination of javascript and vbscript

I have created a custom HTML page with fields and a button to fill out in order to generate a new Outlook mail item. To format the body of the email using HTML, I am utilizing VBScript to create the new mail item. <script> function generateEmail() { ...

javascriptjqueryhtmlvbscriptoutlook