1

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).

Konrad Goldammer
  • 58
  • 5
  • You need to provide `isResizable: true` if you want to resize column. Here you are the implementation: https://github.com/microsoft/fluentui/blob/master/packages/react/src/components/DetailsList/DetailsHeader.base.tsx#L617 . Some of FluentUI Components are implemented as Class Components, but it's totally fine to wrap them with your custom FP component for abstraction... – Marko Savic Aug 11 '22 at 08:20
  • @MarkoSavic I already provided isResizable: true in both columns and I still can't resize them. – Konrad Goldammer Aug 11 '22 at 09:58
  • Remove maxWidth its unnecessary. If that doesn't work create codepen example to see whats going on. – Marko Savic Aug 11 '22 at 11:10
  • Details list column headers currently aren't resizable when React.StrictMode is applied (which is the default in `create-react-app`). See [this issue](https://github.com/microsoft/fluentui/issues/27166), and note that this should only be an issue in the dev environment. – Jthorpe Mar 10 '23 at 22:50

2 Answers2

0
  • 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.

Shubhro Banerjee
  • 21
  • 2
0

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!

Diego
  • 3
  • 2