Best way to add a sharepoint list to custom webpart?

%3CLINGO-SUB%20id%3D%22lingo-sub-657038%22%20slang%3D%22en-US%22%3EBest%20way%20to%20add%20a%20sharepoint%20list%20to%20custom%20webpart%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-657038%22%20slang%3D%22en-US%22%3E%3CP%3EI'm%20trying%20to%20add%20a%20SharePoint%20list%20into%20a%20webpart%20so%20I%20can%20use%20React%20to%20drag%20and%20drop%20the%20rows%20around.%20what's%20the%20best%20way%3F%20I've%20not%20used%20TypeScript%20before%20so%20it's%20confusing%20me.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-686582%22%20slang%3D%22en-US%22%3ERe%3A%20Best%20way%20to%20add%20a%20sharepoint%20list%20to%20custom%20webpart%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-686582%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F292517%22%20target%3D%22_blank%22%3E%40timparsons%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20may%20want%20to%20use%20the%20UI%20Fabric%20React%20component%3A%20Details%20List%2C%20which%20you%20can%20configure%20to%20have%20the%20items%20be%20%22draggable%22%20out%20of%20the%20box.%20You'll%20need%20to%20write%20some%20code%20to%20get%20your%20list%20columns%20and%20items%20and%20load%20them%20into%20the%20Details%20List%20component.%20You%20don't%20necessarily%20need%20to%20use%20TypeScript%2C%20you%20can%20just%20use%20JavaScript%20if%20you%20want.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fdetailslist%2Fdraganddrop%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fdetailslist%2Fdraganddrop%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I'm trying to add a SharePoint list into a webpart so I can use React to drag and drop the rows around. what's the best way? I've not used TypeScript before so it's confusing me.

1 Reply
Highlighted

@timparsons 

 

You may want to use the UI Fabric React component: Details List, which you can configure to have the items be "draggable" out of the box. You'll need to write some code to get your list columns and items and load them into the Details List component. You don't necessarily need to use TypeScript, you can just use JavaScript if you want.

https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/draganddrop