Modifying the appearance of a dropdown input within a table footer using Vuetify

Our application utilizes Vuetify, with outlined text/select fields throughout:

https://i.sstatic.net/UMAeH.png

The table definition from the documentation is as follows:

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>

However, this results in a table like this:

https://i.sstatic.net/Aq3eG.png

By default, tables use the standard Material text field style. Is there a way to change this select field to our preferred outlined style? Thank you for your help.

javascriptvue.jsvuejs2vuetify.js

Answer №1

To achieve an outlined style for a select field in the v-data-table component, you can utilize available slots such as the footer slot. The slot receives various parameters including options for pagination, items per page, sorting, grouping, and more.

{
  props: {
    options: {
      page: number
      itemsPerPage: number
      sortBy: string[]
      sortDesc: boolean[]
      groupBy: string[]
      groupDesc: boolean[]
      multiSort: boolean
      mustSort: boolean
    },
    pagination: {
      page: number
      itemsPerPage: number
      pageStart: number
      pageStop: number
      pageCount: number
      itemsLength: number
    },
    itemsPerPageText: string
  },
  on: {}
  headers: TableHeader[]
  widths: []
}

One approach is to create a custom component that utilizes these parameters as props to render a select component with the outlined property applied.

<template>
  <v-select :items="items" label="Outlined style" outlined></v-select>
</template>

<script>
export default {
  name: "vue-custom-component",
  data: function () {
    return {
      items: [],
    };
  },
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    itemsPerPage: {
      type: Number,
      required: true,
    },
    itemsLength: {
      type: Number,
      required: true,
    },
    pageCount: {
      type: Number,
      required: true,
    },
  },
  mounted() {
    //here you could fill items
  },
};
</script>

<style lang='scss'>
</style>

An example of using this custom component within the footer slot:

<v-data-table
  :items="items"
>
  <tempalte v-slot:footer="{ props }">
    <v-row align="center">
      <v-col class="d-flex" cols="12" sm="6">
        <vue-custom-component
          :currentPage="props.pagination.page"
          :itemsPerPage="props.pagination.itemsPerPage"
          :itemsLength="props.pagination.itemsLength"
          :pageCount="props.pagination.pageCount"
        ></vue-custom-component>
      </v-col>
    </v-row>
  </tempalte>
</v-data-table>

For more information, visit this link.

Answer №2

In my opinion, it's not possible to directly modify the input style.

Alternatively, you can conceal the default footer and incorporate your custom footer.

Take a look at this illustration:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      page: 1,
      pageCount: 0,
      itemsPerPage: 10,
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
})
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="325e572d3c585671564530434f424b">[email protected]</a>/css/materialdesignicons.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="badfdacccfbadbdacfad8cdc0cdc4">[email protected]</a>/dist/vuetify.min.css">
  <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d5dcd6d7c0dfc0daeadaececefc4dcdbdcd1">[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="14727b79666c736d60797943647877796075666e69646669">[email protected]</a>/dist/vuetify.min.js"></script>
</head>

<body>
  <div id="app">
    <v-app id="inspire">
      <div>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :page.sync="page"
          :items-per-page="itemsPerPage"
          hide-default-footer
          class="elevation-1"
          @page-count="pageCount = $event"
        ></v-data-table>
        <div class="text-center pt-2">
          <v-pagination v-model="page" :length="pageCount"></v-pagination>
          <v-text-field
            :value="itemsPerPage"
            label="Items per page"
            type="number"
            outlined
            min="-1"
            max="15"
            @input="itemsPerPage = parseInt($event, 10)"
          ></v-text-field>
        </div>
      </div>
    </v-app>
  </div>
</body>

Reference

https://vuetifyjs.com/en/components/data-tables/#external-pagination

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

"OBJLoader Three.js r74, bringing vibrantly colored elements to your 3

It's a straightforward process, I import my OBJ model that was exported using 3DS Max. I have the intention of coloring a specific section of the Object. During the animation loop, I implement the following: scene.traverse( function( object ) { ...

javascript3dthree.jsmesh

What is the best way to identify the clicked cell?

I'm a JavaScript newbie trying to work with ExtJS 3.4. I've set up a basic tree with 3 columns and now I want to figure out which cell, row, or column has been selected. Currently, I'm following the example provided by Sencha at : var tr ...

javascriptjqueryextjs3

Transform the size and convert an object from a picture into text based on the user's scrolling

I've been intrigued by the scrolling effects used on websites like Google SketchUp and Google Plus. It's fascinating how elements can transform as you scroll down the page. For example, on Google SketchUp's site, the banner starts off integr ...

javascriptjqueryhtmlcssscroll

Executing a Parent Method from an Overridden Method in a Child Class

