solid/compose-with-tanstack-pacer

Debounce or throttle high-frequency writes to @tanstack/solid-table via @tanstack/solid-pacer.

28.3k|3.6k|Updated Oct 20, 2016
One-click install
npx skills add https://github.com/TanStack/table --skill solid-compose-with-tanstack-pacer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: solid/compose-with-tanstack-pacer
Source: https://github.com/TanStack/table/tree/main/packages/solid-table/skills/solid/compose-with-tanstack-pacer
Command: npx skills add https://github.com/TanStack/table --skill solid-compose-with-tanstack-pacer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents slow or janky Solid Table updates caused by high-frequency user events that trigger expensive table writes and row-model recomputation.

Core Features & Use Cases

  • Debounced filter writes: Commit column filter changes (e.g., from text inputs) only after the user pauses typing to avoid re-filtering on every keystroke.
  • Throttled resize writes: Reduce the update rate during column resize drags so column sizing changes do not continuously force heavy recalculation.
  • Performance-focused targeting: Apply pacing specifically to filtering and column-resizing state updates while keeping the table atoms as the source of truth.

Quick Start

Ask an AI coding assistant to show how to wrap a Solid Table column.setFilterValue call with useDebouncedCallback from @tanstack/solid-pacer/debouncer using a 250ms wait, while keeping the input state immediately responsive.

Frequently Asked Questions about solid/compose-with-tanstack-pacer

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

FAQPage Schema
How do I debounce Solid Table filter inputs to stop lag on every keystroke?

Debouncing Solid Table filter inputs delays the column.setFilterValue write until typing pauses. Wrapping the setter with a debounced callback commits changes at a controlled cadence while preserving immediate local input echo.

Why does column resizing in TanStack Table cause janky performance during drags?

Column resizing in TanStack Table causes janky performance because pointer-driven state changes trigger expensive row-model recomputation on every drag pixel. Throttling these high-frequency writes reduces the update rate to prevent continuous heavy recalculation.

Can I use TanStack Pacer to throttle high-frequency table state updates in SolidJS?

Yes, you can use TanStack Pacer to throttle high-frequency table state updates in SolidJS. It applies pacing specifically to column resizing and filtering state changes while keeping the table atoms as the source of truth.

What is the best way to keep Solid Table responsive while slowing down row-model recomputation?

The best way to keep Solid Table responsive while slowing down row-model recomputation is applying debounced or throttled setters. This commits high-frequency filter or resize writes at a controlled cadence while preserving immediate local input echo.

Does debouncing column filter writes affect the immediate text input responsiveness?

Debouncing column filter writes does not affect immediate text input responsiveness. The debounce wraps the table setter write, committing changes only after the user pauses typing, while the local input state remains immediately responsive.