skills.rest
verivend
verivendOFFICIAL
Explore all skills by this author →
Website𝕏@verivendGitHub

responsive-grid-view

Render responsive data tables that switch between AG Grid and mobile card lists.

Updated Mar 10, 2026
Search Tags:#ui#vue#component#responsive#data table#ag-grid
One-click install
npx skills add https://github.com/verivend/verivend-vue3-template --skill responsive-grid-view
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: responsive-grid-view
Source: https://github.com/verivend/verivend-vue3-template/tree/main/.claude/skills/responsive-grid-view
Command: npx skills add https://github.com/verivend/verivend-vue3-template --skill responsive-grid-view

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation of responsive data displays, ensuring a consistent and user-friendly experience across both desktop grid layouts and mobile card views.

Core Features & Use Cases

  • Adaptive Layouts: Automatically switches between AG Grid (desktop) and card list (mobile) based on screen size.
  • Synchronized Interactions: Ensures sorting and filtering are consistent across both views.
  • Skeleton Loading: Provides visual feedback during data fetching for both desktop and mobile.
  • Use Case: Displaying a list of products where users can sort by price on desktop via a grid, and on mobile, see the same products in a scrollable card list with synchronized sorting options.

Quick Start

Implement a responsive data display using the ResponsiveGridView component, passing your row data and column definitions.

Frequently Asked Questions about responsive-grid-view

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

FAQPage Schema
How do I build a responsive data table in Vue that switches to a mobile card view?▼

A responsive data table in Vue can automatically switch between AG Grid for desktop and a card list for mobile by detecting screen size. This ensures synchronized sorting and filtering UI state across both viewports.

Can I synchronize sorting and quick filtering between an AG Grid desktop layout and mobile cards?▼

Yes, you can synchronize sorting and quick filtering between AG Grid and mobile card views. The component manages UI state synchronization to ensure user interactions remain consistent across both desktop and mobile viewports.

What is the best way to display skeleton loading states for a responsive data grid?▼

The best way to display skeleton loading for a responsive data grid is using a unified component that provides visual feedback during data fetching for both desktop grid layouts and mobile card views simultaneously.

Does the responsive Vue component support custom rendering for mobile cards?▼

Yes, the responsive Vue component supports custom mobile card rendering. It also supports custom header actions, allowing you to tailor the mobile layout and interactions while maintaining the adaptive desktop grid structure.

How do I pass row data and column definitions to a responsive Vue data grid?▼

You pass row data and column definitions directly into the responsive component to implement the adaptive data display. This quick start approach renders the synchronized desktop grid and mobile card views.

When should I use a single component for both desktop data tables and mobile card lists?▼

You should use a single component for desktop data tables and mobile card lists when you need adaptive layouts with synchronized interactions, skeleton loading, and quick filtering across viewports to streamline UI development.

Related Skills

Explore More Software Engineering Skills→
verivendverivend

ag-grid-patterns

Implement AG Grid Enterprise data tables with Vue 3 and TypeScript.

Official
Intermediate
rjit1rjit1
1

seo-maps

Audit local business map presence and generate prioritized optimization reports.

Community
Advanced
Jonathan0823Jonathan0823
7

ts-vue-svelte

Provide TypeScript best-practice patterns for Vue 3 and Svelte 5 applications.

Community
Advanced
manutejmanutej
61

responsive-design

Generate mobile-first responsive layouts with fluid grids and media queries.

Community
Basic