框架
版本
企业版

列可见性 API

状态

列可见性状态存储在表格上,使用以下形状

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>[]

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

订阅 Bytes

您每周的 JavaScript 新闻。每周一免费发送给超过 10 万名开发者。

Bytes

无垃圾邮件。随时取消订阅。