AgentHubAgentHub

react-compose-with-tanstack-virtual

SkillSkillsMP

io.github.TanStack/table/compose-with-tanstack-virtual · vbeta

`@tanstack/react-table` v9 does NOT include virtualization — pair with `@tanstack/react-virtual`. Standard row-virtualization pattern: get the row array from `table.getRowModel().rows`, feed `rows.length` to `useVirtualizer({ count, estimateSize, getScrollElement, ... })` in the DEEPEST possible component (a `TableBody`, NOT `App`), iterate `rowVirtualizer.getVirtualItems()` instead of `rows.map`, absolute-position each row with `transform: translateY(virtualRow.start)px`, and render `<tbody>` as a CSS grid with a fixed total height. Column virtualization uses `horizontal: true` plus padding-left/right placeholder cells. An experimental ref-mutation variant skips React reconciliation for ~10% extra perf but the standard pattern is the default.

在 SkillsMP 查看 ↗源仓库 ↗

概览

react-compose-with-tanstack-virtual 是一个Agent Skill，收录自 SkillsMP。本页提供 Cursor、Claude Code 等客户端的安装配置片段。

Agent Skill 是带 SKILL.md 的指令包。安装后，AI 会根据 description 在匹配任务时自动加载，无需每次手动粘贴提示词。

安装

选择你的平台查看安装方式

# 通用 CLI（Cursor / Claude Code / Codex 等均支持）
npx skills add TanStack/table@compose-with-tanstack-virtual

使用方式

安装完成后，在对话中直接描述你的任务（或提及技能名称）。Agent 会先读取 SKILL.md 的 description 判断是否启用，再按其中的步骤执行。可用 /skills（Claude Code）或在设置中查看已加载的 Skills。

相关资源

统一 Manifest

{
  "id": "io.github.TanStack/table/compose-with-tanstack-virtual",
  "type": "skill",
  "version": "beta",
  "displayName": "react-compose-with-tanstack-virtual",
  "description": "`@tanstack/react-table` v9 does NOT include virtualization — pair with `@tanstack/react-virtual`. Standard row-virtualization pattern: get the row array from `table.getRowModel().rows`, feed `rows.length` to `useVirtualizer({ count, estimateSize, getScrollElement, ... })` in the DEEPEST possible component (a `TableBody`, NOT `App`), iterate `rowVirtualizer.getVirtualItems()` instead of `rows.map`, absolute-position each row with `transform: translateY(virtualRow.start)px`, and render `<tbody>` as a CSS grid with a fixed total height. Column virtualization uses `horizontal: true` plus padding-left/right placeholder cells. An experimental ref-mutation variant skips React reconciliation for ~10% extra perf but the standard pattern is the default.",
  "author": {
    "name": "TanStack",
    "url": "https://github.com/TanStack"
  },
  "repository": {
    "url": "https://github.com/TanStack/table",
    "source": "github",
    "subfolder": "packages/react-table/skills/react/compose-with-tanstack-virtual"
  },
  "homepage": "https://skillsmp.com/skills/tanstack-table-packages-react-table-skills-react-compose-with-tanstack-virtual-skill-md",
  "distribution": {
    "packages": [
      {
        "registryType": "source",
        "identifier": "TanStack/table@compose-with-tanstack-virtual",
        "version": "beta",
        "runtimeHint": "npx skills add"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "codex",
    "vscode"
  ],
  "keywords": [
    "stars:28079"
  ],
  "provenance": {
    "origin": "skillsmp",
    "originalId": "tanstack-table-packages-react-table-skills-react-compose-with-tanstack-virtual-skill-md",
    "originalUrl": "https://skillsmp.com/skills/tanstack-table-packages-react-table-skills-react-compose-with-tanstack-virtual-skill-md",
    "isOfficial": false,
    "status": "active"
  }
}
react-compose-with-tanstack-virtual — Agent Skill 安装与配置 · AgentHub