skills.rest
Military-Veteran-Team-LPT-Realty
Military-Veteran-Team-LPT-RealtyOFFICIAL
Explore all skills by this author →
GitHub

column-sort-tables

Adds clickable column sorting to data tables in React and Tailwind projects.

Updated Sep 16, 2026
Search Tags:#typescript#react#dashboard#tailwind#usememo#sortable columns#table sorting
One-click install
npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill column-sort-tables-military-veteran-team-lpt-realty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: column-sort-tables
Source: https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills/tree/main/skills/column-sort-tables
Command: npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill column-sort-tables-military-veteran-team-lpt-realty

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lucide-react, and includes scripts (resource) and references (resource) components.

What problem does it solve? Data tables in React dashboards often lack interactive sorting, forcing users to scan unsorted rows manually. This Skill provides a repeatable workflow to add clickable column sort headers across every table in a React/Tailwind/tRPC project, including flat tables and team-grouped table layouts. ## Core Features & Use Cases - Audit Script: Scans all page files to identify which tables are missing sort functionality and reports table element counts per page. - Shared Components: Provides a SortableHeader component and useSortableTable hook with light/dark themes, alignment options, and brand-consistent chevron indicators. - TeamGroupTable Integration: Extends ColumnDef with a sortValue accessor so grouped tables sort automatically without extra page-level state. - Use Case: A developer is asked to make all columns sortable across a 12-page analytics dashboard. They run the audit script, install the two shared components, apply the sort pattern per page, and verify with a TypeScript check. ## Quick Start Ask the AI to add clickable column sort to every data table in your React project using the SortableHeader component and useSortableTable hook.

Frequently Asked Questions about column-sort-tables

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

FAQPage Schema
How do I add sortable column headers to a React table?▼

Add sort state with useState for sortKey and sortDir, wrap your rows in a useMemo sort, and replace each th element with a SortableHeader component passing label, colKey, sortKey, sortDir, and onSort. String columns default to ascending and numeric columns to descending on first click.

How do I find which pages in my project are missing table sorting?▼

Run the included audit_sort.sh script against your pages directory. It greps for sort-related identifiers like toggleSort and sortKey, lists pages missing them, and counts table elements per page so you know which files actually need the sort pattern applied.

Does this table sorting work with grouped or team-based tables?▼

Yes, grouped tables are supported through the TeamGroupTable component. Add a sortValue accessor returning a string or number to each ColumnDef entry, and the component handles sorting automatically without extra page-level state.

Can I use the SortableHeader component with dark-themed tables?▼

Yes, pass theme="dark" to SortableHeader for dark navy table styles. The component adjusts text and icon colors accordingly, while the default light theme suits standard white dashboard tables.

When should I not add sorting to a table column?▼

Skip sorting for badge-only columns, action button columns, and any column without a meaningful sort value. Sorting these adds no value and can confuse users about what the column represents.

Related Skills

Explore More Software Engineering Skills→
twofoldtech-dakotatwofoldtech-dakota
1

data-table

Render accessible data tables with sorting, filtering, and pagination in SvelteKit.

Community
Advanced
Uxcel-LabUxcel-Lab
12

ux-tables

Design and critique data tables and lists with alignment, sorting, and density rules.

Official
Intermediate
patricio0312revpatricio0312rev
5

table-builder

Create configurable React data tables with sorting, filtering, and pagination.

Community
Advanced
aashahinaashahin

tanstack-table

Build headless data tables with sorting, filtering, and pagination in React.

Community
Intermediate