在 fluent-UI 详细信息列表中隐藏列

问题描述

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

解决方法

定义要显示的列，例如 const mycolumns。

注意示例中的项目如何具有三个属性 - id、name、surname。但是，DetailsList 仅显示 ID 和名称。这是因为这些列是在 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
  }
];