skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/TableRow

Render structured data as table rows with customizable labels and values.

Updated Aug 27, 2026
Search Tags:#frontend#react#ui component#table#data display
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-tablerow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/TableRow
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/TableRow
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-tablerow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured and reusable way to display label-value pairs in a table format, enhancing the readability and organization of information within an application's UI.

Core Features & Use Cases

  • Flexible Row Display: Renders individual rows with customizable labels and values.
  • Card-like Table Grouping: Organizes multiple TableRow components into a visually cohesive card using TableRow.Group.
  • Alignment and Spacing Control: Allows for space-between (default) or left alignment of values, and custom width ratios for labels.
  • Use Case: Displaying user profile details, order summaries, or configuration settings in a clean, organized manner.

Quick Start

Use the TableRow component to display a user's name as 'Username' and their email as 'Email'.

Frequently Asked Questions about use-design-system/TableRow

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

FAQPage Schema
How do I display structured data in tables using React?▼

To display structured data in tables, this React UI component renders label-value pairs with customizable alignment and width ratios. It organizes key-value information into readable rows, supporting group-based card layouts for enhanced UI presentation.

What is the best way to render key-value pairs in a UI component?▼

Rendering key-value pairs is best handled by structuring them as table rows with customizable labels and values. This approach facilitates presentation in user interfaces, allowing group-based card layouts and alignment options for optimal readability and organization.

Can I group multiple table rows into a single card layout in React?▼

Yes, you can group multiple table rows into a single card layout using the TableRow.Group component. This feature organizes individual rows into a visually cohesive card, creating a clean and structured presentation for data like user profiles or order summaries.

How do I align values and control spacing for data display in React?▼

To align values and control spacing for data display, configure the table row component with space-between or left alignment options. You can also apply custom width ratios to labels, ensuring the structured data presentation matches your UI requirements.

When should I use a table format over other data display methods in frontend development?▼

Use a table format in frontend development when you need to display structured label-value pairs like configuration settings or order summaries. It provides a reusable way to enhance readability and organization within an application's UI compared to unstructured layouts.

Related Skills

Explore More Design & Creative Skills→
ViewableGravyViewableGravy

react_dynamic-styling

Pass React state and props as CSS variables for dynamic styling.

Community
Basic
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-ux-alignment

Detect vertical alignment defects in web interfaces using DOM bounding-box measurements.

Community
Advanced
jrmatherlyjrmatherly

spaceui-dev

Deliver a shared React design system with Tailwind v4 tokens for Spacebot web interfaces.

Community
Advanced
toddmoytoddmoy
1

responsive layout

Build mobile-first responsive layouts with Tailwind CSS, Grid, and Flexbox.

Community
Advanced