Vuetify - change style of select input in table footer

Question

We are using Vuetify for our application where the whole application is using outlined text/select fields like this:

This is our table definition from the docs:

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

But that makes the table like this:

As you can see, tables by default use the common Material text field style. Can you tell me how to change this select field to our outlined style? Thank you.

Answer 1

You could change select field to outlined style by using available slots of the v-data-table component. In your case use a footer slot. Slot receives the following parameters:

{
  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: []
}

You could create a custom component that will use the parameters as props and render the select component with the outlined property.

<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>

Example of using the custom component in footer slot.

<v-data-table
  :items="items"
>
  <template 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>
  </template>
</v-data-table>

Here you could find details