skills.rest
xiaoniuge36
xiaoniuge36COMMUNITY
Explore all skills by this author →
GitHub

table-generator

Generate dynamic data tables for React and Vue.js with pagination and search.

6|2|Updated Dec 19, 2025
Search Tags:#CRUD#filtering#pagination#sorting#table#data display
One-click install
npx skills add https://github.com/xiaoniuge36/codegen-engine-mcp --skill table-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: table-generator
Source: https://github.com/xiaoniuge36/codegen-engine-mcp/tree/main/.cursor/skills/table-generator
Command: npx skills add https://github.com/xiaoniuge36/codegen-engine-mcp --skill table-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the complex process of creating, displaying, and interacting with data tables in web applications, reducing development time and ensuring consistency.

Core Features & Use Cases

  • Dynamic Table Generation: Automatically configure table columns based on data structures.
  • CRUD Operations: Implement features for creating, reading, updating, and deleting table data.
  • Advanced Features: Supports pagination, sorting, filtering, searching, and batch operations.
  • Use Case: Quickly scaffold a user management page with features like searching, filtering by status, editing user details, and exporting data to Excel.

Quick Start

Use the table-generator skill to create a React user list page with pagination and search.

Frequently Asked Questions about table-generator

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

FAQPage Schema
How do I generate a dynamic data table with pagination and sorting in React?▼

To generate a dynamic data table in React, this Skill configures Ant Design ProTable to handle data fetching, pagination, and sorting automatically based on your data structure. It scaffolds the table columns and fetches data dynamically.

What is the best way to implement CRUD operations and batch processing in a Vue.js data table?▼

Implementing CRUD operations in a Vue.js data table involves using Element Plus to manage creating, reading, updating, and deleting records. This Skill automatically configures these features alongside batch operations for efficient data management.

Does table-generator work with Ant Design ProTable and Element Plus for data display?▼

Yes, table-generator works directly with Ant Design ProTable for React and Element Plus for Vue.js. It uses these libraries to configure columns, handle data fetching, and implement advanced features like filtering and searching.

How do I add filtering and data export to Excel in a web application data table?▼

Adding filtering and data export to Excel in a web application data table is handled by this Skill through built-in search configurations and export functionalities. It scaffolds the UI components to filter records and extract data directly.

Can I automatically configure table columns based on my data structure?▼

You can automatically configure table columns based on your data structure using this Skill's dynamic table generation feature. It reads your data inputs and scaffolds the appropriate column layouts for React and Vue.js frameworks.

Related Skills

Explore More Software Engineering Skills→
wyattjohwyattjoh
1

json-inspect

Generate a formal JSON Schema from raw JSON files using genson.

Community
Basic
cartacarta
12

carta-reporting-markdown

Format and validate Carta cap table reports for markdown delivery.

Official
Advanced
constructive-ioconstructive-io
52

orm-admin

...

Official
Intermediate
zinohomezinohome
1

table-builder

Generate data table components with filtering, sorting, and pagination.

Community
Intermediate