skills.rest
e-xode
e-xodeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vuetify-data

Implement Vuetify data table pagination with custom row cell rendering.

3|Updated Jan 14, 2023
Search Tags:#server-side pagination#vue router#vuetify#v-data-table-server#scoped slots#admin table#v-pagination
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-data
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vuetify-data
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vuetify-data
Command: npx skills add https://github.com/e-xode/vue-ssr --skill vuetify-data

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Vuetify data-table pagination, sorting, and rich row rendering are difficult to implement correctly across server-side and client-side scenarios without boilerplate or inconsistent UI behavior.

Core Features & Use Cases

  • Server-side paginated data grids using v-data-table-server with reactive options, items, items-length, and loading state for admin-style lists.
  • Custom cell rendering via scoped slots (e.g., status chips and action buttons) to keep UI logic close to the table definition.
  • Standalone pagination controls using v-pagination derived from totalItems and itemsPerPage for pages that need independent navigation.
  • Use case: render an admin “Users” listing that fetches the correct slice from your API as the user paginates or sorts, while showing status chips and edit/delete actions per row.

Quick Start

Use vuetify-data to implement a v-data-table-server that fetches paginated results from your API based on v-model:options, passes items-length as the total count, and defines item.action/status slots for chips and buttons.

Frequently Asked Questions about vuetify-data

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement server-side pagination in a Vuetify data table?▼

Server-side pagination in a Vuetify data table is implemented using the v-data-table-server component, wiring v-model:options to fetch the correct API data slice while passing the total record count to the items-length property.

How do I add custom action buttons and status chips to Vuetify table rows?▼

Custom action buttons and status chips are added to Vuetify table rows by utilizing scoped slots like #item.action or #item.status, keeping the custom cell rendering logic directly within the table headers configuration.

Can I use standalone v-pagination controls independently from v-data-table-server?▼

Standalone v-pagination controls can be used independently by computing the length property from totalItems divided by itemsPerPage, satisfying independent navigation UI needs outside the v-data-table-server component.

What is the best way to handle server-driven sorting in Vue admin dashboards?▼

Server-driven sorting in Vue admin dashboards is handled by binding v-model:options on v-data-table-server, capturing sort state changes to request updated sorted data slices from your API dynamically.

Does v-data-table-server require items-length for reactive pagination?▼

V-data-table-server requires the items-length property for reactive pagination, as it uses this total count to accurately compute pagination UI state alongside the currently fetched items array.

Why does my Vuetify data table pagination not update after fetching API data?▼

Vuetify data table pagination fails to update when the items-length property is missing or static, preventing the component from reflecting the true total record count needed for reactive v-model:options pagination.

Related Skills

Explore More Software Engineering Skills→
partme-aipartme-ai
610

vue2

Provides guidance for Vue 2.x development including components, routing, and Vuex state management.

Official
Intermediate
slingr-stackslingr-stack

frontend-table-views

Build routed Drumr Framework table views with separated layout and tableOptions.

Official
Advanced
zuiaizengdadazuiaizengdada
9

vue-router-best-practices

Teach Vue Router 4 guards and lifecycle patterns for Vue 3 apps.

Community
Advanced
TanStackTanStack
28.3k

preact/compose-with-tanstack-query

Implement server-side data loading for Preact tables with TanStack Query.

Official
Intermediate