Vuetify datatable Rows per page is not working

Related searches

I imported the datatable component from Vuetify and it is working fine except for the Rows per page part. It doesn't open a list that should contain [5, 10, 20] to re-organize the datatable.

update in the photo this is the error, the list of options showing in another place.

I reviewed my code and there is nothing about it. So I deleted the whole component and replaced it with the basic example available in the docs but still the same problem.

<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>
  </v-data-table>
</template>

and the code script part is

<script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            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%'
          }
        ]
      }
    }
  }
</script>

What should I re-check ?

This behaviour happens, when the template isn't within a <v-app> element. In the main app.vue, from which one calls the component, which uses<v-data-table>, encapsule with <v-app> and <v-content>:

<template>
  <div id="app">
    <v-app>
      <v-content>
        <myComponent></myComponent>
      </v-content>
    </v-app>
  </div>
</template>

Compare to a vuetify tutorial, e.g.a random tutorial.

It seems the dropdowns css class position (top and left) is relative to the pagination element if <v-app> is missing and relative to the 0-position (upper left) of the vuetify table, if the data table is correctly encapsuled.

Vuetify datatable's "rows per page" detail could not working � Issue , Steps to reproduce Create data table, allow sorting and new pages for rows per page field Click rows per page dropdown 10,25,ALL fields� When click rows per page dropdown item 10 or others datatable items should not be update, Rows per page items could not trigger and change also sort by column could not update datatable. When change vuetify version to 0.12.0 it works as expected.

Add :pagination.sync="pagination" to your <v-data-table>:

<template>
   <v-data-table
       :headers="headers"
       :items="desserts"
       :pagination.sync="pagination"
       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>
 </v-data-table>
</template>

and in your data object:

<script>
  export default {
     data () {
        return {
           pagination: {
                ascending: true,
                sortBy:"name",
                rowsPerPage: 5,
                page: 1
            }
         ....
          }
        }
       }
</script>

[Bug Report] VDataTable Items Per Page Options Is Not Working , Versions and Environment Vuetify: 2.0.0-beta.4 Vue: 2.6.10 documentation I set the option to [5, 20, 50] Expected Behavior rows pe. [Bug Report] VDataTable Items Per Page Options Is Not Working #7700 <v-data-table Open the data table documentation page on Internet Explorer 11. Look at one of the example widgets. Check the "Rows per page" selector dropdown.

I had the same problem, but there were two Vuetify components with the <v-app> wrapper (don't ask) and it causes that dropdown offset problem.

Adding the data-app attribute to the <body> element helped me:

<body data-app>

Data table component — Vuetify.js, The standard data-table will by default render your data as simple rows. template script Changes how many items per page should be visible. Can be used description. If true and no items are provided, then a loading text will be shown� * resorted to alternative method to fix blurry text in chrome due to #334 * fix for #338 * enhancement for #335 * fix for #340 * fix for #349 and #348 * fix for #350 * fix for #351 * bug fix for #357 * enhancement for #355 * enhancement for #356 * enhancement for #292 * enhancement for #260 * Update webpack.base.config.js * Update package.json () does not work on a windows machine without

v-data-table, The standard data-table contains data with no additional functionality. of columns in the table to allow expansion rows and loading bar to function properly descending: boolean", page: number", rowsPerPage: number // -1 for All", sortBy:� Add a datatable; Set rows-per-page-items with an array that doesn't contain 5; Versions. Firefox 45.8.0 Vuetify 0.10.4. What is expected ? The selected value of the "rows per page" dropdown should be the first option. What is actually happening ? The "rows per page" dropdown is initially set to an empty value while the table displays 5 items

Data iterator Component — Vuetify.js, loading. Default. false. Type. boolean | string. Displays linear progress bar. Display text when there is no data. Name. no-results-text. Default. '$vuetify. Used to control pagination and sorting from outside the data table. descending: boolean page: number rowsPerPage: number // -1 for All sortBy: string totalItems: � In firefox 60.5 with vuetify 1.4.1, when I go to change the rows per page, I noticed that the menu was cutting off "100". I tried changing it from this: <v-data-table

The layout is a 2x2, so there are two items per row, and 2 rows. One of the items should contain a table showing alarms. The problem is the pagination. If I use the "default pagination" then the table starts at 5 rows and the user can select the number of rows in a drop-down. But I want to use the external pagination of Vuetify. No problem here.