Table

⚠️Parts of the Table component are incomplete. Please use the DataGrid component instead.⚠️

type Column = { columnKey: string; label: string }

let simpleTableTest =
    let columns = [
        { columnKey = "file"; label = "File" }
        { columnKey = "author"; label = "Author" }
        { columnKey = "lastUpdated"; label = "Last Updated" }
        { columnKey = "lastUpdate"; label = "Last Update" }
    ]

    Html.div [
        prop.style [ style.width 800 ]
        prop.children [
            Fui.table [
                Fui.tableHeader [
                    Fui.tableRow (
                        columns |> List.map (fun c ->
                            Fui.tableHeaderCell [
                                tableHeaderCell.key c.columnKey
                                tableHeaderCell.children [
                                    Fui.text c.label
                                ]
                            ]
                        )
                    )
                ]
                Fui.tableBody (
                    items |> List.map (fun i ->
                        Fui.tableRow [
                            tableRow.key i.File.Label
                            tableRow.children [
                                Fui.tableCell [
                                    Fui.tableCellLayout [
                                        tableCellLayout.media (
                                            i.File.Icon
                                        )
                                        tableCellLayout.children [
                                            Fui.text i.File.Label
                                        ]
                                    ]
                                ]
                                Fui.tableCell [
                                    Fui.tableCellLayout [
                                        tableCellLayout.media (
                                            Fui.avatar [
                                                avatar.ariaLabel i.Author.Label
                                                avatar.name i.Author.Label
                                                avatar.badge i.Author.Status
                                            ]
                                        )
                                    ]
                                ]
                                Fui.tableCell [
                                    Fui.text i.LastUpdated.Label
                                ]
                                Fui.tableCell [
                                    Fui.tableCellLayout [
                                        tableCellLayout.media (
                                            i.LastUpdate.Icon
                                        )
                                        tableCellLayout.children [
                                            Fui.text i.LastUpdate.Label
                                        ]
                                    ]
                                ]
                            ]
                        ]
                    )
                )
            ]
        ]
    ]