How to print vuetify Data table with pagination

Question

I'm using Laravel with Vuetify 2. I want to print all the data in table without pagination. here what I got.

v-dialog   v-model="salesDialog">
        <v-card id="print">
            <v-card-text>
                <v-data-table
                    :headers="salesListItemHeaders"
                    :items="salesItemData"
                    :search="search" hide-default-footer
                    :disable-pagination="true"
                >
                </v-data-table>
            </v-card-text>
        </v-card>

    </v-dialog>

My Styles

@media print {
    body * {
        visibility: hidden;
        font-size: 20px !important;
    }

    #print, #print * {
        visibility: visible;
        border-bottom: none;
    }

    #title {
        visibility: hidden;
    }

    #print {
        padding: 20px;
        position: fixed;
        height: 100%;
        left: 0;
        top: 0;
    }
}

I'm using viewing printable items in v-dialog

Is there a chance you are already paginating the data in laravel somehow? — skribe
no sir. I get all the items in the view but when it's come to printing shows fewer items. — kas

Asim Khan Asim Khan · Accepted Answer · 2019-08-30T12:14:37

there are two props required to achieve this,

disable-pagination
hide-default-footer

which are used to remove the pagination from vuetify table,

so the final code would be something like this

<v-data-table
      :headers="headers"
      :items="desserts"
      class="elevation-1"
      disable-pagination
      hide-default-footer

></v-data-table>

How to print vuetify Data table with pagination

1 Answers