列可见性指南

示例

想直接看实现？可以参考以下示例

其他示例

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 将被忽略。请勿同时将 columnVisibility 提供给 initialState 和 state，只需选择其中一个。

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 的“可见”变体，例如 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>

如果您使用的是 Header Group API，它们将已经考虑了列可见性。

列可见性指南

示例

其他示例

API