table-generator

Name: table-generator
Availability: InStock
Author: Niuge

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

Ready to run

npx skills add https://github.com/xiaoniuge36/codegen-engine-mcp --skill table-generator

💬 Prompt for ChatGPT / Claude Chat▼

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.