Hide a Column in fluent-UI Detailslist

Question

How do one hide/prevent a column from rendering in fluent-UI DetailsList component.

Answer 1

Define columns you would like to show, like in const mycolumns.

Notice how in example items have three properties - id, name, surname. However, DetailsList shows only id and name. It is because these columns were defined in 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
  }
];