skills.rest
TheYearIsTwentyGX
TheYearIsTwentyGXCOMMUNITY
Explore all skills by this author →
GitHub

tablegx-quickstart

Install and configure TableGX with Tailwind v4 in React apps.

Updated Jun 9, 2026
Search Tags:#react#setup#tailwind#quickstart#read-only#data-grid#tablegx
One-click install
npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-quickstart
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tablegx-quickstart
Source: https://github.com/TheYearIsTwentyGX/TableGX/tree/main/skills/tablegx-quickstart
Command: npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-quickstart

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TableGX Quick Start streamlines installing and configuring TableGX in React apps, reducing the effort to bootstrap a table with Tailwind styling and common features.

Core Features & Use Cases

  • Tailwind v4 integration and scanning
  • Unified TableGX entry point with a single API for ReadOnlyTable, EditableTable, and tabbed variants
  • Column factories including textColumn, numberColumn, dateColumn, badgeColumn, and customColumn
  • Quick-start patterns for enabling row selection, footer, and record count
  • Lightweight, client-only React setup compatible with React 18+

Quick Start

Install the package and import TableGX and its column factories to begin building a read-only data table.

Frequently Asked Questions about tablegx-quickstart

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

FAQPage Schema
How do I configure Tailwind v4 scanning for a React data grid?▼

Setting up a React data grid with Tailwind v4 requires importing theme styles and configuring content scanning. TableGX Quick Start applies the necessary Tailwind scanning configuration to ensure grid components render with correct styles.

What is the best way to bootstrap a read-only data table in React?▼

The best way to bootstrap a read-only data table in React is using a unified entry point with column factories. TableGX Quick Start exposes ReadOnlyTable alongside factories like textColumn and numberColumn to rapidly construct functional data grids.

Does TableGX work with React 18 and what do I need to install?▼

TableGX is compatible with React 18+ and requires installing its package and importing the unified entry point. You also need to configure Tailwind v4 scanning to ensure the data grid styles are detected and applied correctly.

How do I add different column types like badges and dates to my React table?▼

To add varied column types to a React table, you use exposed column factories for specific data rendering. TableGX provides textColumn, numberColumn, dateColumn, badgeColumn, and customColumn factories to structure data within the grid.

Can I enable row selection and footers when setting up a React data table?▼

You can enable row selection and footers using built-in quick-start patterns during React data table setup. TableGX provides configuration options to activate row selection, display footers, and show record counts within the grid.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
TheYearIsTwentyGXTheYearIsTwentyGX

tablegx-theming

Style TableGX components with CSS variables and theme.css tokens.

Community
Intermediate
drgaciwdrgaciw

nextjs-app-router-patterns

Implement Next.js 14+ App Router patterns for Server Components and Server Actions.

Community
Advanced
OpenSenseNovaOpenSenseNova
4.9k

stacked-chart-visualization

Convert percentage data into stacked bar charts for trend analysis.

Official
Intermediate