列可见性 APIs | TanStack Table Docs

列可见性 APIs

状态

列可见性状态使用以下形式存储在表格中：

tsx

export type VisibilityState = Record<string, boolean>

export type VisibilityTableState = {
  columnVisibility: VisibilityState
}

export type VisibilityState = Record<string, boolean>

export type VisibilityTableState = {
  columnVisibility: VisibilityState
}

列定义选项

enableHiding

tsx

enableHiding?: boolean

enableHiding?: boolean

启用/禁用隐藏列

列 API

getCanHide

tsx

getCanHide: () => boolean

getCanHide: () => boolean

返回列是否可以被隐藏

getIsVisible

tsx

getIsVisible: () => boolean

getIsVisible: () => boolean

返回列是否可见

toggleVisibility

tsx

toggleVisibility: (value?: boolean) => void

toggleVisibility: (value?: boolean) => void

切换列的可见性

getToggleVisibilityHandler

tsx

getToggleVisibilityHandler: () => (event: unknown) => void

getToggleVisibilityHandler: () => (event: unknown) => void

返回一个可用于切换列可见性的函数。此函数可用于绑定到复选框的事件处理程序。

表格选项

onColumnVisibilityChange

tsx

onColumnVisibilityChange?: OnChangeFn<VisibilityState>

onColumnVisibilityChange?: OnChangeFn<VisibilityState>

如果提供此函数，当 state.columnVisibility 发生变化时，将使用 updaterFn 调用此函数。这会覆盖默认的内部状态管理，因此您需要在表格外部完全或部分地持久化状态变化。

enableHiding

tsx

enableHiding?: boolean

enableHiding?: boolean

启用/禁用列的隐藏功能。

表格 API

getVisibleFlatColumns

tsx

getVisibleFlatColumns: () => Column<TData>[]

getVisibleFlatColumns: () => Column<TData>[]

返回可见列的扁平数组，包括父列。

getVisibleLeafColumns

tsx

getVisibleLeafColumns: () => Column<TData>[]

getVisibleLeafColumns: () => Column<TData>[]

返回可见的叶节点列的扁平数组。

getLeftVisibleLeafColumns

tsx

getLeftVisibleLeafColumns: () => Column<TData>[]

getLeftVisibleLeafColumns: () => Column<TData>[]

如果启用列固定，返回在表格左侧部分可见的叶节点列的扁平数组。

getRightVisibleLeafColumns

tsx

getRightVisibleLeafColumns: () => Column<TData>[]

getRightVisibleLeafColumns: () => Column<TData>[]

如果启用列固定，返回在表格右侧部分可见的叶节点列的扁平数组。

getCenterVisibleLeafColumns

tsx

getCenterVisibleLeafColumns: () => Column<TData>[]

getCenterVisibleLeafColumns: () => Column<TData>[]

如果启用列固定，返回在表格未固定/中心部分可见的叶节点列的扁平数组。

setColumnVisibility

tsx

setColumnVisibility: (updater: Updater<VisibilityState>) => void

setColumnVisibility: (updater: Updater<VisibilityState>) => void

通过更新函数或值更新列可见性状态

resetColumnVisibility

tsx

resetColumnVisibility: (defaultState?: boolean) => void

resetColumnVisibility: (defaultState?: boolean) => void

将列可见性状态重置为初始状态。如果提供 defaultState，状态将重置为 {}

toggleAllColumnsVisible

tsx

toggleAllColumnsVisible: (value?: boolean) => void

toggleAllColumnsVisible: (value?: boolean) => void

切换所有列的可见性

getIsAllColumnsVisible

tsx

getIsAllColumnsVisible: () => boolean

getIsAllColumnsVisible: () => boolean

返回是否所有列都可见

getIsSomeColumnsVisible

tsx

getIsSomeColumnsVisible: () => boolean

getIsSomeColumnsVisible: () => boolean

返回是否有部分列可见

getToggleAllColumnsVisibilityHandler

tsx

getToggleAllColumnsVisibilityHandler: () => ((event: unknown) => void)

getToggleAllColumnsVisibilityHandler: () => ((event: unknown) => void)

返回用于切换所有列可见性的处理程序，旨在绑定到 input[type=checkbox] 元素。

行 API

getVisibleCells

tsx

getVisibleCells: () => Cell<TData>[]

getVisibleCells: () => Cell<TData>[]

返回考虑了行的列可见性的单元格数组。