Robin Lindner Comments - Answer Overflow

Now my question is how would you apply a style based on the theme. I like to work with Sass/Scss very much. By default, the system theme should always be used and the user should be able to change the theme manually using a button. Already created a _config.scss for the theme colors.

15 replies

SSolidJS

•Created by Robin Lindner on 12/22/2022 in #support

Load data async

I try it with createResource, but why is the state of the resource == "unresolved"?

export const DataTable = (props: DataTableProps) => {
    let [controller, setController]: Signal<AbortController | undefined> = createSignal();

    let [data, { mutate, refetch }] = createResource(async () => {
        let controller = setController(new AbortController());
        let data = await props.dataProvider?.getData(props.filters ?? [], controller.signal);
        return <For each={data}>{(item) => item}</For>
    });

    return <table>
        <tr>
            <For each={props.columns}>
                {(item) => <DataTableColumnHeader title={item.title} />}
            </For>
        </tr>

        <Show when={props.dataProvider} fallback={<tr><b>No data provider</b></tr>}>
            <Switch>
                <Match when={data.state == "ready"}>
                    {data()}
                </Match>
                <Match when={data.state == "pending" || data.state == "refreshing"}>
                    <tr><button type="button" onClick={() => controller()?.abort()}>Abbrechen</button></tr>
                </Match>
                <Match when={data.state == "errored"}>
                    <tr><td>Error</td><td>{data.error}</td></tr>
                </Match>
                <Match when={data.state == "unresolved"}>
                    Weird
                </Match>
            </Switch>
        </Show>
    </table>
};

export const DataTable = (props: DataTableProps) => {
    let [controller, setController]: Signal<AbortController | undefined> = createSignal();

    let [data, { mutate, refetch }] = createResource(async () => {
        let controller = setController(new AbortController());
        let data = await props.dataProvider?.getData(props.filters ?? [], controller.signal);
        return <For each={data}>{(item) => item}</For>
    });

    return <table>
        <tr>
            <For each={props.columns}>
                {(item) => <DataTableColumnHeader title={item.title} />}
            </For>
        </tr>

        <Show when={props.dataProvider} fallback={<tr><b>No data provider</b></tr>}>
            <Switch>
                <Match when={data.state == "ready"}>
                    {data()}
                </Match>
                <Match when={data.state == "pending" || data.state == "refreshing"}>
                    <tr><button type="button" onClick={() => controller()?.abort()}>Abbrechen</button></tr>
                </Match>
                <Match when={data.state == "errored"}>
                    <tr><td>Error</td><td>{data.error}</td></tr>
                </Match>
                <Match when={data.state == "unresolved"}>
                    Weird
                </Match>
            </Switch>
        </Show>
    </table>
};

5 replies

Gaming

Programming