DataGrid createTableColumn

When controlling selected DataGrid items, use a List instead of a Set.

type Column = { Columnkey: string; Label: string }
type Icon = { Label: string; Icon: ReactElement }
type Status = { Label: string; Status: IPresenceBadgeProp list }
type TimeStamp = { Label: string; TimeStamp: int }

type Item = {
    File: Icon
    Author: Status
    LastUpdated: TimeStamp
    LastUpdate: Icon
}

let items = [
    {
        File = { Label = "Meeting notes"; Icon = Fui.icon.documentRegular [] }
        Author = { Label = "Max Mustermann"; Status = [ presenceBadge.status.available; presenceBadge.size.extraSmall ] }
        LastUpdated = { Label = "7h ago"; TimeStamp = 1 }
        LastUpdate = { Label = "You edited this"; Icon = (Fui.icon.editRegular []) }
    }
    {
        File = { Label = "Thursday presentation"; Icon = Fui.icon.folderRegular [] }
        Author = { Label = "Erika Mustermann"; Status = [ presenceBadge.status.busy; presenceBadge.size.large ]  }
        LastUpdated = { Label = "Yesterday at 1:45pm"; TimeStamp = 2 }
        LastUpdate = { Label = "You recently opened this"; Icon = Fui.icon.openRegular [] }
    }
    {
        File = { Label = "Training recording"; Icon = Fui.icon.videoRegular [] }
        Author = { Label = "John Doe"; Status = [ presenceBadge.status.away; presenceBadge.size.small ]  }
        LastUpdated = { Label = "Yesterday at 1:45pm"; TimeStamp = 2 }
        LastUpdate = { Label = "You recently opened this"; Icon = Fui.icon.openRegular [] }
    }
    {
        File = { Label = "Purchase order"; Icon = Fui.icon.documentPdfRegular []  }
        Author = { Label = "Jane Doe"; Status = [ presenceBadge.status.offline; presenceBadge.size.tiny ] }
        LastUpdated = { Label = "Tue at 9:30 AM"; TimeStamp = 3 }
        LastUpdate = { Label = "You shared this in a Teams chat"; Icon = Fui.icon.peopleRegular []  }
    }
]

[<ReactComponent>]
let DataGridTest () =
    let selectedRows, setSelectedRows = React.useState (["Thursday presentation"])
    let sortState, setSortState = React.useState ((Some "file", SortDirection.ascending))

    // These are custom column sizing properties that are not in Microsoft's documentation.
    // Please see `tableColumnSizingOptions` properties or Microsoft's docs for more options.
    let columnSizingOptions = [
        tableColumnSizingOptions.staticColumnWidth ("file", 200)
        tableColumnSizingOptions.staticColumnWidth ("lastUpdate", 120)
        tableColumnSizingOptions.resizeableColumnWidth ("lastUpdated", 200, 250, 225)
        tableColumnSizingOptions.staticColumnWidth ("author", 150)
    ]

    let columns = [
        Fui.createTableColumn [
            createTableColumnOption.columnId "file"
            createTableColumnOption.compare (fun a b -> a.File.Label.CompareTo (Some b.File.Label))
            createTableColumnOption.renderHeaderCell (fun _ -> "File")
            createTableColumnOption.renderCell (fun item ->
                Fui.tableCellLayout [
                    tableCellLayout.key item.File.Label
                    tableCellLayout.media (
                        item.File.Icon
                    )
                    tableCellLayout.children [
                        Fui.text item.File.Label
                    ]
                ]
            )
        ]
        Fui.createTableColumn [
            createTableColumnOption.columnId  "author"
            createTableColumnOption.compare  (fun a b -> a.Author.Label.CompareTo (b.Author.Label))
            createTableColumnOption.renderHeaderCell  (fun _ -> "Author")
            createTableColumnOption.renderCell  (fun item ->
                Fui.tableCellLayout [
                    tableCellLayout.key item.Author.Label
                    tableCellLayout.media (
                        Fui.avatar [
                            avatar.ariaLabel item.Author.Label
                            avatar.name item.Author.Label
                            avatar.badge item.Author.Status
                        ]
                    )
                    tableCellLayout.children [
                        Fui.text item.Author.Label
                    ]
                ]
            )
        ]
        Fui.createTableColumn [
            createTableColumnOption.columnId "lastUpdated"
            createTableColumnOption.compare (fun a b -> a.LastUpdated.TimeStamp - b.LastUpdated.TimeStamp)
            createTableColumnOption.renderHeaderCell (fun _ -> "Last Updated")
            createTableColumnOption.renderCell (fun item -> item.LastUpdated.Label)
        ]
        Fui.createTableColumn [
            createTableColumnOption.columnId "lastUpdate"
            createTableColumnOption.compare (fun a b -> a.LastUpdate.Label.CompareTo (b.LastUpdate.Label))
            createTableColumnOption.renderHeaderCell (fun _ -> "Last Update")
            createTableColumnOption.renderCell (fun item ->
                Fui.tableCellLayout [
                    tableCellLayout.key item.LastUpdate.Label
                    tableCellLayout.media (
                        item.LastUpdate.Icon
                    )
                    tableCellLayout.children [
                        Fui.text item.LastUpdate.Label
                    ]
                ]
            )
        ]
    ]

    Html.div [
        prop.style [ style.width 820 ]
        prop.children [
            Fui.dataGrid [
                dataGrid.items items
                dataGrid.columns columns
                dataGrid.sortable true
                dataGrid.selectionAppearance.brand
                dataGrid.selectionMode.multiselect
                dataGrid.selectedItems selectedRows
                dataGrid.sortState sortState
                dataGrid.onSortChange (fun s -> setSortState s)
                dataGrid.resizableColumns true
                dataGrid.columnSizingOptions columnSizingOptions
                dataGrid.getRowId (fun (i: Item) -> i.File.Label)
                dataGrid.onSelectionChange (fun (data: OnSelectionChangeData<string>) -> setSelectedRows data.selectedItems)
                dataGrid.children [
                    Fui.dataGridHeader [
                        Fui.dataGridRow [
                            dataGridRow.selectionCell [
                                tableSelectionCell.ariaLabel "Select all rows"
                            ]
                            dataGridRow.children (fun tcd _ ->
                                Fui.dataGridHeaderCell [
                                    tcd.renderHeaderCell()
                                ]
                            )
                        ]
                    ]
                    Fui.dataGridBody [
                        dataGridBody.children (fun (trd: TableRowData<Item, int>) ->
                            Fui.dataGridRow [
                                /// Removes the bottom border of the dataGridRow. Doing this keeps the height of the border but changes the color to transparent.
                                /// *This is a custom property that is not in the Microsoft documentation.*
                                dataGridRow.noBottomBorder
                                dataGridRow.key trd.rowId
                                dataGridRow.selectionCell [
                                    tableSelectionCell.ariaLabel "Select row"
                                ]
                                dataGridRow.children (fun (tcd: TableColumnDefinition<Item, int>) _ ->
                                    Fui.dataGridCell [
                                        dataGridCell.key tcd.columnId
                                        dataGridCell.children [
                                            tcd.renderCell(trd.item)
                                        ]
                                    ]
                                )
                            ]
                        )
                    ]
                ]
            ]
        ]
    ]