DetailsList

Define Items

type TimeEntry = {
    Username: string
    Email: string
    Date: DateTime
    Project: string 
    Task: string
    Hours: double        
}

let entries : TimeEntry list = getTimeEntries()

Define Columns Array

let columns : DetailsList.IColumn<TimeEntry> array = [|
    DetailsList.Column("DATE", "Date", (fun e -> str (e.Date.ToShortDateString())), maxWidth = 100)
    DetailsList.Column("TASK", "Task", (fun e -> str e.Task), maxWidth = 400)
    DetailsList.Column("Project", "Project", (fun e -> str e.Project))
    DetailsList.Column("HOURS", "Hours", (fun e -> str (string e.Hours)))
|]

Create the DetailsList

DetailsList.detailsList [
    DetailsList.Items  entries
    DetailsList.Columns columns 
    DetailsList.IsHeaderVisible true
    DetailsList.GetKey (fun (item, index) -> $"{item.Email}{item.Date.ToShortDateString()}{item.Task}")
    DetailsList.Compact true
] []

TODO

• Continue to add the more advanced features (sorting, selection, etc)