SuperAPI AI 工具集

column-visibility

前端与建站

查看项目

更新于 10-16 02:32

技能介绍

用途:在 TanStack Table 中实现列的显示与隐藏。该技能基于 core 和 table-features,可见性状态变化只影响可见性感知模型,不会移除列定义。

主要能力:使用 columnVisibilityFeature 与 tableFeatures 组合特性;通过 initialState.columnVisibility 设置初始隐藏列(如 { internalId: false });提供可见性感知的表头、行、单元格 API。

使用方式:定义并导出特性:import { columnVisibilityFeature, tableFeatures } from '@tanstack/table-core';export const features = tableFeatures({ columnVisibilityFeature });export const initialState = { columnVisibility: { internalId: false } }。渲染时使用 table.getHeaderGroups() 获取表头组,使用 row.getVisibleCells() 获取可见单元格;控件逻辑可用 table.getAllLeafColumns().filter((column) => column.getCanHide()) 获取可隐藏列。控件用全列 API,渲染用可见 API。

限制与常见错误:不要用 row.getAllCells() 渲染,否则会包含隐藏列,应使用 row.getVisibleCells();判断隐藏时不要写 !columnVisibility[column.id],缺失条目代表可见,只有显式 false 才隐藏,即 columnVisibility[column.id] === false;enableHiding 只控制能否隐藏,不控制可见性,可见性应放在 table state 中。更多 API 可查看 node_modules/@tanstack/table-core/dist/features/column-visibility/。