Dynamically change the column name based on inputs

Question

I'm using Office UI fabric Detail List component (https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist). Is it possible to change the Column header name based on inputs to the Detail List?

I found a way to change the Footer(https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/customfooter) but not Header since DetailsHeader doesn't have onRenderItemColumn props in it.

Any help?

https://stackoverflow.com/questions/53620474/can-office-fabric-detailslist-column-headers-be-styled , this post talks about same content and styling by overriding Tooltip. But I need something where the header content itself is based on Inputs — Nagabhushana G M, Aug 24 '19 at 00:44

score 1 · Accepted Answer · answered Aug 25 '19 at 00:06

The DetailsColumn component seems to always render the column's name property value: https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DetailsList/DetailsColumn.base.tsx#L122. Thus, I think you have to dynamically regenerate a new array of IColumn definitions each time your "inputs" change inside the render call of your component.

MyComponent:

state = { replaceSpaces: false, spaceReplacementChar: '_' };
columns = [{ name: 'Column 1', minWidth: 100, ... }];

...

getColumns(state) {
  return this.columns.map((column) => {
    return {
      ...column,
      name: state.replaceSpaces 
        ? column.name.replace(/\s/g, state.spaceReplacementChar)
        : column.name
    };
  });
}

...

render() {
  return (
    <DetailsList
      columns={this.getColumns(this.state)}
      {...this.othertableProps}
    />
  );
}

Dynamically change the column name based on inputs

1 Answers1