table-builder

Generate configurable React Table components with sorting, filtering, and pagination.

Updated Jan 21, 2026
One-click install
npx skills add https://github.com/vecear/Nipponverb --skill table-builder-vecear
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: table-builder
Source: https://github.com/vecear/Nipponverb/tree/main/.claude/skills/table-builder
Command: npx skills add https://github.com/vecear/Nipponverb --skill table-builder-vecear

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Table Builder solves the repetitive task of implementing feature-rich data tables by providing a ready-to-use configuration-driven UI scaffold.

Core Features & Use Cases

  • Define columns and render modes to cover both server-side and client-side rendering.
  • Sorting, filtering, pagination, and row actions to support data-heavy dashboards.
  • Use Cases: admin panels, data grids, and list views needing responsive, accessible tables.

Quick Start

Define your columns and drop the DataTable into a page to render a functional, searchable, paginated table.

Frequently Asked Questions about table-builder

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

FAQPage Schema
How do I build a React data table with sorting, filtering, and pagination?

To build a React data table with sorting, filtering, and pagination, define your column configurations and render mode to implement a ready-to-use, configuration-driven UI scaffold. This generates a functional table supporting both server-side and client-side data processing.

What is the best way to implement server-side rendering for an admin dashboard data grid?

The best way to implement server-side rendering for an admin dashboard data grid is using a configuration-driven component that handles column definitions and render mode selection. This approach generates accessible UI components with built-in row actions and loading states.

Can I use a configuration-driven data table for a client-side dashboard?

Yes, you can use a configuration-driven data table for a client-side dashboard by selecting the client-side rendering mode. This allows you to define columns and drop the component into a page to render a functional, searchable, and paginated table.

Does the generated React table component handle empty states and loading states?

Yes, the generated React table component handles both empty states and loading states. It implements a comprehensive workflow that includes accessible UI components, ensuring data-heavy dashboards maintain responsive user experiences during data fetching.

How do I add row actions to a data table in an admin panel?

To add row actions to a data table in an admin panel, configure the column definitions within the table builder workflow. This generates interactive table components that natively support row actions alongside sorting, filtering, and pagination features.