Forum Discussion
Eduardo Fucaraccio
Nov 08, 2017Copper Contributor
Spfx React Office UI Fabric DetailList with links
Hi there, We are using ListDetails of Office Fabric React Components in a Spfx webpart and it works just fine but we are wondering how use links as column value. Did Anyone achieve that thing? Anyon...
- Nov 08, 2017
You can just use an onRender method to render the link. Here's an example of using onRender to render a checkbox, should be simple to convert it to render a link:
<DetailsListlayoutMode={DetailsListLayoutMode.fixedColumns}selectionMode={SelectionMode.none}items={this.getTechSpecs()}setKey="id"columns={[{ key: "title", name: "Technical Specialist", fieldName: "title", minWidth: 20, maxWidth: 200 },{key: "selected", name: "Assigned?", fieldName: "selected", minWidth: 200, onRender: (item) => <Checkboxchecked={item.selected}onChange={(element, value) => { this.toggleTechSpec(value, item.id); }}/>}]}/>
Russell Gove
Nov 08, 2017Iron Contributor
You can just use an onRender method to render the link. Here's an example of using onRender to render a checkbox, should be simple to convert it to render a link:
<DetailsList
layoutMode={DetailsListLayoutMode.fixedColumns}
selectionMode={SelectionMode.none}
items={this.getTechSpecs()}
setKey="id"
columns={[
{ key: "title", name: "Technical Specialist", fieldName: "title", minWidth: 20, maxWidth: 200 },
{
key: "selected", name: "Assigned?", fieldName: "selected", minWidth: 200, onRender: (item) => <Checkbox
checked={item.selected}
onChange={(element, value) => { this.toggleTechSpec(value, item.id); }}
/>
}
]}
/>
Eduardo Fucaraccio
Nov 08, 2017Copper Contributor
Thanks a lot, thats the way