Data Table: Pagination Arrows & Row Select Box Not Displayed

Question

When my v-data-table renders the < > arrows for pagination are not visible. You can click where they're supposed to be and it works but they're just not visible (the page count does appear).

Also, when I turn on row selection (show-select), this, too, is not displaying although you can click it (a brief image appears of a circle which quickly fades but the box itself never appears).

Also, with respect to show-select, if I'm using a slot to display my data using and s, how can I use the show-select? It seems that when I do this the "show-select" is ignored.

I'm using 2.0.1 of Vuetify (https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css & js) and 2.6.10 of Vue (https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js).

                <v-data-table 
                :headers="headers" 
                :items="items" 
                style="cursor:pointer"
                item-key="id"
                class="elevation-10"
                >
                    <template slot="item" slot-scope="props">
                        <tr @dblclick="$root.openViewer(props.item.id)">
                            <td>{{props.item.id}}</td>
                            <td>{{props.item.name}}</td>
                            <td>{{props.item.dateposted}}</td>
                            <td>{{props.item.periodstart}}</td>
                            <td>{{props.item.periodend}}</td>
                            <td v-if="props.item.released.toLowerCase()=='in progress'"><v-icon center color="red">fas fa-user-clock</v-icon></td>
                            <td v-else><v-icon center color="green">fas fa-user-check</v-icon></td>
                        </tr>
                    </template>
                </v-data-table>

In the first case, I expect the "<" and ">" page buttons to be displayed.

In the second case, when I use the default rendering of the v-data-grid, i.e., I don't use a slot and include the "show-select" prop, the row select box doesn't appear although you can click on it (just like the < > buttons).

Additionally, if I do use the slot to render my rows, how can I also use the "show-select" prop?

Answer 1

I have the same problem. It is because you did not add vuetify's icon fonts. If you go to plugins/vuetify.js, and do:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg'
  },
})

it should work like a charm. because the < > belongs to vuetify's mdi font class.

https://vuetifyjs.com/en/features/icon-fonts/