Load data async

import { For, JSX, lazy, Show, Suspense } from "solid-js";
import type { DataTableCell } from "./DataTableCell";
import { DataTableColumnHeader } from "./DataTableColumnHeader";

type NonEmptyArray<T> = [T, ...T[]];

export interface DataTableColumn {
    title: JSX.Element | string;
}

export interface DataTableCellProps<T> {
    value: T;
    readonly: boolean;
    onValidate?: (value: T) => boolean;
    onChange?: (value: T) => void;
}

export type DataTableCell = (props: DataTableCellProps<any>) => JSX.Element;

export const DataTableTextCell = (props: DataTableCellProps<string>) => {
    return <td class="data-table-cell data-table-cell-text">
        <span class="data-table-cell--content" contentEditable={!props.readonly}>{props.value}</span>
    </td>
}

export interface DataTableProps {
    columns: NonEmptyArray<DataTableColumn>;
    dataProvider?: DataProvider | undefined;
    filters?: DataFilter[];
}

export interface DataFilter { }

export interface DataProvider {
    getData(filters: DataFilter[], signal: AbortSignal): Promise<DataTableCell[]>;
}

export const DataTable = (props: DataTableProps) => {
    let controller = new AbortController();
    let dataPromise = props.dataProvider?.getData(props.filters ?? [], controller.signal);
    let data = lazy(async () => {
        let data = await dataPromise;
        return <For each={data}>{(item) => <div></div>}</For>
    });
    
    return <table>
        <tr>
            {props.columns.map((column) => <DataTableColumnHeader title={column.title} />)}
        </tr>
        <Show when={props.dataProvider} fallback={<b>No data provider</b>}>
            <Suspense fallback={<div>Loading</div>}>

            </Suspense>
        </Show>
    </table>
};