Adding a EDIT button on the same row of the DetailsLists component in Office-ui-Fabric - ReactJS

Question

I am very new to office ui fabric-react and react in general so don't hesitate to give me pointers if I am doing it totally wrong.

Although my requirement is fairly simple, I just can't get it figured out.

I have a page with a list view (DetailsList Component of office-ui-fabric-reactjs), this DetailsList get it's items from an API endpoint which is working fine:

 componentDidMount() {
        _items = []

        // Get list of Mediums, then push it to the _items array
        axiosTRS.get('/media').then(response => {
            response.data.map(item => {
                _items.push({ id: item.mediumID, name: item.name, imo: item.imo })
            })
            this.setState({ items: _items })
        })
    }

The DetailsList is being filled perfectly. However, now I want to add a 'EDIT' button to each row, so this is no separate column.

I figured I would do this on the onRenderRow property where the DetailLists get's rendered:

render() {
        return (
            <div>
                <Panel panelHeaderName={'Medium Overview'}>
                    <div>
                        <MarqueeSelection selection={this.selection} >
                            <DetailsList
                                onRenderRow={this.onRenderRows}
                                onRenderDetailsHeader={this.onRenderColumn}
                                selection={this.selection}
                                selectionMode={this.state.selectionMode}
                                onColumnHeaderClick={this.sorting}
                                onColumnResize={this.columnResizer}
                                layoutMode={DetailsListLayoutMode.justified}
                                className='customPanel'
                                columns={this.state.columns}
                                items={this.state.items}
                               // onRenderItemColumn={ this._onRenderColumn }
                            />
                        </MarqueeSelection>
                        <br />
                        <div align="right">
                        </div>
                    </div>
                </Panel>
            </div>
        )
    }

In the onRenderRows function I first get all the DetailsRow props, and then add the Edit button:

onRenderRows(props) {
        return (
            <div>
                <DetailsRow
                    {...props}

                />
                <PrimaryButton 
                    onClick={() => {
                        alert(props.item.name)
                    }}
                    text='click me' 
                />
            </div>
        )
    }

The problem is that the button keeps displaying below the row with data. Should I fix this by adding css or what is my best option to get the button on the same row?

Is there an easier way to accomplish this? I also tried / researched the option of adding an extra column for the buttons, but I don't think this is the way to go, and I didn't got that working either.

As a side-note, I am using fabric components with ES6 instead of TSX (as you probably noticed).

Answer 1

Add this function
private _onRenderItemColumn(item: any, index: number, column: IColumn): JSX.Element {
        if (column.fieldName === 'fieldName') {
            return <Link data-selection-invoke={true}>{"Edit"}</Link>;
        }
        return item[column.fieldName];
    }