SPFx - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx.

• Using DateTime control PropertyFieldCollectionData Property Pane Control
• Using FilePicker and FileTypeIcon control
• Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the JSON data
• Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV data --> You are here

In this post, I am gonna show you how we can use DetailsList from UI Fabric and PropertyFieldCodeEditor property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the 'CSV' data in the DetailsList.

Regarding the creation of the basic project stuff, please refer to the blog post.

I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work.

• Used SharePoint Yeoman generator version 1.10.0
• Used @pnp/spfx-property-controls for the property controls

Below is the final outcome of the web part.

Let us walk through the code to achieve the above result.

• Once the project is created with all the dependencies, add the following imports to the webpart.ts file to use the controls.

• The output of the PropertyFieldCodeEditor will be stored as a string, so let's create a new property to hold the value of the PropertyFieldCodeEditor.

• The above screenshot shows that we had removed the default property 'description' and have added the property named 'CSVData'. Do not forget to return the property in the render method of the web part.

The above property declaration and other codes are on the webpart.ts file. Now we will see how we can render the properties passed from webpart to the component.tsx file.

• Import the references related to the DetailsList from Office UI Fabric.

• Declare the properties and state interface for the component.
• For the properties, just declare 'CSVData' so that the web part will return the data from the web part property.
• For the state interface, we have to declare the following to display the details list.
• items: any - Items to be displayed in the DetailsList
• columns: IColumn[] - Columns to bind to DetailsList based on the CSV data provided.

• Since we have created the state interface, the state has to be initialized in the constructor of the component.

• We have to display the data when the web part loads on the page and also when the CSV data is changed from the web part properties. So in order to do that, we have to use the below two inbuilt methods
• componentDidMount - It will be fired when the component loads
• componentDidUpdate - It will be fired when the web part properties are modified.

• Since on both the methods we have to build the columns for the details list based on the CSV data and then we have to pass the items to the details list.

• We have converted the CSV data to JSON data and then we build the dynamic columns. To convert the CSV to JSON, I had used a npm package named 'csvtojson'
• _buildDataList method will do the following functionality
• convert the csv data received to son from the web part property this.props.CSVData
• parsing the JSON data
• Get all the keys from json object first data, based on the keys defined in the first item of the JSON data, the columns of the detaillist will be designed.
• Once the above is done, assign the values to the state variable. Based on the change in the state variable, the detailslist is automatically updated.
• _buildColumns method will built the columns for the DetailsList based on the keys derived from the json data. The main properties of IColumn is defined for each column of the detailslist.
• Update the code in the render method to display the detailslist.

• There are many properties available for the DetailsList. Here we have used a set of properties and you can always try out the other properties based on the documentation provided in the UI Fabric site.
• The two state values items and columns are declared as cont in the render method and are directly assigned to the DetailsList properties. This will make the web part component to update whenever the state is changed.

That's it friends, please follow the steps mentioned above to use date control in the collection property pane control. Click here to refer to the actual source code.

Happy coding. Cheers 😀