skills.rest
jason660519
jason660519COMMUNITY
Explore all skills by this author →
GitHub

Table and Sheet Layout

Configure data tables and workstation layouts in Project-Manager using WorkstationFrame and BottomSheetTabs contracts.

Updated May 11, 2026
Search Tags:#frontend#dashboard#ui-patterns#tanstack-table#table-layout#workstation-frame
One-click install
npx skills add https://github.com/jason660519/Project-Manager --skill table-and-sheet-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Table and Sheet Layout
Source: https://github.com/jason660519/Project-Manager/tree/main/.agents/skills/table-and-sheet-layout
Command: npx skills add https://github.com/jason660519/Project-Manager --skill table-and-sheet-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds and maintains consistent workstation UI patterns to design, modify, and verify data tables, sheet panels, and dashboard views within Project-Manager.

Core Features & Use Cases

  • Integrates with WorkstationFrame and BottomSheetTabs to deliver consistent layouts across dashboards and multi-view pages.
  • Provides reusable column patterns, sorting, and complex cell extraction rules for reliable data presentation.
  • Highlights layout pitfalls and ensures color system consistency across PM views and panels.

Quick Start

Create or refine a TanStack Table-based view under app/ui/views/ using the WorkstationFrame and BottomSheetTabs contracts described above.

Frequently Asked Questions about Table and Sheet Layout

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

FAQPage Schema
How do I create a multi-view dashboard with TanStack Table in a workstation layout?▼

Build dashboard views under app/ui/views/ using the WorkstationFrame and BottomSheetTabs contracts to enforce consistent multi-view layouts with sticky headers, resizable columns, and standardized sheet panels across your workstation.

What is the best way to configure frozen columns and sticky headers for complex data tables?▼

Configure complex data tables by applying reusable column patterns and table-governance rules under components/table. This ensures reliable frozen columns, sticky headers, and consistent cell extraction rules for data presentation across all views.

How do I maintain colour system consistency across dashboard views and bottom sheet panels?▼

Maintain colour system consistency by adhering to the project's colour system and table-governance rules when refining table components and sheet panels. This highlights layout pitfalls and ensures visual uniformity across PM views and dashboards.

Does this workstation layout approach support tabbed views and bottom sheet integration?▼

Yes, the workstation layout integrates with WorkstationFrame and BottomSheetTabs to deliver consistent tabbed views and bottom sheet panels. It enforces these contracts specifically to support multi-view dashboards and project progress pages reliably.

Why are my resizable table columns breaking the workstation frame layout?▼

Resizable columns break the layout when table components under components/table deviate from the WorkstationFrame contract. Enforcing consistent frame usage, column extraction rules, and table-governance guidelines prevents these structural pitfalls across views.

Related Skills

Explore More Software Engineering Skills→
jason660519jason660519

Create TanStack Table

Create and extend TanStack Table v8 data tables in Project-Manager.

Community
Advanced
vecearvecear

table-builder

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

Community
Advanced
alexgorbatchevalexgorbatchev
1

react-development

Enforce JSX usage and test-id contracts in React components.

Community
Advanced
andreiverdesandreiverdes

shadcn Dashboard + Landing Template Expert

Guides React + TypeScript + Vite + Tailwind dashboard and landing frontends with shadcn/ui patterns.

Community
Intermediate