框架
版本
企业版

列可见性 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>[]

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

我们的合作伙伴
Code Rabbit
AG Grid
订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

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

订阅 Bytes

您的每周 JavaScript 资讯。每周一免费发送给超过 10 万开发者。

Bytes

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