skills.rest
Rzyfront
RzyfrontCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vendix-frontend-data-display

Render responsive data tables and mobile cards with ResponsiveDataView.

5|Updated Aug 23, 2025
Search Tags:#frontend#responsive#display#Table#ItemList#ResponsiveDataView
One-click install
npx skills add https://github.com/Rzyfront/Vendix --skill vendix-frontend-data-display
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vendix-frontend-data-display
Source: https://github.com/Rzyfront/Vendix/tree/main/skills/vendix-frontend-data-display
Command: npx skills add https://github.com/Rzyfront/Vendix --skill vendix-frontend-data-display

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill consolidates frontend patterns for displaying large data lists with responsive behavior, reducing manual UI wiring and ensuring consistency across breakpoints.

Core Features & Use Cases

  • Provides a TableComponent for desktop data tables and an ItemListComponent for mobile cards within a unified ResponsiveDataView.
  • Enables effortless configuration of column definitions, card layouts, and action handling to support admin dashboards and catalog views.
  • Use Case: Build a customer list admin page that gracefully adapts from table to mobile cards without duplicating logic.

Quick Start

Render a sample dataset using the default columns and a basic cardConfig to preview both desktop and mobile views

Frequently Asked Questions about vendix-frontend-data-display

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

FAQPage Schema
How do I switch a data table to mobile cards automatically at breakpoints?▼

To switch a data table to mobile cards at breakpoints, use a ResponsiveDataView that integrates desktop TableColumn definitions and mobile ItemListCardConfig to render appropriate layouts without duplicating logic.

What is a responsive data view for admin dashboards?▼

A responsive data view for admin dashboards is a UI pattern that consolidates large data lists, automatically adapting presentation between desktop tables and mobile cards to maintain consistency across devices.

Can I use the same logic for desktop tables and mobile card lists?▼

Yes, you can use the same logic for desktop tables and mobile card lists by configuring shared interfaces, transforms, and action handling within a unified ResponsiveDataView component structure.

How do I configure column definitions and card layouts for a responsive list?▼

You configure column definitions and card layouts for a responsive list by mapping desktop data fields to TableColumn and mobile presentation rules to ItemListCardConfig within the ResponsiveDataView integration.

Do I need a specific frontend framework to render responsive data views?▼

You need a cohesive frontend setup that supports TableColumn, ItemListCardConfig, and ResponsiveDataView integration, including the ability to handle transforms, actions, and shared interfaces for rendering responsive data views.

What's the best way to display large data lists on both desktop and mobile?▼

The best way to display large data lists on both desktop and mobile is using a unified ResponsiveDataView that reduces manual UI wiring by automatically switching between tables and mobile cards at breakpoints.

Related Skills

Explore More Software Engineering Skills→
bmslabsbmslabs

vue-create-datagrid

Create Vue 3 data grids with the unified DataTable component.

Official
Advanced
nayukatanayukata

manage-swr-data

Create SWR hooks for fetching and mutating server state with typed keys.

Community
Advanced
paperclipaipaperclipai
76.0k

design-guide

Guide frontend UI component creation within the Paperclip ecosystem.

Official
Intermediate
verivendverivend

responsive-grid-view

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

Official
Intermediate