How to set items-per-page-options with v-data-table-server

[Sell24]

I understand that the datatables are still in the lab stage so I don't know if this is a bug or if I am just doing it wrong.

I want to set the values in the pagination to [100, 200] with no 'All' option. According to the documentation the option for this is "items-per-page-options" in the v-data-table-footer.

However, in looking at the v-data-table-footer documentation I see that it is incomplete. I am not sure if this is because it has just not been updated or if it has not been completed yet.

Regardless, I have tried:

:footer-props="{'itemsPerPageOptions':[100, 200]}"  and
:footer-props="{'items-per-page-options':[100,200]}"

None of this has worked. Am I doing it wrong? Is this a bug or is it not yet complete?

TIA

[aozmekik]

@Sell24

Hey, were you able to find a solution for this?

[Sell24]

Hi, no I never got this to work. I haven't updated my code yet now that datatables are out of beta. But the documentation is still incomplete however this link shows the option (again) so maybe it is supposed to work?

I think for the future apps I will switch back to Quasar for the frontend because Vuetify just seems less complete.

[aozmekik]

@Sell24

It's structure was different,

itemsPerPageOptions?: readonly {
                title: string;
                value: number;
            }[] | undefined;

Doing in this way, it worked,

options: [
      { title: '50', value: 50 },
      { title: '100', value: 100 },
      { title: '150', value: 150 },
      { title: '200', value: 200 }
    ],

Thanks.

[KaelWD]

number[] should work in 3.4

[JenuelDev]

is their a way to fix this on 3.2.1?

[skitourenguru]

Have the same problem. I am on vuetify 3.7.12. What is exactly the solution? The following doesn't work. I don't understand your solution.

:footer-props="{options: [
      { title: '50', value: 50 },
      { title: '100', value: 100 },
      { title: '150', value: 150 },
      { title: '200', value: 200 }
    ]}"

[skitourenguru]

This is the solution:

:items-per-page-options="[10, 20, 50, 100]"