Office UI Fabric React-DetailsList列的宽度

Question

如何在DetailsList组件中配置列，以使其对齐以适合内容？

Answer 1

不幸的是，我不相信DetailsList的专栏目前支持适合其内容。每个列定义都使用minWidth，maxWidth和isResizable将列约束到某个维度，同时为用户提供了调整大小的能力。 IColumn interface上没有内容或类似属性的包装。 Here's an example。

Answer 2

u可以使用maxWidth属性设置列宽。

function buildColumns(
  item,
  canResizeColumns,
  onColumnClick,
  sortedColumnKey,
  isSortedDescending,
  groupedColumnKey,
  isMultiline
) {
  const columns = [];

  if (item) {
    for (const propName in item) {
      if (item.hasOwnProperty(propName)) {
        columns.push({
          key: propName,
          name: item[propName].name,
          fieldName: propName,
          minWidth: MIN_COLUMN_WIDTH,
          maxWidth: item[propName].width,
        });
      }
    }
  }

  return columns;
}