Native pagination on a Vuetify Table in Vue 3

[bhanjibrilliant]

We expect all community members to go through provided examples, resources, and previously published material before submitting content. As a rule of thumb, please only submit articles (pull requests) that are complete, formatted correctly, and include a fully polished article (ready to be published and error-free).

All revisions and edits should be completed on your forked repo (as to not take up room in the queue). Any PR that is submitted incomplete (meaning not ready to be published as is) will be closed. A PR being closed does NOT mean the article can not be published (or fixed) it simply means that the edits, revisions, and fixes will happen outside of the queue.

Topic Suggestion

Native pagination on a Vuetify Table in Vue 3

Proposal Submission

Proposed title of the article

Native pagination on a Vuetify Table in Vue 3

Proposed article introduction

Web applications serve as the main source of information for most companies, take, for example, Section. However, in some cases, these companies find themselves in a situation where they need to display a list of say, job openings.

Vuetify, a Vue tool for UI scaffolding serves that purpose, however, it has some drawbacks in styling the table as required to meet the user demands. Therefore, this article will walk the reader through the raw concepts of Vue paginations using a mock server.

By the end, the reader will have a working example of how to modify native pagination to achieve the styling to meet the needs.

Key takeaways

• Basic concepts of the Vuetify.
• A quick introduction to Vuetify tables and how they work
• Modifying the table to achieve native pagination without using the default feature provided by the Vue
• Integrating mock APIs for our project.

Article quality

This article focuses on the Vuetify v-table pagination drawbacks. It discusses these drawbacks in detail. The article then teaches the reader how to overcome these weaknesses of Vuetify using the native JavaScript codes.

Very precise to the weaknesses of Vuetify and the solution.

[github-actions[bot]]

👋 @bhanjibrilliant Good afternoon and thank you for submitting your topic suggestion. Your topic form has been entered into our queue and should be reviewed (for approval) as soon as a content moderator is finished reviewing the ones in the queue before it.

[louisefindlay23]

Topic approved but please ensure your article is in-depth and unique enough to add value for our readers.

[hectorkambow]

@bhanjibrilliant Closing due to inactivity - if you'd like to continue working on the topic. Please let us know.