tanstack-table

Builds headless tables and datagrids for React, Vue, and Angular.

1|Updated May 24, 2026
One-click install
npx skills add https://github.com/PTKDrake/FIT-vmu --skill tanstack-table-ptkdrake
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/PTKDrake/FIT-vmu/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/PTKDrake/FIT-vmu --skill tanstack-table-ptkdrake

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/react-table, @tanstack/match-sorter-utils, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating complex tables and datagrids in web applications, providing a headless UI solution that simplifies the process.

Core Features & Use Cases

  • Headless UI: Offers a complete UI solution for building tables and datagrids without handling rendering or styling.
  • Extensibility: Supports sorting, filtering, pagination, grouping, and more, all customizable to fit specific needs.
  • Use Case: Ideal for developers building data-intensive applications with React, Vue, or other modern front-end frameworks.

Quick Start

Install the tanstack-table skill and use it to create a table with sorting capabilities for your application's data.

Frequently Asked Questions about tanstack-table

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

FAQPage Schema
What is a headless UI approach for building tables and datagrids?

A headless UI for tables provides the logic for sorting, filtering, and pagination without enforcing rendering or styling. This approach gives you complete control over the markup and appearance while handling the complex datagrid functionality.

How do I add sorting and filtering to a React datagrid?

You can add sorting and filtering to a React datagrid by integrating a headless UI library. This provides the core logic and state management, which you then connect to your rendering layer to display the sorted and filtered data.

Can I build tables for Vue and Angular using this headless approach?

Yes, the headless table approach is designed for use with modern JavaScript frameworks like React, Vue, and Angular. It separates the datagrid logic from the rendering layer, allowing seamless integration across different front-end frameworks.

Do I need specific dependencies to implement pagination and grouping in my datagrid?

Yes, you need dependencies like the core headless table package and related matching utilities to implement pagination and grouping. These packages provide the necessary functions to manage your table state and data processing.

What is the best way to handle complex data-intensive tables in web applications?

The best way to handle complex data-intensive tables is using a headless UI solution. It simplifies building datagrids by offering extensible logic for sorting, filtering, and pagination without locking you into a specific visual style.

When should I not use a headless approach for my datagrid?

You should not use a headless datagrid approach if you need an out-of-the-box, pre-styled component with minimal configuration. Because it is headless, you must handle all rendering and styling yourself, which requires more initial setup.