Render list columns dynamically with UI Fabric DetailList component?

[Americo Perez]

Hi,

I was asked to render a list with UI Fabric DetailList component but dynamically, thats mean that if the user adds or removes columns in the source list these columns should be shown or removed from the DetailList rendering.

I have a code that render the list content and columns using pnp ListView component. But this code has harcoded columns: 

private _viewFields: IViewField[] = [
 {
        name: "Title",
        displayName: `${strings.FrameworkAgreementName.toString()}`,
        maxWidth: 100,
        minWidth: 100,
        sorting: true,
        isResizable: true
},
 {
        name: "Customer",
        displayName: `${strings.Customer.toString()}`,
        maxWidth: 100,
        minWidth: 100,
       sorting: true,
       isResizable: true
},
 {
       name: "ContactPerson",
      displayName: `${strings.ContactPerson.toString()}`,
      sorting: true,
      isResizable: true,
      maxWidth: 100,
      minWidth: 100,
 },
 {
      name: "SalesManager",
     displayName: `${strings.SalesManager.toString()}`,
     sorting: true,
     isResizable: true,
     maxWidth: 100,
     minWidth: 100
},
 {
     name: "DeliveryType",
     displayName: `${strings.DeliveryType.toString()}`,
     sorting: true,
     isResizable: true,
     maxWidth: 100,
     minWidth: 100
},
]

That code renders these columns: 

But if the user removes or add a column the code will crash. 

So, first I need to chage to DetailList component but it should read the list's columns and show them dynamically. 

Is there some sample that can be usefull? 

Best regards

Americo

[#2]

@Americo Perez 

You're going to want to grab the list columns.

You have a few options on how to logically get the right columns - depends on your solution. Some of the options are:

- Grab the list content type that has the columns you need
- Grab the list view that has the columns you need
- Grab ALL columns and filter out the system generated ones like modified/created etc

How you choose to get the correct columns is totally up to you depending on your situation). Once you've grabbed and filtered the fields you need, build your IViewField array out of those returned values and their properties.

You can easily grab the fields with PnPJS.