供应链明细表优化 | TanStack Table 集成实战

本文深入解析了如何利用TanStack Table（v8）这一高性能无头表格库，为电商供应链系统打造兼具极致性能、深度交互与业务贴合性的明细表格——从应对海量SKU渲染、复杂内联编辑、动态列配置、多维排序筛选，到实现行选择批量操作与虚拟滚动优化，手把手完成从环境搭建、数据模拟、基础渲染，到可编辑单元格、状态联动更新、批量冻结/导出等高频场景的完整集成实战，不仅解决了传统表格在供应链场景下的卡顿与笨拙痛点，更提供了一套可扩展、易维护、与React Query等现代生态无缝协同的企业级数据表格落地范式。

{\"type\":\"doc\",\"content\":[{\"type\":\"heading\",\"attrs\":{\"id\":\"a33e361c-c561-4d9a-8729-dc4b169b1bf8\",\"textAlign\":\"inherit\",\"indent\":0,\"level\":1,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"引言 \"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"edecbe31-b7fd-450b-8453-2c7ed6a2f938\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"从采购订单行项、发货明细到库存批次追踪，一个高性能、可编辑且体验流畅的表格，是提升运营人员效率、确保数据准确性的关键战场。传统的\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"\u003ctable\u003e\"},{\"type\":\"text\",\"text\":\"标签或简单UI库表格组件，在面对供应链场景下的\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"大数据量渲染、复杂单元格编辑、实时数据更新\"},{\"type\":\"text\",\"text\":\"与\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"深层次联动校验\"},{\"type\":\"text\",\"text\":\"时，往往捉襟见肘，导致页面卡顿、交互笨拙。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"138f9d16-60df-4371-9336-84ea1b8e4745\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"本文将深入探讨如何集成业界领先的 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"TanStack Table (v8)\"},{\"type\":\"text\",\"text\":\" 库，结合现代化的React状态管理，为电商供应链系统打造一个坚实、灵活且极致性能的数据表格解决方案，让它真正成为业务的得力助手，而非性能瓶颈。\"}]},{\"type\":\"heading\",\"attrs\":{\"id\":\"afd66d95-c6ec-4db3-bc13-67a1f5f1c5bc\",\"textAlign\":\"inherit\",\"indent\":0,\"level\":1,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"一、为什么选择 TanStack Table？供应链表格的严苛挑战 \"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"b6889dbf-edfa-450a-a644-70dc480b9bf1\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"在深入代码之前，我们首先需要明确供应链明细表格的核心挑战与选型依据。\"}]},{\"type\":\"bulletList\",\"attrs\":{\"id\":\"8924c0e4-a229-47c2-be57-9163aa003c52\",\"isHoverDragHandle\":false},\"content\":[{\"type\":\"listItem\",\"attrs\":{\"id\":\"d4ff5235-4018-4fb1-82b1-806d40bdd71a\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"da3b2061-974d-49ae-bf8e-7347d01ac5f3\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"海量数据渲染性能\"},{\"type\":\"text\",\"text\":\"：单次可能需要展示数千甚至上万条SKU的库存明细或历史订单记录。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"8c4e8b76-b6a3-40ba-a5e2-f05096891b39\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"d7890ca0-11df-44b5-ad18-942221e67f70\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"复杂的单元格编辑\"},{\"type\":\"text\",\"text\":\"：需要支持快速的内联编辑、下拉选择、日期选择、数字格式化与校验。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"5323ae25-3038-4ebd-a65f-eeaea7a34284\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"ca14729c-f2b1-4897-b153-ef7a06350d21\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"动态列与列操作\"},{\"type\":\"text\",\"text\":\"：不同仓库、不同业务角色（如采购、质检、财务）需要看到和操作的列可能不同。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"1b283416-9cba-4596-b8ae-18cda2d86217\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"a212473a-0eb6-4630-a99c-033f7b9929b3\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"强大的排序、筛选与分组\"},{\"type\":\"text\",\"text\":\"：用户需要从多维度快速定位目标数据，例如按库存状态筛选、按供应商分组。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"b60f808d-09f6-4378-841b-903c43e35286\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"94909269-6b6c-40b5-912e-8c57800449a2\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"行选与批量操作\"},{\"type\":\"text\",\"text\":\"：批量修改库存状态、批量发起质检或打印发货单是常见操作。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"7d72fc1d-8c99-4284-bcfb-7e1ae1ab7c47\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"05001a25-bb56-4cec-9a55-29f12b69297c\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"与全局数据流联动\"},{\"type\":\"text\",\"text\":\"：表格数据的修改需要无缝同步至状态管理层（如Context/Redux）或触发后端API调用。\"}]}]}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"98fb825d-c063-4b87-b237-6a5d026510b9\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"TanStack Table 完美应对了以上挑战：\"}]},{\"type\":\"bulletList\",\"attrs\":{\"id\":\"d21b4c1e-2bb3-4edb-9d89-3aaa142db07a\",\"isHoverDragHandle\":false},\"content\":[{\"type\":\"listItem\",\"attrs\":{\"id\":\"64710621-f11b-4976-8205-3a1d248d9d61\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"a00fdb3c-6364-4f49-9fe3-238f151d410c\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"无头(Headless)设计\"},{\"type\":\"text\",\"text\":\"：它不负责渲染任何UI元素，只提供全部的状态、逻辑和API。我们将100%掌控表格的样式、结构和交互，轻松融入现有设计系统。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"07122d7f-a55a-4835-9f8e-6212fccdc0ad\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"1569a672-e662-4afa-bacb-8870f4060599\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"惊人的性能\"},{\"type\":\"text\",\"text\":\"：基于hooks的架构，配合虚拟化渲染（需结合\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"@tanstack/react-virtual\"},{\"type\":\"text\",\"text\":\"），即使处理10W+行数据也能保持流畅滚动。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"08d79586-6015-498a-a66e-276c00496f0b\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"025d2508-fe27-4d2a-a8e3-11c83442c011\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"极强的灵活性\"},{\"type\":\"text\",\"text\":\"：编辑、筛选、排序、分组、行选、列可见性控制等功能均以特性(feature)形式提供，可按需组合和深度定制。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"02b86cd7-bcc4-4490-8205-c945b1aa27a8\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"02611741-325d-42f4-9200-570f30b316cc\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"框架无关性核心\"},{\"type\":\"text\",\"text\":\"：其核心逻辑(\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"@tanstack/table-core\"},{\"type\":\"text\",\"text\":\")与UI框架解耦，保证了API的稳定性和React版本的长期兼容性。\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"id\":\"bc8b0d89-2dca-44d3-aae7-6d296958b369\",\"textAlign\":\"inherit\",\"indent\":0,\"level\":1,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"二、项目环境搭建与基础表格渲染 \"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"12ad2ffb-a8d6-4692-ad67-197628bbae84\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"首先，我们初始化一个React项目并安装必要的依赖。本文基于纯JavaScript环境。\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"id\":\"8b6e674e-3c3f-4d11-b2a0-2cb5ea3cc4da\",\"language\":\"javascript\",\"theme\":\"atom-one-dark\",\"runtimes\":0,\"isHoverDragHandle\":false,\"key\":\"\",\"languageByAi\":\"javascript\"},\"content\":[{\"type\":\"text\",\"text\":\"# 创建React应用 (使用Vite作为构建工具，更轻量快速)

pm create vite@latest supply-chain-table -- --template react\cd supply-chain-table\\# 安装核心依赖

pm install @tanstack/react-table\# 安装图标库（用于操作按钮）和日期处理库

pm install lucide-react date-fns\# 安装用于数据模拟和管理的工具

pm install @tanstack/react-query axios\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"1fbed2b3-572f-43d4-a10a-be1c702a7b7a\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"接下来，我们创建一个模拟数据服务和基础表格组件。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"a9fa0917-58ce-4f29-bd94-f5db143c287f\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"1. 模拟数据与API服务 (\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"src/services/inventoryService.js\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\")\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"id\":\"179d3bac-0ded-4ef9-aafa-6177f722b256\",\"language\":\"javascript\",\"theme\":\"atom-one-dark\",\"runtimes\":0,\"isHoverDragHandle\":false,\"key\":\"\",\"languageByAi\":\"javascript\"},\"content\":[{\"type\":\"text\",\"text\":\"import { generate } from '@tanstack/react-table';\\// 模拟生成供应链库存明细数据\const generateInventoryData = (count) =\u003e {\ const skus = ['SKU-1001', 'SKU-1002', 'SKU-2001', 'SKU-3005'];\ const statuses = ['在库', '待检', '预留', '冻结', '已出库'];\ const warehouses = ['华东中心仓', '华南保税仓', '北京仓'];\ \ return Array.from({ length: count }, (_, index) =\u003e ({\ id: index + 1,\ sku: skus[Math.floor(Math.random() * skus.length)] + `-B${String(index).padStart(5, '0')}`,\ productName: `商品 ${['高级', '标准', '试用装'][index % 3]} ${index + 1}`,\ batchNumber: `BATCH-2024-${String(index).padStart(4, '0')}`,\ warehouse: warehouses[index % warehouses.length],\ currentQuantity: Math.floor(Math.random() * 1000) + 100,\ allocatedQuantity: Math.floor(Math.random() * 100),\ availableQuantity: 0, // 将通过计算得出\ status: statuses[index % statuses.length],\ lastUpdated: new Date(Date.now() - Math.random() * 7 * 24 * 60 * 60 * 1000).toISOString(),\ })).map(item =\u003e ({\ ...item,\ availableQuantity: item.currentQuantity - item.allocatedQuantity, // 计算可用库存\ }));\};\\// 模拟API函数\export const fetchInventoryData = async ({ pageIndex, pageSize }) =\u003e {\ // 模拟网络延迟\ await new Promise(resolve =\u003e setTimeout(resolve, 300));\ const allData = generateInventoryData(1000);\ const start = pageIndex * pageSize;\ const end = start + pageSize;\ const pageData = allData.slice(start, end);\ \ return {\ data: pageData,\ total: allData.length, // 总数用于分页\ };\};\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"fc5e684c-acca-45eb-808b-07c6dc4de341\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"代码解析\"},{\"type\":\"text\",\"text\":\"：\"}]},{\"type\":\"bulletList\",\"attrs\":{\"id\":\"f9357f8e-76f8-4ffb-a46c-33356ff591f3\",\"isHoverDragHandle\":false},\"content\":[{\"type\":\"listItem\",\"attrs\":{\"id\":\"983b0410-5e1e-46be-8250-37c407cbdea4\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"e2fdd3f8-a645-4cce-a838-1677d0959c8b\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"定义了\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"generateInventoryData\"},{\"type\":\"text\",\"text\":\"函数，生成包含\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"id\"},{\"type\":\"text\",\"text\":\"、\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"sku\"},{\"type\":\"text\",\"text\":\"、批次、仓库、库存数量、状态等典型字段的模拟数据。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"490bd2d5-aa5a-4c08-9a05-1a411150f0e2\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"d4edede9-e3a1-4a1a-b5b8-7503fd36d7fd\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"availableQuantity\"},{\"type\":\"text\",\"text\":\"（可用库存）通过计算得出，模拟了业务逻辑。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"c3ab0494-de7f-423d-b656-5410fb5a3f74\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"4107253b-0881-4c2a-a20d-c65b2944836b\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"fetchInventoryData\"},{\"type\":\"text\",\"text\":\"函数模拟了一个分页查询API，接收分页参数，返回一页数据及数据总量，并添加了300ms延迟以模拟真实网络请求。\"}]}]}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"add46e46-371c-4c52-8e79-4408b1266020\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"2. 基础表格组件 (\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"src/components/InventoryTable.jsx\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\")\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"id\":\"37795e3a-ce9b-4c0d-abbf-679eff7ab209\",\"language\":\"javascript\",\"theme\":\"atom-one-dark\",\"runtimes\":0,\"isHoverDragHandle\":false,\"key\":\"\",\"languageByAi\":\"javascript\"},\"content\":[{\"type\":\"text\",\"text\":\"import React, { useMemo } from 'react';\import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender } from '@tanstack/react-table';\import { useQuery } from '@tanstack/react-query';\import { fetchInventoryData } from '../services/inventoryService';\import { ArrowUpDown, MoreVertical } from 'lucide-react';\import '../styles/table.css'; // 基础样式\\const InventoryTable = () =\u003e {\ // 使用React Query管理服务器状态、缓存和分页\ const { data: apiData, isLoading, isError } = useQuery({\ queryKey: ['inventory', { pageIndex: 0, pageSize: 20 }], // 初始第一页\ queryFn: () =\u003e fetchInventoryData({ pageIndex: 0, pageSize: 20 }),\ });\\ const data = useMemo(() =\u003e apiData?.data || [], [apiData]);\ const total = apiData?.total || 0;\\ // 1. 定义列配置\ const columns = useMemo(\ () =\u003e [\ {\ accessorKey: 'sku',\ header: 'SKU编码',\ cell: ({ getValue }) =\u003e \u003cstrong\u003e{getValue()}\u003c/strong\u003e, // 自定义单元格渲染\ size: 150, // 控制列宽\ },\ {\ accessorKey: 'productName',\ header: '商品名称',\ size: 200,\ },\ {\ accessorKey: 'batchNumber',\ header: '生产批次',\ size: 150,\ },\ {\ accessorKey: 'warehouse',\ header: '所在仓库',\ size: 120,\ },\ {\ accessorKey: 'currentQuantity',\ header: '当前库存',\ // 添加排序功能\ enableSorting: true,\ },\ {\ accessorKey: 'availableQuantity',\ header: '可用库存',\ enableSorting: true,\ },\ {\ accessorKey: 'status',\ header: '库存状态',\ cell: ({ getValue }) =\u003e {\ const status = getValue();\ const statusConfig = {\ '在库': { color: 'green', bg: '#f0fdf4' },\ '待检': { color: 'orange', bg: '#fff7ed' },\ '预留': { color: 'blue', bg: '#eff6ff' },\ '冻结': { color: 'red', bg: '#fef2f2' },\ '已出库': { color: 'gray', bg: '#f3f4f6' },\ };\ const config = statusConfig[status] || {};\ return (\ \u003cspan className=\\\"status-badge\\\" style={{ color: config.color, backgroundColor: config.bg }}\u003e\ {status}\ \u003c/span\u003e\ );\ },\ },\ {\ id: 'actions',\ header: '操作',\ cell: () =\u003e (\ \u003cbutton className=\\\"icon-button\\\"\u003e\ \u003cMoreVertical size={16} /\u003e\ \u003c/button\u003e\ ),\ size: 80,\ },\ ],\ []\ );\\ // 2. 使用useReactTable Hook创建表格实例\ const table = useReactTable({\ data,\ columns,\ getCoreRowModel: getCoreRowModel(), // 必需：获取核心行模型\ getSortedRowModel: getSortedRowModel(), // 启用排序\ // 可以在此处定义初始状态，如排序规则\ initialState: {\ sorting: [{ id: 'availableQuantity', desc: true }], // 默认按可用库存降序\ },\ });\\ if (isLoading) return \u003cdiv\u003e加载库存数据中...\u003c/div\u003e;\ if (isError) return \u003cdiv\u003e数据加载失败，请重试。\u003c/div\u003e;\\ // 3. 渲染表格UI\ return (\ \u003cdiv className=\\\"table-container\\\"\u003e\ \u003cdiv className=\\\"table-header\\\"\u003e\ \u003ch2\u003e供应链库存明细\u003c/h2\u003e\ \u003cdiv\u003e总计: {total} 条记录\u003c/div\u003e\ \u003c/div\u003e\ \u003ctable\u003e\ \u003cthead\u003e\ {table.getHeaderGroups().map(headerGroup =\u003e (\ \u003ctr key={headerGroup.id}\u003e\ {headerGroup.headers.map(header =\u003e {\ const column = header.column;\ return (\ \u003cth key={header.id} style={{ width: header.getSize() }}\u003e\ \u003cdiv onClick={column.getToggleSortingHandler()} className=\\\"sortable-header\\\"\u003e\ {flexRender(column.columnDef.header, header.getContext())}\ {column.getCanSort() \u0026\u0026 \u003cArrowUpDown size={14} /\u003e}\ \u003c/div\u003e\ \u003c/th\u003e\ );\ })}\ \u003c/tr\u003e\ ))}\ \u003c/thead\u003e\ \u003ctbody\u003e\ {table.getRowModel().rows.map(row =\u003e (\ \u003ctr key={row.id}\u003e\ {row.getVisibleCells().map(cell =\u003e (\ \u003ctd key={cell.id}\u003e\ {flexRender(cell.column.columnDef.cell, cell.getContext())}\ \u003c/td\u003e\ ))}\ \u003c/tr\u003e\ ))}\ \u003c/tbody\u003e\ \u003c/table\u003e\ \u003c/div\u003e\ );\};\\export default InventoryTable;\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"aa37a31a-eef9-44df-8db2-9422fdb40bcd\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"代码解析\"},{\"type\":\"text\",\"text\":\"：\"}]},{\"type\":\"bulletList\",\"attrs\":{\"id\":\"8a3d1eed-e35f-4f8b-a556-84ecc0fab078\",\"isHoverDragHandle\":false},\"content\":[{\"type\":\"listItem\",\"attrs\":{\"id\":\"2f2b1ff6-f121-4504-99aa-8ddc8ad45c62\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"099412ba-8584-41e4-8d8e-7fb96146fe7c\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"列定义\"},{\"type\":\"text\",\"text\":\"：\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"columns\"},{\"type\":\"text\",\"text\":\"数组是表格的核心配置。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"accessorKey\"},{\"type\":\"text\",\"text\":\"对应数据对象的键。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"header\"},{\"type\":\"text\",\"text\":\"定义列标题。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"cell\"},{\"type\":\"text\",\"text\":\"函数允许完全自定义单元格渲染内容，我们用它来渲染加粗的SKU和带颜色的状态标签。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"enableSorting\"},{\"type\":\"text\",\"text\":\"启用该列排序。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"555df0f9-8aed-4cfb-86c0-37ef77cba6d7\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"2af3e5e9-37ba-4bbe-8512-8c5a098b57ed\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"创建Table实例\"},{\"type\":\"text\",\"text\":\"：\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useReactTable\"},{\"type\":\"text\",\"text\":\"Hook接收\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"data\"},{\"type\":\"text\",\"text\":\"、\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"columns\"},{\"type\":\"text\",\"text\":\"和一系列模型插件。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"getCoreRowModel\"},{\"type\":\"text\",\"text\":\"是必需的，\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"getSortedRowModel\"},{\"type\":\"text\",\"text\":\"提供了排序状态和逻辑。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"initialState\"},{\"type\":\"text\",\"text\":\"设置了表格的初始排序状态。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"af7ee775-9748-49d4-a1b2-653b55648894\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"0c397951-c396-40f0-b9ae-c4f9d79a0ab0\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"渲染\"},{\"type\":\"text\",\"text\":\"：通过\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"table.getHeaderGroups()\"},{\"type\":\"text\",\"text\":\"和\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"table.getRowModel().rows\"},{\"type\":\"text\",\"text\":\"来获取表头和行数据进行渲染。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"flexRender\"},{\"type\":\"text\",\"text\":\"是TanStack Table提供的渲染工具，用于解析和渲染列定义中\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"header\"},{\"type\":\"text\",\"text\":\"和\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"cell\"},{\"type\":\"text\",\"text\":\"的内容。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"column.getToggleSortingHandler()\"},{\"type\":\"text\",\"text\":\"为可排序列生成点击排序的事件处理器。\"}]}]}]},{\"type\":\"image\",\"attrs\":{\"id\":\"f639ba8c-69b2-4066-a3f5-367fbc2966f5\",\"src\":\"https://developer.qcloudimg.com/http-save/audit-10133498/7737b0501ca4bd116f43680ad47b67b4.png\",\"extension\":\"png\",\"align\":\"center\",\"alt\":\"\",\"showAlt\":false,\"href\":\"\",\"boxShadow\":\"\",\"width\":1012,\"aspectRatio\":\"0.869811\",\"status\":\"success\",\"showText\":true,\"isPercentage\":false,\"percentage\":0,\"isHoverDragHandle\":false}},{\"type\":\"heading\",\"attrs\":{\"id\":\"2d6dd8e9-0fa6-4234-af4f-736b8d1c111b\",\"textAlign\":\"inherit\",\"indent\":0,\"level\":1,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"三、实现可编辑单元格与行内编辑 \"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"b42af02c-8528-4397-9263-0dccdc3d61f1\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"供应链表格的核心交互之一是快速修改。我们实现一个内联编辑功能：点击单元格进入编辑模式，修改后保存或取消。\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"id\":\"abc76ea3-d923-4b0e-a5ba-dec9aa59e167\",\"language\":\"javascript\",\"theme\":\"atom-one-dark\",\"runtimes\":0,\"isHoverDragHandle\":false,\"key\":\"\",\"languageByAi\":\"javascript\"},\"content\":[{\"type\":\"text\",\"text\":\"// 在InventoryTable组件中添加状态和编辑逻辑\import React, { useState, useMemo } from 'react';\// ... 其他导入保持不变\import { Edit2, Check, X } from 'lucide-react';\\const EditableCell = ({ getValue, row, column, table }) =\u003e {\ const initialValue = getValue();\ const [isEditing, setIsEditing] = useState(false);\ const [value, setValue] = useState(initialValue);\\ const onSave = () =\u003e {\ // 此处应触发全局状态更新或API调用\ console.log(`保存行 ${row.id}, 列 ${column.id} 的值为:`, value);\ // 模拟更新表格数据（实际中应更新状态管理中的数据）\ table.options.meta?.updateData(row.index, column.id, value);\ setIsEditing(false);\ };\\ const onCancel = () =\u003e {\ setValue(initialValue);\ setIsEditing(false);\ };\\ if (isEditing) {\ return (\ \u003cdiv className=\\\"editing-cell\\\"\u003e\ \u003cinput\ value={value}\ onChange={(e) =\u003e setValue(e.target.value)}\ autoFocus\ /\u003e\ \u003cdiv className=\\\"edit-actions\\\"\u003e\ \u003cbutton onClick={onSave}\u003e\u003cCheck size={14}/\u003e\u003c/button\u003e\ \u003cbutton onClick={onCancel}\u003e\u003cX size={14}/\u003e\u003c/button\u003e\ \u003c/div\u003e\ \u003c/div\u003e\ );\ }\\ return (\ \u003cdiv className=\\\"display-cell\\\" onClick={() =\u003e setIsEditing(true)}\u003e\ {getValue()}\ \u003cEdit2 size={12} className=\\\"edit-icon\\\" /\u003e\ \u003c/div\u003e\ );\};\\// 然后，在columns配置中，将需要编辑的列的`cell`属性替换\const columns = useMemo(\ () =\u003e [\ // ... 其他列定义\ {\ accessorKey: 'currentQuantity',\ header: '当前库存',\ enableSorting: true,\ cell: (props) =\u003e \u003cEditableCell {...props} /\u003e, // 使用可编辑单元格组件\ },\ {\ accessorKey: 'allocatedQuantity',\ header: '已分配',\ cell: (props) =\u003e \u003cEditableCell {...props} /\u003e,\ },\ // ... 其他列\ ],\ []\);\\// 在调用useReactTable时，需要传入meta对象以供子组件调用更新函数\const [tableData, setTableData] = useState(data); // 使用本地状态管理表格数据\\const table = useReactTable({\ data: tableData,\ columns,\ getCoreRowModel: getCoreRowModel(),\ getSortedRowModel: getSortedRowModel(),\ meta: { // 定义meta对象，用于跨组件通信\ updateData: (rowIndex, columnId, value) =\u003e {\ setTableData(old =\u003e old.map((row, index) =\u003e {\ if (index === rowIndex) {\ return { ...old[rowIndex], [columnId]: value };\ }\ return row;\ }));\ },\ },\ initialState: {\ sorting: [{ id: 'availableQuantity', desc: true }],\ },\});\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"7432301b-08b8-4891-8537-46ead9170e39\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"代码解析\"},{\"type\":\"text\",\"text\":\"：\"}]},{\"type\":\"bulletList\",\"attrs\":{\"id\":\"4df54527-65db-4785-b315-bb21cfee74df\",\"isHoverDragHandle\":false},\"content\":[{\"type\":\"listItem\",\"attrs\":{\"id\":\"714f8e66-84d8-4d0f-9bc1-b30281dffb34\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"203b3479-77d4-4e61-ba32-5c0a11d432ec\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"EditableCell\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"组件\"},{\"type\":\"text\",\"text\":\"：接收TanStack Table传递的\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"cell\"},{\"type\":\"text\",\"text\":\"属性。它管理编辑状态(\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"isEditing\"},{\"type\":\"text\",\"text\":\")和输入值(\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"value\"},{\"type\":\"text\",\"text\":\")。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"61c7a1e9-de03-4f02-a761-f18838da73b0\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"b769c295-e6c1-4b6b-aa0d-1d238648749f\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"交互流程\"},{\"type\":\"text\",\"text\":\"：默认显示值和一个编辑图标。点击后切换到编辑模式，显示输入框和保存/取消按钮。保存时，通过\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"table.options.meta.updateData\"},{\"type\":\"text\",\"text\":\"回调函数，将修改传回表格组件，更新本地数据状态。取消则恢复原值。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"6ab4e5c2-3b0e-44a8-9042-1d21c221a881\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"24333176-3f59-4aff-845b-ad214b680542\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"meta\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"对象\"},{\"type\":\"text\",\"text\":\"：这是TanStack Table提供的一种跨组件传递数据和函数的机制。我们在\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"table\"},{\"type\":\"text\",\"text\":\"配置中定义了一个\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"updateData\"},{\"type\":\"text\",\"text\":\"函数，用于更新父组件中的\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"tableData\"},{\"type\":\"text\",\"text\":\"状态。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"EditableCell\"},{\"type\":\"text\",\"text\":\"通过\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"table.options.meta\"},{\"type\":\"text\",\"text\":\"访问到这个函数。\"}]}]}]},{\"type\":\"image\",\"attrs\":{\"id\":\"d7aede4c-5bc0-4889-a6f6-5bf026b613f2\",\"src\":\"https://developer.qcloudimg.com/http-save/audit-10133498/6dde4da04eeeca392c65dcd5b4131f36.png\",\"extension\":\"png\",\"align\":\"center\",\"alt\":\"\",\"showAlt\":false,\"href\":\"\",\"boxShadow\":\"\",\"width\":1012,\"aspectRatio\":\"0.530939\",\"status\":\"success\",\"showText\":true,\"isPercentage\":false,\"percentage\":0,\"isHoverDragHandle\":false}},{\"type\":\"heading\",\"attrs\":{\"id\":\"4dd233e5-f4c8-47ab-b21f-71c3e33f5d72\",\"textAlign\":\"inherit\",\"indent\":0,\"level\":1,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"四、集成行选择与批量操作 \"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"81447c14-1e88-4179-a99e-92c24b52a6ee\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"批量操作是供应链管理的高频需求。TanStack Table提供了行选择功能。\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"id\":\"ae9f280e-1bfe-423a-92e3-a59118224e36\",\"language\":\"javascript\",\"theme\":\"atom-one-dark\",\"runtimes\":0,\"isHoverDragHandle\":false,\"key\":\"\",\"languageByAi\":\"javascript\"},\"content\":[{\"type\":\"text\",\"text\":\"// 1. 引入行选择插件\import { getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getPaginationRowModel, getSortedRowModel, getFilteredRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getGroupedRowModel, getExpandedRowModel, getSelectedRowModel, // 新增\} from '@tanstack/react-table';\\// 2. 在columns中添加选择列\const columns = useMemo(\ () =\u003e [\ {\ id: 'select',\ header: ({ table }) =\u003e (\ \u003cinput\ type=\\\"checkbox\\\"\ checked={table.getIsAllRowsSelected()}\ onChange={table.getToggleAllRowsSelectedHandler()}\ /\u003e\ ),\ cell: ({ row }) =\u003e (\ \u003cinput\ type=\\\"checkbox\\\"\ checked={row.getIsSelected()}\ disabled={!row.getCanSelect()}\ onChange={row.getToggleSelectedHandler()}\ /\u003e\ ),\ size: 50,\ },\ // ... 其他列定义\ ],\ []\);\\// 3. 更新useReactTable配置，启用行选择\const [rowSelection, setRowSelection] = useState({}); // 状态管理被选中的行\\const table = useReactTable({\ data: tableData,\ columns,\ state: {\ rowSelection, // 将行选择状态纳入表格状态管理\ },\ onRowSelectionChange: setRowSelection, // 状态更新函数\ enableRowSelection: true, // 启用行选择功能\ getCoreRowModel: getCoreRowModel(),\ getSortedRowModel: getSortedRowModel(),\ getSelectedRowModel: getSelectedRowModel(), // 获取被选中行的模型\ // ... meta等其他配置\});\\// 4. 在组件JSX中，添加批量操作按钮区域\return (\ \u003cdiv className=\\\"table-container\\\"\u003e\ \u003cdiv className=\\\"table-header\\\"\u003e\ \u003ch2\u003e供应链库存明细\u003c/h2\u003e\ \u003cdiv\u003e总计: {total} 条记录\u003c/div\u003e\ \u003c/div\u003e\ {/* 批量操作栏 */}\ {table.getSelectedRowModel().rows.length \u003e 0 \u0026\u0026 (\ \u003cdiv className=\\\"batch-action-bar\\\"\u003e\ 已选中 {table.getSelectedRowModel().rows.length} 项\ \u003cbutton onClick={() =\u003e alert(`批量设置状态为“冻结”`)}\u003e批量冻结\u003c/button\u003e\ \u003cbutton onClick={() =\u003e alert(`批量导出选中数据`)}\u003e导出选中\u003c/button\u003e\ \u003cbutton onClick={() =\u003e table.resetRowSelection()}\u003e清空选择\u003c/button\u003e\ \u003c/div\u003e\ )}\ \u003ctable\u003e\ {/* ... 表格渲染代码 */}\ \u003c/table\u003e\ \u003c/div\u003e\);\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"303eed35-dc76-437b-aa7c-eabfcc0dfe58\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"代码解析\"},{\"type\":\"text\",\"text\":\"：\"}]},{\"type\":\"bulletList\",\"attrs\":{\"id\":\"a376c88f-73db-44cd-9736-83a81cad89a5\",\"isHoverDragHandle\":false},\"content\":[{\"type\":\"listItem\",\"attrs\":{\"id\":\"a0050618-169e-414a-8c6c-8925dfbc356b\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"8250c30f-687c-436a-bc7a-81e708ca15a0\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"行选择状态\"},{\"type\":\"text\",\"text\":\"：\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"rowSelection\"},{\"type\":\"text\",\"text\":\"状态是一个对象，键为行ID，值为\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"true\"},{\"type\":\"text\",\"text\":\"表示被选中。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"onRowSelectionChange\"},{\"type\":\"text\",\"text\":\"用于更新此状态。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"f83d3fe1-145c-453f-9ea3-5c22d7a792a8\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"6a65d320-5f43-4f28-babc-b8f7d40e2883\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"选择列定义\"},{\"type\":\"text\",\"text\":\"：在\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"columns\"},{\"type\":\"text\",\"text\":\"中定义一列，其\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"header\"},{\"type\":\"text\",\"text\":\"渲染一个控制全选/全不选的复选框，\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"cell\"},{\"type\":\"text\",\"text\":\"为每一行渲染一个复选框。\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"table.getToggleAllRowsSelectedHandler()\"},{\"type\":\"text\",\"text\":\"和\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"row.getToggleSelectedHandler()\"},{\"type\":\"text\",\"text\":\"是TanStack Table提供的处理函数。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"b82911a7-e0fc-4155-a9e9-6a762a67560f\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"c2cd8c09-ce7a-4d80-a496-83c9a3c29e22\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"获取选中行\"},{\"type\":\"text\",\"text\":\"：\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"table.getSelectedRowModel().rows\"},{\"type\":\"text\",\"text\":\"可以方便地获取当前选中的所有行数据，用于批量操作。\"}]}]}]},{\"type\":\"heading\",\"attrs\":{\"id\":\"6b988710-daef-4681-996c-18fd561c6277\",\"textAlign\":\"inherit\",\"indent\":0,\"level\":1,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"五、性能优化：虚拟滚动与分页 \"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"41204b78-dc61-4df7-83c7-7de0e659653c\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"对于超大数据集，一次性渲染所有行会导致严重性能问题。虚拟滚动是终极解决方案。\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"id\":\"72814fbd-4201-4944-9a6b-5d9914e1ca39\",\"language\":\"javascript\",\"theme\":\"atom-one-dark\",\"runtimes\":0,\"isHoverDragHandle\":false,\"key\":\"\",\"languageByAi\":\"javascript\"},\"content\":[{\"type\":\"text\",\"text\":\"# 安装虚拟滚动库

pm install @tanstack/react-virtual\"}]},{\"type\":\"codeBlock\",\"attrs\":{\"id\":\"51ca7bd4-2c38-4a35-8547-d6fb783bc9f1\",\"language\":\"javascript\",\"theme\":\"atom-one-dark\",\"runtimes\":0,\"isHoverDragHandle\":false,\"key\":\"\",\"languageByAi\":\"javascript\"},\"content\":[{\"type\":\"text\",\"text\":\"import { useVirtualizer } from '@tanstack/react-virtual';\\// 在表格组件中，替换原有的tbody渲染逻辑\const tableContainerRef = React.useRef(null);\const { rows } = table.getRowModel(); // 获取当前页/排序/筛选后的行\\const rowVirtualizer = useVirtualizer({\ count: rows.length,\ getScrollElement: () =\u003e tableContainerRef.current,\ estimateSize: () =\u003e 50, // 每行大约高度\ overscan: 5, // 过度扫描行数，保证滚动流畅\});\\// 渲染tbody\\u003ctbody\u003e\ {rowVirtualizer.getVirtualItems().map(virtualRow =\u003e {\ const row = rows[virtualRow.index];\ return (\ \u003ctr\ key={row.id}\ style={{\ height: `${virtualRow.size}px`,\ transform: `translateY(${virtualRow.start}px)`,\ }}\ \u003e\ {row.getVisibleCells().map(cell =\u003e (\ \u003ctd key={cell.id}\u003e\ {flexRender(cell.column.columnDef.cell, cell.getContext())}\ \u003c/td\u003e\ ))}\ \u003c/tr\u003e\ );\ })}\\u003c/tbody\u003e\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"9c0bdea7-bc69-46d2-bde5-76533e975e88\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"代码解析\"},{\"type\":\"text\",\"text\":\"：\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"useVirtualizer\"},{\"type\":\"text\",\"text\":\"只渲染视口内的行及其前后少量过度扫描(\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"overscan\"},{\"type\":\"text\",\"text\":\")的行，而不是全部\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"rows\"},{\"type\":\"text\",\"text\":\"。通过\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"transform: translateY\"},{\"type\":\"text\",\"text\":\"将行定位到正确的位置。表格容器需要设置固定高度和\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"overflow: auto\"},{\"type\":\"text\",\"text\":\"。这是处理万级数据仍保持流畅滚动的关键。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"c445fa32-a12a-4878-80e5-bd82ce5ec85c\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false}},{\"type\":\"heading\",\"attrs\":{\"id\":\"daddad37-54d2-4ef4-9339-af0ed0390256\",\"textAlign\":\"inherit\",\"indent\":0,\"level\":1,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"结语 \"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"c7e4a518-3d2d-4afb-a4df-2825818dc027\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"通过本文的详细拆解，我们完成了从零到一，集成 \"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"TanStack Table\"},{\"type\":\"text\",\"text\":\" 构建一个功能完备、性能卓越的供应链明细表格。我们不仅实现了基础的数据展示与排序，更深入打造了\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"可编辑单元格\"},{\"type\":\"text\",\"text\":\"、\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"行选择与批量操作\"},{\"type\":\"text\",\"text\":\"等贴合供应链业务的高频交互功能，并借助\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"虚拟滚动\"},{\"type\":\"text\",\"text\":\"技术确保了面对海量数据时的极致流畅体验。\"}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"52a89897-a077-430e-bfa9-33acdb8a0fa2\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"回顾本文核心收获：\"}]},{\"type\":\"bulletList\",\"attrs\":{\"id\":\"77699bbb-c863-4f81-9bcd-d6dcddf47235\",\"isHoverDragHandle\":false},\"content\":[{\"type\":\"listItem\",\"attrs\":{\"id\":\"bcc4a9a5-0cc1-4a92-828e-ec725ee57716\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"d3310ed9-bee3-4164-8d6a-dce88fe51ebf\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"选型决策力\"},{\"type\":\"text\",\"text\":\"：理解了在复杂企业级应用中选择无头(Headless)表格库（如TanStack Table）的必要性，它提供了无与伦比的灵活性、性能和控制力。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"cee1cc05-ed5f-4f7a-90bf-069dce41ca85\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"f4ab7390-0372-4281-86af-4a830b60679c\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"架构清晰度\"},{\"type\":\"text\",\"text\":\"：掌握了将表格逻辑（状态、排序、选择）与UI渲染分离的架构模式，使组件更易于维护和测试。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"c5dbe7da-4487-4341-990f-c539cd8a5d61\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"012ed766-edd3-4525-997d-c52c52f835bd\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"功能实现深度\"},{\"type\":\"text\",\"text\":\"：学会了如何利用\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"meta\"},{\"type\":\"text\",\"text\":\"对象实现跨组件通信，以优雅的方式完成表格数据的编辑与更新；掌握了通过内置插件快速实现行选择与批量操作逻辑。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"252a91f5-ab82-425d-8396-d04f4c0dbc13\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"9b8a64f3-e4c9-40d9-901e-0be27925da94\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"性能优化意识\"},{\"type\":\"text\",\"text\":\"：认识到虚拟滚动对于大数据量场景是不可或缺的，并学会了使用\"},{\"type\":\"text\",\"marks\":[{\"type\":\"code\"}],\"text\":\"@tanstack/react-virtual\"},{\"type\":\"text\",\"text\":\"与TanStack Table无缝集成，实现性能的飞跃。\"}]}]},{\"type\":\"listItem\",\"attrs\":{\"id\":\"c7886f36-0ccb-4751-8fd3-0d3ffd96efb1\"},\"content\":[{\"type\":\"paragraph\",\"attrs\":{\"id\":\"422e525f-5324-4a2a-81f1-9718ac6d1556\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"实战组合方案\"},{\"type\":\"text\",\"text\":\"：获得了将TanStack Table与React Query（数据获取/缓存）、自定义Hooks（编辑状态）结合使用的完整实战经验。\"}]}]}]},{\"type\":\"paragraph\",\"attrs\":{\"id\":\"e050b0b2-9fd1-48a5-a5e1-69f4aa36ef14\",\"textAlign\":\"inherit\",\"indent\":0,\"color\":null,\"background\":null,\"isHoverDragHandle\":false},\"content\":[{\"type\":\"text\",\"text\":\"至此，你的供应链系统拥有了一颗强大的“数据心脏”。你可以在此基础上，继续探索TanStack Table的\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"列过滤、列拖拽、树形数据展开、服务端分页/排序\"},{\"type\":\"text\",\"text\":\"等高级特性，并结合本系列前述的\"},{\"type\":\"text\",\"marks\":[{\"type\":\"bold\"}],\"text\":\"动态表单、实时同步\"},{\"type\":\"text\",\"text\":\"等能力，构建出真正一体化、响应迅捷的供应链管理平台。\"}]}]}

理论要掌握，实操不能落！以上关于《供应链明细表优化 | TanStack Table 集成实战》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！