Fluentui: Readability of the examples on DetailsList Variable Row Heights in the Fabric UI docs

[AtomicLiquid]

Describe the feature that you would like added

At this current state, the detailslist example includes an advanced list with 5000 elements. This makes it very difficult to understand how you can set the variable heights for your list. I wish for this example to be clearer, and hopefully more easy to understand, which will help everyone with using your UI framework.

https://developer.microsoft.com/en-us/fabric/#/controls/web/detailslist/variablerowheights

[xugao]

@AtomicLiquid - thanks for your feedback. Could you pls tell me what exactly you found that's making the example difficult. Is it the 5000/large list of items? And why? That can help me think of ways to improve

[AtomicLiquid]

To rephrase a bit, the advanced list of 5000 items is a nice addition to understand how the DetailsList can be used for more complex lists such as in your example. However, for a use-case such as mine, where I am just interested in knowing how you could adjust the row height, it's quite a lot of code to read through, for something that is most likely not a very difficult solution to accomplish.

Therefore, my suggestion is to also include an easier, and more comprehensible example, on how you could achieve a custom row height.

[codetunez]

@AtomicLiquid here is a small (TS) reduction that should help others

Include buildColumns and IColumn in your import

import { DetailsList, buildColumns, IColumn} from 'office-ui-fabric-react/lib/DetailsList';

function to apply variable height rows based on items in the grid. Replace myfield with the column name in your (data) items

const _buildColumns = (items: Array<any>) => {
  const columns: IColumn[] = buildColumns(items)
  columns.forEach((column: IColumn) => {
    if (column.key === ''myfield") {
      column.isMultiline = true;
    }
  });
  return columns;
}

Set columns in Details List

<DetailsList
   items={data.items}
   columns={_buildColumns(data.items)} />

Add this into your current implementation of DetailsList