skills.rest
Montte-erp
Montte-erpOFFICIAL
Explore all skills by this author →
GitHub

tanstack-table

Manage sorting, filtering, pagination, grouping, and row state for dynamic data grids.

6|4|Updated Nov 1, 2025
Search Tags:#tanstack#filtering#pagination#sorting#virtualization#react-table#datagrid
One-click install
npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-table-montte-erp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/Montte-erp/montte-nx/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/Montte-erp/montte-nx --skill tanstack-table-montte-erp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table provides headless table logic so developers can implement performant, feature-rich data tables without opinionated markup or styles, removing boilerplate around sorting, filtering, pagination, grouping, and selection.

Core Features & Use Cases

  • Declarative state & row models: Composable row model pipeline for core, sorted, filtered, paginated, grouped, and expanded row processing.
  • Column and data stability patterns: Best practices for memoized columns/data, custom accessors, column pinning, resizing, visibility, and aggregation.
  • Integrations & advanced scenarios: Virtualization integration, server-side manual operations, TypeScript module augmentation, and editable cells for complex admin dashboards and analytics grids.
  • Use Case: Implement a React admin table that supports fuzzy global search, server-side pagination, column grouping, pinned action columns, and virtualized rendering for 100k+ rows.

Quick Start

Create a React table using useReactTable with memoized columns and stable data to render sortable, filterable, paginated rows and enable row selection.

Frequently Asked Questions about tanstack-table

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

FAQPage Schema
How do I build a React data table with sorting, filtering, and pagination?▼

To build a React data table, use headless table logic to manage sorting, filtering, and pagination by creating a table instance with useReactTable, passing memoized columns and stable data to render dynamic rows without opinionated markup.

What is headless table logic and when do I need it for data grids?▼

Headless table logic provides core data processing for sorting, filtering, and grouping without dictating markup or styles. You need it for data grids when you want full control over UI rendering while removing state management boilerplate.

Can I use TanStack Table for server-side pagination and virtualization in JavaScript?▼

Yes, you can use this headless logic for server-side pagination and virtualization in JavaScript. It supports manual server-side operations and integrates with virtualizers to efficiently render large datasets like 100k+ rows.

Does this headless table logic work with Vue, Solid, Svelte, and Angular?▼

Yes, the headless table logic works across Vue, Solid, Svelte, Angular, Qwik, and Lit. It provides framework-agnostic TypeScript row models and state management that integrate directly into client-side rendering setups.

What is the best way to handle column pinning and TypeScript type augmentation in data grids?▼

The best way to handle column pinning and TypeScript type augmentation is through composable row models and module augmentation. This approach ensures stable column references, custom accessors, and strict typing for complex admin dashboards.

Related Skills

Explore More Software Engineering Skills→
janpeterdjanpeterd

tanstack-table

Configure headless TanStack Table logic for sorting, filtering, pagination, and grouping.

Community
Advanced
omakeiomakei
2

nuxt-tables

Create Nuxt 4 data tables with a reusable column builder and DataTable component.

Community
Intermediate
tanstack-skillstanstack-skills
29

tanstack-table

Provide headless table primitives for building sortable, filterable data grids in JavaScript/TypeScript frameworks including React, Vue, Svelte, Angular, and others.

Official
Advanced
scikrikciscikrikci

streamlit

Standardize configuration and UI patterns for Streamlit app development.

Community
Intermediate