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 ({ sortColumn = (Some "file"); sortDirection = SortDirection.ascending })

    let columnSizingOptions = [
        "file", [
            tableColumnSizingOptions.minWidth 110
            tableColumnSizingOptions.defaultWidth 120
        ]
        "author", [
            tableColumnSizingOptions.minWidth 120
            tableColumnSizingOptions.defaultWidth 180
            tableColumnSizingOptions.idealWidth 180
        ]
    ]

    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
                    ]
                ]
            )
        ]
    ]

    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 [
                        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)
                                ]
                            ]
                        )
                    ]
                )
            ]
        ]
    ]