Why can't I resize the columns of Fluent UI's DetailsList component?

Question

I created a react app with 'npx create-react-app'. I installed the npm package by running 'npm i @fluentui/react'. I implemented the DetailsList component of Fluent UI in my App.js:

import "./App.css";
import { DetailsList } from "@fluentui/react";

function App() {
  const columns = [
    {
      key: "column1",
      name: "Name",
      fieldName: "name",
      minWidth: 100,
      maxWidth: 200,
      isResizable: true,
    },
    {
      key: "column2",
      name: "Value",
      fieldName: "value",
      minWidth: 100,
      maxWidth: 200,
      isResizable: true,
    },
  ];
  const items = [
    { key: 1, name: "good", value: 1 },
    { key: 2, name: "bad", value: 2 },
  ];
  return (
    <div className="App">
      <DetailsList items={items} columns={columns} setKey="set" />
    </div>
  );
}

export default App;

I can see the list properly but I can't resize the columns. Even though I set 'isResizable: true' for every column. Why? How can I make them resizable. Btw: unlike the Fluent UI documentation, I want to use functional components (I hope this isn't the problem).

Answer 1

• I updated office-ui-fabric-react "7.202.0" from "7.156.0".
• Imported IColumn from "@pnp/spfx-controls-react/node_modules/office-ui-fabric-react" instead of just "office-ui-fabric-react"

this worked for me.

Answer 2

I was having the same issue and found the answer in this github issue

In a nutshell, in the DetailsList Component you are missing the following attribute layoutMode={DetailsListLayoutMode.fixedColumns}. This attribute lets the user resize the columns marked as resizible.

Here is the code example from the gitHub issue:

<DetailsList
          items={['','','','','','','','','','','','','','','','']}
          columns={columns}
          selectionMode={SelectionMode.none}
          layoutMode={DetailsListLayoutMode.fixedColumns}
          constrainMode={ConstrainMode.unconstrained}
          isHeaderVisible={true}
        />

Hope this helps!