tanstack-table

Create customizable React data tables with sorting, filtering, pagination, and row selection.

33|1|Updated Jul 19, 2024

Search Tags:#react #filtering #pagination #sorting #react-table #datatable

Ready to run

npx skills add https://github.com/fellipeutaka/kanpeki --skill tanstack-table-fellipeutaka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tanstack-table
Source: https://github.com/fellipeutaka/kanpeki/tree/main/.agents/skills/tanstack-table
Command: npx skills add https://github.com/fellipeutaka/kanpeki --skill tanstack-table-fellipeutaka

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of building feature-rich data tables in React, enabling developers to implement sorting, filtering, pagination, and other advanced features with minimal effort.

Core Features & Use Cases

Data Grid Construction: Build dynamic, headless data tables for dashboards or admin panels.
State Management: Manage complex table states like sorting, filtering, selection, and visibility seamlessly.
Performance Optimization: Support for efficient rendering and large datasets through modular row models.
Use Case: Quickly implement a sortable and filterable user list with pagination and row selection in a React application.

Quick Start

Use the tanstack-table skill to display a list of users with sortable columns and pagination controls.

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 and pagination?▼

You can build a React data table with sorting and pagination by using the @tanstack/react-table library to implement headless logic for column sorting, filtering, and modular pagination state controls.

What is the best way to manage complex table state in a React application?▼

Managing complex table state in React requires controlling row selection, column visibility, and filtering logic. The @tanstack/react-table library provides modular row models to handle these states seamlessly within your data grid components.

Can I render large datasets efficiently in a React data grid?▼

Yes, you can render large datasets in a React data grid efficiently by utilizing modular row models. This approach supports performance optimization and precise state control when processing massive volumes of rows.

Do I need to install any dependencies to create headless data tables in React?▼

Yes, you need to install the @tanstack/react-table package as a required dependency. This library provides the core headless functionalities needed to construct customizable data grids with filtering and row selection features.

How do I add row selection and filtering to an existing React data table?▼

To add row selection and filtering to a React data table, implement state management hooks from the @tanstack/react-table library. These hooks allow you to configure modular row models for precise selection and data visibility control.

Why use a headless approach for building React data tables?▼

Using a headless approach for React data tables separates the sorting and filtering logic from the UI markup. This allows you to build highly customizable data grid components while maintaining performance with large datasets.