detailList.tsx

const detailList = (folder: GraphFolder, loadFolder: (id: string) => void,  onSelectFile: (f: GraphItem) => void) => (
    <DetailsList
        items={folder.children}
        columns={[
            {
                key: 'column1',
                name: 'File Type',
                className: classNames.fileIconCell,
                iconClassName: classNames.fileIconHeaderIcon,
                iconName: 'Page',
                isIconOnly: true,
                minWidth: 16,
                maxWidth: 16,
                onRender: (item: GraphItem) => renderFileIcon(item.name)
            },
            { 
                key: 'column2',
                name: 'Name',
                minWidth: 150,
                maxWidth: 200,
                onRender: (item: GraphItem) => <span>{item.name}</span>
            },
            {
                key: 'column3',
                name: 'Last Modified',
                minWidth: 70,
                maxWidth: 200,
                onRender: (item: GraphItem) => <span>{item.lastModifiedDateTime}</span>
            },
            {
                key: 'column4',
                name: 'Modified By',
                minWidth: 70,
                maxWidth: 200,
                onRender: (item: GraphItem) => <span>{item.lastModifiedBy}</span>
            },
            {
                key: 'column5',
                name: 'Created By',
                minWidth: 70,
                maxWidth: 200,
                onRender: (item: GraphItem) => <span>{item.createdBy}</span>
            },
            {
                key: 'column6',
                name: 'Size',
                minWidth: 70,
                maxWidth: 200,
                onRender: (item: GraphItem) => <span>{item.size} KB</span>
            },
            {
                key: 'column5',
                name: 'SharePoint',
                iconName: 'FileSymlink',
                minWidth: 70,
                maxWidth: 90,
                isIconOnly: true,
                onRender: (item: GraphItem) => <a  target="_blank" href={item.webUrl} style={{color: 'inherit'}} ><Icon iconName="FileSymlink"/></a>
            },
        ]}
        layoutMode={DetailsListLayoutMode.justified}
        selectionMode={SelectionMode.none}
        onItemInvoked={(f: GraphItem) => {
            if(!/\.([a-z]+)/.test(f.name)) {
                loadFolder(f.id)
            } else {
                onSelectFile(f)
            }
        }}
    />
)

const renderFileIcon = (name: string) =>  {
    const ext = /\.([a-z]+)/.exec(name)
    if(ext == null || ext.length == 0) return <Icon iconName="FabricFolder" />
    return (
        <img
        src={`https://static2.sharepointonline.com/files/fabric/assets/item-types/16/${ext[1]}.svg`} 
        className={classNames.fileIconImg} 
        alt={`file icon`} 
    />
)}