Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Documentation] VDataTable footer props need more clear example

See original GitHub issue

Problem to solve

Given Example :

Footer props

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      item-key="name"
      class="elevation-1"
      :footer-props="{
        showFirstLastPage: true,
        firstIcon: 'mdi-arrow-collapse-left',
        lastIcon: 'mdi-arrow-collapse-right',
        prevIcon: 'mdi-minus',
        nextIcon: 'mdi-plus'
      }"
    ></v-data-table>
  </v-app>
</div>

comments

I’m so sorry if this is stupid request, and i’m sorry also maybe my experience is not enough, but i just want to solve the problem that i had, and share it also, so other people won’t have the same problem that i had, and waste time to search about it.

In the API props table written items-per-page-options but if going to use under <v-data-table> as footer-props it’s become itemsPerPageOptions.

Proposed solution

Proposed Example:

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :items-per-page="5"
      item-key="name"
      class="elevation-1"
      :footer-props="{
        itemsPerPageOptions: [5, 10], // -> Add this example
        showFirstLastPage: true,
        firstIcon: 'mdi-arrow-collapse-left',
        lastIcon: 'mdi-arrow-collapse-right',
        prevIcon: 'mdi-minus',
        nextIcon: 'mdi-plus'
      }"
    ></v-data-table>
  </v-app>
</div>

Issue Analytics

State:
Created 4 years ago
Reactions:45
Comments:9 (1 by maintainers)

Top GitHub Comments

1reaction

Richardtugwellcommented, Jan 27, 2022

+1 - had to search to figure this out

1reaction

logesh-manoharancommented, Apr 8, 2021

firstIcon: 'mdi-arrow-collapse-left', lastIcon: 'mdi-arrow-collapse-right',

How can I add functions to these two icons i.e. how can I add @click property?

Top Results From Across the Web

v-data-table API - Vuetify

Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications....

How do i edit the elements from a vutify data table footer?

You can find it in the docs by switching the "component" to v-data-footer at the "api" section near the top (it's a drop-down...

<table>: The Table element - HTML - MDN Web Docs - Mozilla

This enumerated attribute indicates how the table must be aligned inside the containing document. It may have the following values:.

Styling the DataTable - Dash Python

dash_table.DataTable` is an interactive table that supports rich styling, conditional formatting, editing, sorting, filtering, and more.

DataTable - React Table Component - PrimeFaces

Following sample datatable has 4 columns and retrieves the data from a service on ... refer to the tooltip documentation for more information....