Is it possible to call a method from a parent class that has been overridden in the child class? Below is an example where I want to access the bar.my_name() method from within the foo.my_name() overriding method. function bar() { this.my_name = funct ...

javascriptclassinheritancemethodsoverriding

Having trouble with ng-class not updating properly when using setTimeout in Angular?

I am encountering an issue with my 'highlightBookmark' function that is supposed to change the background color of a list item after 2 seconds. However, it is not working as expected! The background color only changes when the function is called ...

javascripthtmlcssangularjs

Tips for successfully passing a variable as props within the confines of a different function's component

Is there a way to pass the variable id to the onConfirm event in this code snippet? Currently, it seems like the function is being called by another function within setAlert. How can I achieve this? const confirmationPrompt = (id) => { setAlert( ...

javascriptreactjsfunctionscopeparameter-passing

Stopping PHP execution when an Ajax request is aborted

I want the browser to wait for notifications, but stop waiting if a link is clicked. To achieve this, I have created a PHP script with a while loop that ends when an event occurs and then returns that event. PHP require 'required.php'; ignore_ ...

javascriptphpjqueryajaxcomet

When I use console.log to display my array, the values are properly shown. However, when I try to append those values to a div

Despite properly logging the array before and after iterating through it to build list items, the resulting HTML displays 10 list items all showing "undefined" instead of the expected values extracted from Chrome history. What could be causing this unexpe ...

javascripthtmlarrays

Setting up subtitles in video.js: A step-by-step guide

I've been scouring the internet for answers on how to integrate subtitles into a video.js player. Three hours ago, I tried adding the code <track kind="subtitles" src="http://example.com/subtitles.en.vtt" srclang="en" label="English"></track& ...

javascriptjqueryhtml5-videovideo.js

Experiencing issues while trying to render a component with dynamic content in Next.js

Currently, I am facing an issue while trying to display Leaflet maps in Next.js with Typescript. I came across the suggestion to disable server-side rendering (ssr) to prevent the 'window not defined' error. However, when implementing the followi ...

javascriptreactjstypescriptnext.jsreact-leaflet

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

I'm currently developing a React App that functions as a calendar, allowing users to click on specific days displayed as large squares to view information for that day. For accessibility purposes, I initially considered using <button> elements b ...

javascripthtmlcssreactjsaccessibility

Tips for altering the contents of a state in react by toggling items in and out

Here's a challenge I'm facing: I need to display products based on the checkboxes toggles. If none of the checkboxes are toggled, the product array should be empty. If the men's checkbox is toggled, only men-related products should be shown, ...

javascriptreactjs

What is the best way to concatenate two different values in React JSX using the "+" operator?

I have a situation where I need to take a value from an input, add 10% to it, and display the result. For example, if a person inputs 1000, the 10% of 1000 is 100, so the total result should be 1100. Currently, when I use the "+" operator, it concatenates ...

javascriptreactjsreact-hooks

Click on the button to access the external link provided

I'm trying to set up a global external URL that can be accessed by a button in my application. Despite setting it up in my global.js file, I'm encountering issues with accessing the URL globally within my app. When testing my implementation, noth ...

vue.jsvuejs2

remove a section from the main body

body { display: flex; justify-content: center; align-items: center; background: #0e1538; } <canvas id="spaceholder" width="804" height="604"></canvas> </div> <div class="MenüCenter"> <canvas id="canvas" width="800" ...

javascripthtmlcss

Tips for displaying a restricted quantity of items in a list according to the number of li lines used

My approach involves using a bulleted list to display a limited number of items without a scrollbar in 'UL' upon page load. On clicking a 'more' button, I aim to reveal the remaining items with a scrollbar in UL. The following code acco ...

c#javascriptjquerybulletedlist

Show just three items simultaneously

I am currently working on a quote generator and I want to add a feature that allows me to display a specific number of quotes at a time. I attempted to use map for this purpose, but encountered an error stating it's not a function. Currently, the gene ...

javascriptreactjs

Ways to display the title of the image being viewed

I had an issue while working with the input type="file" in HTML. Every time I tried to browse a new image, the name of the image did not show up beside the button. Can anyone provide some guidance on how to fix this problem? Here is my fiddle with the cod ...

javascriptangularjscss

Error: webpack-cli encountered an unrecognized argument along with a syntax error

Hello, I am currently delving into the realm of prestashop theme development. After setting up my local environment successfully, everything seems to be working fine. My next step is to create a new theme based on the classic default theme. Upon navigat ...

javascriptnode.jsnpmwebpackwebpack-cli

Issue: Unhandled TypeError: Problem detected when calling storage.set(object items, optional function callback) in a Chrome Extension

Attempting to create my first Chrome extension, focusing on blocking access to specific websites like Facebook or Instagram. Using code to close tabs if the blocked sites are accessed. In a separate HTML file, providing users with two radio button options ...

javascriptgoogle-chromegoogle-chrome-extension