IColumn in DetailsList: how to set column width at mount

Question

How can you set the columns of a DetailsList to a specific width at mount?k

I wanted to save the column widths every time they are saved and restore them when the component remounts, i.e., revisits the view where the list is.

score 3 · Answer 1 · edited Oct 14 '21 at 17:05

3

return [...staticColumns, ...visibleColumns.map(c => {
    return  {
        key: c.Name,
        name: c.Title,
        fieldName: c.Name, 
        minWidth: 100,
        isResizable: true,
        isCollapsible: true,
        onRender: (item: any, index: number, column: IColumn) => {
          column.minWidth = 20;
          return <span>{item[c.Name]}</span>;
        },
    } as IColumn;
})];

First set initial minWidth: 100, then change to 20 in the onRender callback. It's work for me

edited Oct 14 '21 at 17:05

Rojo

2,749
1
13
34

answered Oct 14 '21 at 15:47

Михаил

31
3

1

Thank you very much for this solution! But there's even a better one if you use `onRenderHeader` callback which is only invoked once per column and not per each table cell as `onRender`. – livthomas Dec 03 '21 at 10:53

score 0 · Answer 2 · answered Aug 23 '20 at 21:26

0

Found this. Guess you can't easily.

https://github.com/microsoft/fluentui/issues/9287

answered Aug 23 '20 at 21:26

user1763729

167
1
11

IColumn in DetailsList: how to set column width at mount

2 Answers2