TanStack Table 是无头表格库:提供状态管理与逻辑,不提供 UI,渲染由使用方自行实现,内部处理排序、筛选、分页、选择等。
用途:适合带排序/筛选/分页的复杂数据表、服务端数据、大数据集(1000+ 行配虚拟化)、行选择/展开/分组。不适合简单静态表格(直接用 table 标签)、仅展示列表或类电子表格编辑(可考虑 AG Grid)。
主要能力与用法:基础表用 useReactTable({ data, columns, getCoreRowModel }),并对 data/columns 做 memo 化;列定义用 createColumnHelper<T>() 保持类型安全;列分组用 columnHelper.group,注意勿固定分组列。排序用 getSortedRowModel 配 onSortingChange,服务端需 manualSorting: true;筛选用 getFilteredRowModel 配 onColumnFiltersChange,服务端需 manualFiltering: true;分页用 getPaginationRowModel 配 onPaginationChange,服务端需 manualPagination: true 加 pageCount。行选择用 enableRowSelection 与 onRowSelectionChange,并设置 getRowId 以获得稳定选择键;列可见性用 column.toggleVisibility();列固定用 enableColumnPinning,但不要固定分组列(已知问题);行展开用 getExpandedRowModel 与 getSubRows;调整列宽用 enableColumnResizing 与 columnResizeMode;分组在 10k+ 行时性能下降。服务端模式需设置 manual* 标志,并把表格状态放入 queryKey;无限滚动用 useInfiniteQuery 并展平分页,可配合 @tanstack/react-virtual 虚拟化。行模型按需引入 getCoreRowModel(必需)、getSortedRowModel、getFilteredRowModel、getPaginationRowModel、getExpandedRowModel、getGroupedRowModel、getFacetedRowModel、getFacetedUniqueValues、getFacetedMinMaxValues。
常见注意点:从 @tanstack/react-table 导入而非 table-core;使用 v8 的 useReactTable/header/accessorKey 而非 v7 写法;服务端要补齐 manual* 标志并把分页、排序、筛选放进 queryKey;筛选变化时把 pageIndex 重置为 0;行选择设置 getRowId;React Compiler 下需加 'use no memo' 指令。资料中未提供安装命令、版本细节与收费信息。