It looks to me like the this._columns array is what's defining which columns are showing in the details list, because that's what's getting passed to the DetailsList component as its columns prop.

In order to make that configurable, you should look into implementing a property pane:

Make your SharePoint client-side web part configurable

You could have a text box there where you entered in the comma separated list of column names, or if you have a known quantity of specific columns to choose from, you could do some other type of controls, like a list of checkboxes or something.

Then you might want to move that _columns array from being an instance property to maybe being part of state, so that when someone updates the property pane with new selections, you can update that part of state and cause the DetailsList to re-render with the new columns array.

In order to add that to state you would have to add that structure to the IListItems interface (which will now be poorly named, since it really is an iterface for your web part's state which would now include an array of columns to show, not just an array of SharePoint list items).

It looks to me like the this._columns array is what's defining which columns are showing in the details list, because that's what's getting passed to the DetailsList component as its columns prop.

In order to make that configurable, you should look into implementing a property pane:

Make your SharePoint client-side web part configurable

You could have a text box there where you entered in the comma separated list of column names, or if you have a known quantity of specific columns to choose from, you could do some other type of controls, like a list of checkboxes or something.

Then you might want to move that _columns array from being an instance property to maybe being part of state, so that when someone updates the property pane with new selections, you can update that part of state and cause the DetailsList to re-render with the new columns array.

In order to add that to state you would have to add that structure to the IListItems interface (which will now be poorly named, since it really is an iterface for your web part's state which would now include an array of columns to show, not just an array of SharePoint list items).

Based on how you have this_columns set up in the constructor there, and looking at those objects you're setting up and their properties, it looks to me like to set that up in in your interface for your state, you would have to redefine IListItems as:

export interface IListItems {
    items: [
        {
            "HL": {
                Description: string;
                Url: string;
            }
            "Title": string,
            "Id": string,
            "Created": string;
        }
    ],
    columns: [
        {
            "key": string;
            "name": string;
            "fieldName": string;
            "minWidth": number;
            "maxWidth": number;
            "isResizable": boolean;
            "data": string;
        },
    ]
}

BUT don't take that as tested, vetted code... I've done very little actual TypeScript development, so that's just a guess...

You probably don't want to modify the IListItems interface, because it looks like that is defining the data structure of the list items you retrieve from SharePoint.

It looks more to me like the this._columns array is what's defining which columns are showing in the details list, because that's what's getting passed to the DetailsList component as its columns prop.

In order to make that configurable, you should look into implementing a property pane:

Make your SharePoint client-side web part configurable

You could have a text box there where you entered in the comma separated list of column names, or if you have a known quantity of specific columns to choose from, you could do some other type of controls, like a list of checkboxes or something.

Then you might want to move that _columns array from being an instance property to maybe being part of state, so that when someone updates the property pane with new selections, you can update that part of state and cause the DetailsList to re-render with the new columns array.

It looks to me like the this._columns array is what's defining which columns are showing in the details list, because that's what's getting passed to the DetailsList component as its columns prop.

In order to make that configurable, you should look into implementing a property pane:

Make your SharePoint client-side web part configurable

You could have a text box there where you entered in the comma separated list of column names, or if you have a known quantity of specific columns to choose from, you could do some other type of controls, like a list of checkboxes or something.

Then you might want to move that _columns array from being an instance property to maybe being part of state, so that when someone updates the property pane with new selections, you can update that part of state and cause the DetailsList to re-render with the new columns array.

In order to add that to state you would have to add that structure to the IListItems interface (which will now be poorly named, since it really is an iterface for your web part's state which would now include an array of columns to show, not just an array of SharePoint list items).