I want to create a vue page that has two data-tables that fill half the screen (vertically). Each data table should have a scroll bar if required.
I have tried the markup below, but this does not size the data-tables to the screen size. Here is a codepen example
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-md fill-height>
<v-layout column>
<v-flex md6>
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-flex>
<v-flex md6>
<div>
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</div>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
To acheive the result I needed to set the height to 100vh on the layout, and set overflow on each flex. I have updated the codepen in question
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout column style="height: 90vh"> <--- added height
<v-flex md6 style="overflow: auto"> <--- added overflow
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-flex>
<v-flex md6 style="overflow: auto"> <--- added overflow
<v-data-table
:headers="headers"
:items="desserts"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
</v-container>
</v-app>
In Vuetify 2 it simply a matter of setting the height and fixed-header props. Not in the docs or examples, but found it over in the simple-table examples.
Even though it has already been answered.
I see that the answer above is not spelled correctly.
Below is the correct example code for this.
<v-responsive
class="overflow-y-auto"
max-height="calc(90vh - 520px)">
</v-responsive
Or
</v-data-table
>
<template v-slot:body>
<v-responsive
class="overflow-y-auto"
max-height="calc(90vh - 520px)"
>
<tbody>
<tr>
<td>example</td>
<td><strong>test example</strong></td>
</tr>
</tbody>
</v-responsive>
</template>
</v-data-table>
Related
<v-data-table
class="elevation-1 user-table"
:headers="table.headers"
:items="usersList"
:items-per-page="table.options.itemsPerPage"
:no-data-text="table.options.noDataText"
:footer-props="table.options.footerProps"
>
<template slot="items" slot-scope="props">
<td class="text-xs-right pa-4">{{ props.item.id }}</td>
<td class="text-xs-right pa-0">{{ props.item.username }}</td>
<td class="text-xs-right pa-0">{{ props.item.createdAt }}</td>
</template>
</v-data-table>
i try to use the slot="items" to change the class of td in vuetify table ,but it doesnt work?
i use this version of vuetify
"vuetify": "^2.3.17",
refactor item slot to this
<v-data-table
class="elevation-1 user-table"
:headers="table.headers"
:items="usersList"
:items-per-page="table.options.itemsPerPage"
:no-data-text="table.options.noDataText"
:footer-props="table.options.footerProps"
>
<template v-slot:item="{ item }">
<tr>
<td class="text-xs-right pa-4"> {{ item.id }} </td>
<td class="text-xs-right pa-0"> {{ item.username }} </td>
<td class="text-xs-right pa-0"> {{ item.createdAt }} </td>
</tr>
</template>
</v-data-table>
whats wrong with your code:
you used items instead of item => <template slot="item" slot-scope="props">
you missed tr element
I'm trying to show all the users that I have in Firebase, inside a v-data-table, but all the rows are shown in a single row.
<v-data-table
:headers="headers"
:items="users"
:loading="loading"
class="elevation-1"
:no-data-text="$t('admin.usersTable.empty')"
>
<template slot="item" slot-scope="props">
<td class="text-xs-right">{{ props.item.uid }}</td>
<td class="text-xs-right">{{ props.item.email }}</td>
<td class="text-xs-right">{{ props.item.username }}</td>
<td class="justify-center layout px-0">
<v-btn icon class="mx-0" #click="editUser(props.item)">
<v-icon color="teal">edit</v-icon>
</v-btn>
<v-btn icon class="mx-0" #click="removeUser(props.item)">
<v-icon color="pink">delete</v-icon>
</v-btn>
</td>
</template>
</v-data-table>
I expect the three users in a three different rows, but the result is that I have the users in one row
Maybe you should add a "s" in the word "item" ?
Like that :
<template slot="items" slot-scope="props">
rows per page is not working correctly, it locates at right side how can I fix it? firstly it didn't show then I added and in console it showed warning, than I added app-data = "true" then it was fixed, but dropdown didn't work correctly.
<template>
<div app-data="true">
<v-app id="app">
<v-content>
<v-card>
<v-card-title>
Nutrition
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
<template v-slot:no-results>
<v-alert :value="true" color="error" icon="warning">
Your search for "{{ search }}" found no results.
</v-alert>
</template>
</v-data-table>
</v-card>
</v-content>
</v-app>
</div>
</template>
Good day. i am trying to edit my v-data-table to suit my personal needs of rows and language. I managed to edit a few fields but i can't find a way to edit the "of" from "1-50 of 300".
I am reading the documentation but i got no idea on how to change that.
v-data-table
Here my current v-data-table documentation:
<v-data-table
:headers="headers"
:items="myItems"
:search="search"
no-results-text='LMAO NO DATA'
rows-per-page-text='Data'
:rows-per-page-items="[5, 50, 100, {text:'EVERYTHING', value: -1}] "
class="elevation-3"
>
EDIT: Sejir Ben Ali's answer is right but if you are having eslint errors showing up try using this:
<template v-slot:[`footer.page-text`]="props">
itens {{ props.pageStart }} - {{ props.pageStop }} of {{ props.itemsLength }}
</template>
From the docs (Slot: pageText - https://vuetifyjs.com/en/components/data-tables#slot-pagetext):
You can customize the page text displaying the range and total items by using the pageText slot.
<template>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
<template v-slot:pageText="props">
ITEMS {{ props.pageStart }} - {{ props.pageStop }} OF {{ props.itemsLength }} // Edit this
// ^this is what you need
</template>
</v-data-table>
</template>
Table:
<v-card :dark="true">
<v-card-title>
<v-btn color="indigo" dark #click="initialize"><v-icon dark>refresh</v-icon></v-btn>
<v-spacer></v-spacer>
<v-text-field append-icon="search" label="Search" single-line hide-details></v-text-field>
</v-card-title>
<v-data-table :dark="true" :headers="headers" :items="expenses" hide-actions class="elevation-1">
<template slot="headers" slot-scope="props">
<tr>
<th v-for="header in props.headers">{{header.text}}</th>
</tr>
</template>
<template slot="items" slot-scope="props">
<tr v-bind:class="getClass(props.item)">
<td class="text-xs-center">{{ props.item.year }}</td>
<td class="text-xs-center">{{ props.item.month }}</td>
<td class="text-xs-center">{{ props.item.day }}</td>
<td class="text-xs-center">{{ props.item.description }}</td>
<td class="text-xs-center">{{ props.item.value }}</td>
<td class="text-xs-center">{{ props.item.category }}</td>
<td class="text-xs-center">{{ props.item.details }}</td>
<td class="justify-center layout px-0">
<v-btn icon class="mx-0" #click="deleteItem(props.item)">
<v-icon color="pink">delete</v-icon>
</v-btn>
</td>
</tr>
</template>
<template slot="no-data">
<v-btn color="primary" #click="initialize">Reset</v-btn>
</template>
</v-data-table>
</v-card>
Css before page reload, after the code is edited in Webstorm and automatically compiled:
And after the reload:
And if I just remove the first row, the same happens no matter which one is first.
I had the same problem.
They problem here is that You override the items slot including <tr> tag. Without that everything will work fine. But for me, that was not a solution so if You want to override the <tr> tag also, add :key to it, like this: <tr :key="props.index">.
Take a look at source of v-data-table here.
To be honest, i don't know why it make that big difference but in my case that resolved the problem (i suspect that it is connected with vue list rendering).
Hope it helps!