tablegx-theming

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

Updated Jun 9, 2026

Search Tags:#theming #theme #dark-mode #css-variables #tablegx #slot-overrides #per-cell-styling

Ready to run

npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-theming

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tablegx-theming
Source: https://github.com/TheYearIsTwentyGX/TableGX/tree/main/skills/tablegx-theming
Command: npx skills add https://github.com/TheYearIsTwentyGX/TableGX --skill tablegx-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Theming TableGX components to match brand visuals using CSS variables.

Core Features & Use Cases

Theming via CSS variables and theme.css tokens, enabling brand visuals and dark mode, plus translucent styling for header and pinned sections.
Slot-based customization: classNames slots support for ReadOnlyTable, EditableTable, and TabbedTable with column/header styling and skin overrides.
Per-cell styling and data-attribute hooks: getCellClassName usage and data-tgx-* selectors for targeted UI regions.

Quick Start

Import '@twentygx/tablegx/theme.css' and override CSS variables in your app's root or dark mode blocks to apply your chosen theme.

Frequently Asked Questions about tablegx-theming

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

FAQPage Schema

How do I theme TableGX tables to match my brand visuals using CSS variables?▼

Theme TableGX tables by importing theme.css and overriding CSS variables in your app's :root or .dark blocks. This applies your brand colors and surfaces to ReadOnlyTable, EditableTable, and TabbedTable variants.

What is the best way to apply dark mode to TableGX components?▼

Apply dark mode to TableGX components by configuring CSS tokens within a .dark selector block in your stylesheet. This updates the component surfaces and colors for dark mode scenarios.

Can I use slot overrides for per-cell styling in an EditableTable?▼

Yes, you can achieve per-cell styling in an EditableTable using classNames slots and the getCellClassName function. This allows targeted UI customization alongside data-tgx attribute selectors.

Does TableGX theming support translucent styling for pinned table sections?▼

Yes, TableGX theming supports translucent styling for both header and pinned sections. You configure this by adjusting the relevant CSS variables and tokens within your theme.css overrides.

How do data-tgx attributes work for targeting specific table UI regions?▼

Data-tgx attributes act as selector hooks for targeting specific UI regions within TableGX components. You use these data-tgx-* selectors in your CSS to apply custom styles to distinct table areas.

What are the limitations of styling TableGX without using CSS variables?▼

Styling TableGX without CSS variables bypasses the centralized theme.css token system, making dark mode switching and brand visual consistency harder to maintain across ReadOnlyTable and TabbedTable variants.