Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] No way to customize "Items per page" list in v-data-table footer #10535

Open
Mikilll94 opened this issue Feb 10, 2020 · 3 comments
Labels

Comments

@Mikilll94
Copy link
Contributor

Environment

Vuetify Version: 2.2.11
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.130
OS: Windows 10

Steps to reproduce

I want to customize "Items per page" list in the data table footer to look, i.e. like this:

image

But this is NOT POSSIBLE. This list is attached to v-app element so I cannot target it via CSS selector from 'v-data-table' component. I can only create a global style but this will style all lists in my app which is very bad.

Expected Behavior

Add "content-class" prop to v-data-footer to specify CSS class which will be added to "Items per page" list.

Actual Behavior

There is no way to customize "Items per page" list in the data table footer.

Reproduction Link

https://codepen.io/mikilll94/pen/zYGGwGv?editable=true&editors=101

@ghost ghost added the S: triage label Feb 10, 2020
@johnleider johnleider added T: question A question that does not match a bug or feature request C: VDataFooter T: feature A new feature and removed S: triage T: question A question that does not match a bug or feature request labels Feb 26, 2020
@johnleider johnleider changed the title [Bug Report] No way to customize "Items per page" list in v-data-table footer [Feature Request] No way to customize "Items per page" list in v-data-table footer Feb 26, 2020
@adrianschubek
Copy link

adrianschubek commented May 22, 2020

That would be awesome. Also is there a workaround to accomplish this currently without disabling the default pagination?

@Mikilll94
Copy link
Contributor Author

Mikilll94 commented May 22, 2020

@johnleider
This issue should be changed from "feature" to "bug". Because IMO the inability to simply target v-data-table footer via CSS is a bug, not a new Vuetify feature.

@justin-parker
Copy link

need this 🔥

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants