列可见性指南

列可见性指南

示例

想要跳过直接看实现？查看这些示例

其他示例

API

列可见性 API

列可见性功能允许动态地隐藏或显示表格列。在之前版本的 react-table 中，此功能是列的一个静态属性，但在 v8 版本中，有一个专门的 columnVisibility 状态和用于动态管理列可见性的 API。

列可见性状态

columnVisibility 状态是一个列 ID 到布尔值的映射。如果列的 ID 存在于此映射中且值为 false，则该列将被隐藏。如果列 ID 不在此映射中，或者值为 true，则该列将显示。

jsx

const [columnVisibility, setColumnVisibility] = useState({
  columnId1: true,
  columnId2: false, //hide this column by default
  columnId3: true,
});

const table = useReactTable({
  //...
  state: {
    columnVisibility,
    //...
  },
  onColumnVisibilityChange: setColumnVisibility,
});

const [columnVisibility, setColumnVisibility] = useState({
  columnId1: true,
  columnId2: false, //hide this column by default
  columnId3: true,
});

const table = useReactTable({
  //...
  state: {
    columnVisibility,
    //...
  },
  onColumnVisibilityChange: setColumnVisibility,
});

或者，如果您不需要在表格外部管理列可见性状态，您仍然可以使用 initialState 选项来设置初始默认列可见性状态。

注意：如果 columnVisibility 同时提供给 initialState 和 state，则 state 初始化将优先，而 initialState 将被忽略。请勿同时为 initialState 和 state 提供 columnVisibility，仅提供其中之一。

jsx

const table = useReactTable({
  //...
  initialState: {
    columnVisibility: {
      columnId1: true,
      columnId2: false, //hide this column by default
      columnId3: true,
    },
    //...
  },
});

const table = useReactTable({
  //...
  initialState: {
    columnVisibility: {
      columnId1: true,
      columnId2: false, //hide this column by default
      columnId3: true,
    },
    //...
  },
});

禁用隐藏列

默认情况下，所有列都可以隐藏或显示。如果您想阻止某些列被隐藏，您可以为这些列将 enableHiding 列选项设置为 false。

jsx

const columns = [
  {
    header: 'ID',
    accessorKey: 'id',
    enableHiding: false, // disable hiding for this column
  },
  {
    header: 'Name',
    accessor: 'name', // can be hidden
  },
];

const columns = [
  {
    header: 'ID',
    accessorKey: 'id',
    enableHiding: false, // disable hiding for this column
  },
  {
    header: 'Name',
    accessor: 'name', // can be hidden
  },
];

列可见性切换 API

有几个列 API 方法对于在 UI 中渲染列可见性切换非常有用。

column.getCanHide - 用于禁用已将 enableHiding 设置为 false 的列的可见性切换。
column.getIsVisible - 用于设置可见性切换的初始状态。
column.toggleVisibility - 用于切换列的可见性。
column.getToggleVisibilityHandler - 用于将 column.toggleVisibility 方法连接到 UI 事件处理程序的快捷方式。

jsx

{table.getAllColumns().map((column) => (
  <label key={column.id}>
    <input
      checked={column.getIsVisible()}
      disabled={!column.getCanHide()}
      onChange={column.getToggleVisibilityHandler()}
      type="checkbox"
    />
    {column.columnDef.header}
  </label>
))}

{table.getAllColumns().map((column) => (
  <label key={column.id}>
    <input
      checked={column.getIsVisible()}
      disabled={!column.getCanHide()}
      onChange={column.getToggleVisibilityHandler()}
      type="checkbox"
    />
    {column.columnDef.header}
  </label>
))}

列可见性感知表格 API

当您渲染表头、表体和表尾单元格时，有很多 API 选项可用。您可能会看到像 table.getAllLeafColumns 和 row.getAllCells 这样的 API，但是如果您使用这些 API，它们将不会考虑列的可见性。相反，您需要使用这些 API 的 “visible” 变体，例如 table.getVisibleLeafColumns 和 row.getVisibleCells。

jsx

<table>
  <thead>
    <tr>
      {table.getVisibleLeafColumns().map((column) => ( // takes column visibility into account
        //
      ))}
    </tr>
  </thead>
  <tbody>
    {table.getRowModel().rows.map((row) => (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell) => ( // takes column visibility into account
          //
        ))}
      </tr>
    ))}
  </tbody>
</table>

<table>
  <thead>
    <tr>
      {table.getVisibleLeafColumns().map((column) => ( // takes column visibility into account
        //
      ))}
    </tr>
  </thead>
  <tbody>
    {table.getRowModel().rows.map((row) => (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell) => ( // takes column visibility into account
          //
        ))}
      </tr>
    ))}
  </tbody>
</table>

如果您正在使用表头组 API，它们已经将列可见性考虑在内。

列可见性指南

示例

其他示例

API