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

tablegx-advanced

Coordinate complex table views across tabs with shared filters and row selection.

Updated Jun 9, 2026
Search Tags:#react#filters#tabs#datatable#tablegx#nested-rows
One-click install
npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-advanced
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tablegx-advanced
Source: https://github.com/TheYearIsTwentyGX/TableGX/tree/main/skills/tablegx-advanced
Command: npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-advanced

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinate complex table views across multiple tabs with shared filters and row selection.

Core Features & Use Cases

  • TabbedTable with multiple views over a single dataset and shared filtering across tabs
  • IndependentTabbedTable for fully isolated per-tab tables (data, columns, sorting, and visibility)
  • idColumn cross-tab intersection to drive cross-tab interactions
  • Nested rows with expand/collapse and getSubRows
  • Footer aggregates on filtered leaf rows and per-tab visibility persistence
  • Frozen columns during tab transitions and smooth tab strip navigation
  • Use cases include tabbed dashboards, tree grids, and combined shared/independent tab configurations

Quick Start

Create a TabbedTable with defined tabs and data, connect to a shared filter, and render it to switch between views.

Frequently Asked Questions about tablegx-advanced

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

FAQPage Schema
How do I build a React datatable with multiple tabs and shared filters?▼

A React datatable with multiple tabs and shared filters uses a TabbedTable configuration to coordinate complex table views over a single dataset, synchronizing global filter state and row selection across all tabs.

Can I create fully isolated per-tab table views in React?▼

Yes, you can create fully isolated per-tab table views using an IndependentTabbedTable variant, which separates data, columns, sorting, and visibility configurations for each tab without cross-tab interference.

How do nested rows work in a React datatable component?▼

Nested rows in a React datatable use expand and collapse logic driven by a getSubRows function, allowing hierarchical tree grids to render child rows beneath their parent rows dynamically.

Does this datatable approach support footer aggregates on filtered leaf rows?▼

Yes, footer aggregates calculate values on filtered leaf rows, ensuring that summary totals reflect only the currently visible data after shared or per-tab filters are applied to the table.

What is idColumn cross-tab intersection in a multi-tab React table?▼

idColumn cross-tab intersection uses a designated identifier column to match and drive interactions across multiple tabs, linking row selection and filtering state between shared views over a single dataset.

When should I use independent tabbed tables instead of a shared filter table?▼

Use independent tabbed tables when each tab requires distinct data sources, columns, and sorting states, whereas shared filter tables are better for analyzing a single dataset across multiple synchronized views.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

tanstack-table-guide

Implement TanStack Table data tables with sorting, filtering, pagination, and row selection in React.

Community
Intermediate
markeriksonmarkerikson
41

dashboard-design

Design dark-mode dashboard interfaces with semantic CSS tokens and fixed table layouts.

Community
Intermediate
TanStackTanStack
28.3k

filtering

Implement client-side column and global filtering in TanStack Table v9.

Official
Intermediate
zMynxxzMynxx

ponytail

Enforce minimal implementation choices and avoid over-engineering in coding tasks.

Community
Intermediate