office-ui-fabric - 在fluent-UI详细信息列表中隐藏一列

Question

如何在 fluent-UI DetailsList 组件中隐藏/防止列呈现。

Answer 1

定义您想要显示的列，例如在const mycolumns中。

请注意示例项目如何具有三个属性 - id、name、surname。但是，DetailsList仅显示 id 和 name。这是因为这些列是在const mycolumns中定义的。

ListWithHiddenColumns.tsx

import React from 'react';
import { DetailsList } from '@fluentui/react/lib/DetailsList';

export interface IListWithHiddenColumnsProps {}

export const ListWithHiddenColumns: React.FC<IListWithHiddenColumnsProps> = () => {
  return (
    <>
      <DetailsList items={myitems} columns={mycolumns} />
    </>
  );
};

export const myitems = [
  { id: 1, name: 'Jane', surname: 'Oak' },
  { id: 1, name: 'John', surname: 'Smith' }
];
export const mycolumns = [
  {
    key: 'id',
    name: 'Id',
    fieldName: 'id',
    minWidth: 50,
    maxWidth: 50,
    isResizable: false
  },
  {
    key: 'name',
    name: 'Name',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true
  }
];