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? Anyone at least know if that is possible?
Thanks!
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 GoveIron 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:
<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); }}/>}]}/>- Eduardo FucaraccioCopper ContributorThanks a lot, thats the way