Forum Discussion

Eduardo Fucaraccio's avatar
Eduardo Fucaraccio
Copper Contributor
Nov 08, 2017

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:

        <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); }}
                      />
                    }
                  ]}
                />
  • Russell Gove's avatar
    Russell Gove
    Iron 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); }}
                      />
                    }
                  ]}
                />

Resources