SOLVED

Spfx React Office UI Fabric DetailList with links

%3CLINGO-SUB%20id%3D%22lingo-sub-125493%22%20slang%3D%22en-US%22%3ESpfx%20React%20Office%20UI%20Fabric%20DetailList%20with%20links%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-125493%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20there%2C%20We%20are%20using%20ListDetails%20of%20Office%20Fabric%20React%20Components%20in%20a%20Spfx%20webpart%20and%20it%20works%20just%20fine%20but%20we%20are%20wondering%26nbsp%3B%20how%20use%20links%20as%20column%20value.%20Did%20Anyone%26nbsp%3B%3CSPAN%3Eachieve%20that%20thing%3F%20Anyone%20at%20least%20know%20if%20that%20is%20possible%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EThanks!%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-125568%22%20slang%3D%22en-US%22%3ERe%3A%20Spfx%20React%20Office%20UI%20Fabric%20DetailList%20with%20links%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-125568%22%20slang%3D%22en-US%22%3EThanks%20a%20lot%2C%20thats%20the%20way%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-125559%22%20slang%3D%22en-US%22%3ERe%3A%20Spfx%20React%20Office%20UI%20Fabric%20DetailList%20with%20links%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-125559%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20can%20just%20use%20an%20onRender%20method%20to%20render%20the%20link.%20Here's%20an%20example%20of%20using%20onRender%20to%20render%20a%20checkbox%2C%20should%20be%20simple%20to%20convert%20it%20to%20render%20a%20link%3A%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDetailsList%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3ElayoutMode%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3EDetailsListLayoutMode%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EfixedColumns%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3EselectionMode%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3ESelectionMode%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Enone%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3Eitems%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7Bthis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EgetTechSpecs%3C%2FSPAN%3E%3CSPAN%3E()%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3EsetKey%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22id%22%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3Ecolumns%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E%5B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CSPAN%3E%7B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E%22title%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Ename%3A%3C%2FSPAN%3E%20%3CSPAN%3E%22Technical%20Specialist%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EfieldName%3A%3C%2FSPAN%3E%20%3CSPAN%3E%22title%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EminWidth%3A%3C%2FSPAN%3E%20%3CSPAN%3E20%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EmaxWidth%3A%3C%2FSPAN%3E%20%3CSPAN%3E200%3C%2FSPAN%3E%3CSPAN%3E%20%7D%2C%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CFONT%20face%3D%22Consolas%22%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%7B%3C%2FFONT%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3Ekey%3A%3C%2FSPAN%3E%20%3CSPAN%3E%22selected%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Ename%3A%3C%2FSPAN%3E%20%3CSPAN%3E%22Assigned%3F%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EfieldName%3A%3C%2FSPAN%3E%20%3CSPAN%3E%22selected%22%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EminWidth%3A%3C%2FSPAN%3E%20%3CSPAN%3E200%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3EonRender%3A%3C%2FSPAN%3E%3CSPAN%3E%20(%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%20%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3ECheckbox%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3Echecked%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eselected%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3EonChange%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%7B%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Eelement%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Evalue%3C%2FSPAN%3E%3CSPAN%3E)%20%3C%2FSPAN%3E%3CSPAN%3E%3D%26gt%3B%3C%2FSPAN%3E%3CSPAN%3E%20%7B%20%3C%2FSPAN%3E%3CSPAN%3Ethis%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EtoggleTechSpec%3C%2FSPAN%3E%3CSPAN%3E(%3C%2FSPAN%3E%3CSPAN%3Evalue%3C%2FSPAN%3E%3CSPAN%3E%2C%20%3C%2FSPAN%3E%3CSPAN%3Eitem%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3Eid%3C%2FSPAN%3E%3CSPAN%3E)%3B%20%7D%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CFONT%20face%3D%22Consolas%22%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%7D%3C%2FFONT%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3CSPAN%3E%5D%3C%2FSPAN%3E%3CSPAN%3E%7D%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

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!

2 Replies
Highlighted
Solution

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); }}
                  />
                }
              ]}
            />
Highlighted
Thanks a lot, thats the way