Fabric UI Detailslist Additional Columns[React SPFx] - spfx

Question

I'm building a SPFx Webpart with the Fabric/Fluent UI DetailsList component and I'm trying to add dynamic columns based on security groups selected from a picker (this is likely to change but will remain an array). I've found some code that does just this and have adopted it to my project but the gulp serve fails to mount the webpart in the workbench.
private _columns: IColumn[] = [
{
key: 'filepath',
name: 'File path',
onRender: item => (
// tslint:disable-next-line:jsx-no-lxambda
<Link key={item} onClick={() => this._navigate(item)}>
{item}
</Link>
),
} as IColumn,
];
private _addcolumns(_columns:IColumn[]): IColumn[] {
for (let user of this.props.people) {
_columns.push({
key: 'permissionset',
name: 'Permission',
onRender: item => (<DropPermissionItem/>)
} as IColumn,
)
}
return _columns
};
...
<DetailsList
key={this.state.key}
items={this.state.items}
columns={this._addcolumns(this._columns)}
onItemInvoked={this._navigate}
initialFocusedIndex={this.state.initialFocusedIndex}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
/>
The DetailsList uses the _addColumns and passes in the _columns to append the additional columns. Is there something I'm missing or is there a better way?

Answer 1

I've been able to dynamically set the number of columns.
private _columns: IColumn[] = [
{
key: 'file',
name: "File",
minWidth: 60,
onRender: item => (
// tslint:disable-next-line:jsx-no-lxambda
<Link key={item} onClick={() => this._navigate(item)}>
{item}
</Link>
)
},
{
key: 'permission',
name: "permission",
minWidth: 60,
onRender: item => (<DropPermissionItem/>),
}
];
private _addcolumns(column: IColumn[]): IColumn[] {
let _loadColumn = this._loadUser();
if (_loadColumn == null){
return column;
} else
{
for (let col of _loadColumn) {
column.push({
key: 'permission',
name: 'Permission',
minWidth: 60,
onRender: item => (<DropPermissionItem/>),
}
);
}
return column;
}
}
private displayColumns: IColumn[] = this._addcolumns(this._columns);
Use the this.displayColumns inside the column property of the detail list.