Data tables

[<SolidComponent>]
let PlanetTable () =
    let sorting, setSorting = createSignal<ColumnSort array> [||]

    let column key header numeric =
        {| accessorKey = key; header = header; meta = {| numeric = numeric |} |}

    // table-core passes either the new sorting or a function of the old one.
    let onSortingChange (updater: obj) =
        if jsTypeof updater = "function" then
            let update = unbox<ColumnSort array -> ColumnSort array> updater
            setSorting (update (sorting ()))
        else
            setSorting (unbox updater)

    let tbl: Table =
        createTable
            {| data = planets
               columns =
                   [| column "name" "Planet" false
                      column "moons" "Moons" true
                      column "diameter" "Diameter (km)" true
                      column "au" "Distance (AU)" true |]
               state = createObj []
               onStateChange = ignore
               onSortingChange = onSortingChange
               renderFallbackValue = null
               getCoreRowModel = getCoreRowModel ()
               getSortedRowModel = getSortedRowModel () |}
        |> unbox

    // Hand the signal to table-core. Returns the sorting, so every reader depends on it.
    let synced =
        createMemo (fun (_: ColumnSort array option) ->
            let current = sorting ()
            let state = JS.Constructors.Object.assign (createObj [], tbl.initialState, {| sorting = current |})
            tbl.setOptions (fun prev -> JS.Constructors.Object.assign (createObj [], prev, {| state = state |}))
            current)

    let headers () = synced () |> ignore; tbl.getFlatHeaders ()
    let rows () = synced () |> ignore; tbl.getRowModel().rows

    let arrow (column: Column) =
        synced () |> ignore
        match string (column.getIsSorted ()) with
        | "asc" -> "▲"
        | "desc" -> "▼"
        | _ -> ""

    let cellStyle (column: Column) =
        let align =
            if column.columnDef.meta.numeric then "text-align: right; font-variant-numeric: tabular-nums;"
            else "font-weight: 500;"
        let tint = if arrow column <> "" then " background: var(--nacara-primary-subtle);" else ""
        align + tint

    let summary () =
        match synced () |> Array.toList with
        | [] -> "Unsorted. Click a header."
        | keys ->
            keys
            |> List.map (fun key -> key.id + (if key.desc then " descending" else " ascending"))
            |> String.concat ", then "
            |> sprintf "Sorted by %s."

    let sortButton =
        "background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;"
        + " display: inline-flex; gap: .375rem; align-items: center"
    let footer =
        "display: flex; align-items: center; justify-content: space-between; gap: 1rem;"
        + " margin-top: .75rem; font-size: .875rem; color: var(--nacara-text-muted)"

    div () {
        table (style = "background: var(--nacara-bg)") {
            thead () {
                tr () {
                    For.Keyed(each = headers ()) {
                        yield fun header _ ->
                            let col = header.column
                            th (style = if col.columnDef.meta.numeric then "text-align: right" else "") {
                                button (
                                    class' = "planet-sort",
                                    style = sortButton,
                                    onClick = fun e -> col.getToggleSortingHandler () e
                                ) {
                                    col.columnDef.header
                                    span (style = "font-size: .7em; width: 1em; color: var(--nacara-primary)") {
                                        arrow col
                                    }
                                }
                            }
                    }
                }
            }
            tbody () {
                For.KeyedFn(each = rows (), keyed = fun (row: Row) -> box row.id) {
                    yield fun row _ ->
                        tr () {
                            For.Keyed(each = row().getVisibleCells ()) {
                                yield fun cell _ ->
                                    td (style = cellStyle cell.column) { string (cell.getValue ()) }
                            }
                        }
                }
            }
        }
        div (style = footer) {
            span () { summary () }
            button (class' = "p-btn p-btn--secondary", onClick = fun _ -> setSorting [||]) { "Clear sorting" }
        }
    }

export function PlanetTable() {
    let columns, state, renderFallbackValue, matchValue_1, arg;
    const patternInput = createSignal([]);
    const sorting = patternInput[0];
    const setSorting = patternInput[1];
    const column = (key, header, numeric) => ({
        accessorKey: key,
        header: header,
        meta: {
            numeric: numeric,
        },
    });
    const tbl = createTable((columns = [column("name", "Planet", false), column("moons", "Moons", true), column("diameter", "Diameter (km)", true), column("au", "Distance (AU)", true)], (state = {}, (renderFallbackValue = defaultOf(), {
        columns: columns,
        data: planets,
        getCoreRowModel: getCoreRowModel(),
        getSortedRowModel: getSortedRowModel(),
        onSortingChange: (updater) => {
            if ((typeof updater) === "function") {
                setSorting(updater(sorting()));
            }
            else {
                setSorting(updater);
            }
        },
        onStateChange: (value) => value,
        renderFallbackValue: renderFallbackValue,
        state: state,
    }))));
    const synced = createMemo((_arg) => {
        const current = sorting();
        const state_1 = Object.assign({}, tbl.initialState, {
            sorting: current,
        });
        tbl.setOptions((prev) => Object.assign({}, prev, {
            state: state_1,
        }));
        return current;
    });
    const arrow = (column_1) => {
        synced();
        const matchValue = toString(column_1.getIsSorted());
        switch (matchValue) {
            case "asc":
                return "▲";
            case "desc":
                return "▼";
            default:
                return "";
        }
    };
    const sortButton = "background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; gap: .375rem; align-items: center";
    const footer = "display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; font-size: .875rem; color: var(--nacara-text-muted)";
    return <div>
        <table style="background: var(--nacara-bg)">
            <thead>
                <tr>
                    <KeyedFor each={(synced(), tbl.getFlatHeaders())}>
                        {(header_1, _arg_1) => {
                            const col = header_1.column;
                            return <th style={col.columnDef.meta.numeric ? "text-align: right" : ""}>
                                <button class="planet-sort"
                                    style={sortButton}
                                    onClick={(e) => {
                                        col.getToggleSortingHandler()(e);
                                    }}>
                                    {col.columnDef.header}
                                    <span style="font-size: .7em; width: 1em; color: var(--nacara-primary)">
                                        {arrow(col)}
                                    </span>
                                </button>
                            </th>;
                        }}
                    </KeyedFor>
                </tr>
            </thead>
            <tbody>
                <KeyedFnFor each={(synced(), tbl.getRowModel().rows)}
                    keyed={(row_1) => row_1.id}>
                    {(row, _arg_2) => <tr>
                        <KeyedFor each={row().getVisibleCells()}>
                            {(cell, _arg_3) => {
                                let column_2;
                                return <td style={(column_2 = cell.column, (column_2.columnDef.meta.numeric ? "text-align: right; font-variant-numeric: tabular-nums;" : "font-weight: 500;") + ((arrow(column_2) !== "") ? " background: var(--nacara-primary-subtle);" : ""))}>
                                    {toString(cell.getValue())}
                                </td>;
                            }}
                        </KeyedFor>
                    </tr>}
                </KeyedFnFor>
            </tbody>
        </table>
        <div style={footer}>
            <span>
                {(matchValue_1 = ofArray(synced()), isEmpty(matchValue_1) ? "Unsorted. Click a header." : ((arg = join(", then ", map((key_1) => (key_1.id + (key_1.desc ? " descending" : " ascending")), matchValue_1)), toText(printf("Sorted by %s."))(arg))))}
            </span>
            <button class="p-btn p-btn--secondary"
                onClick={(_arg_4) => {
                    setSorting([]);
                }}>
                Clear sorting
            </button>
        </div>
    </div>;
}