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.