[Grid.js] [ERROR]: Could not determine the storage type

[alphonso06]

Hello,

I'm trying to set the data for the table using fetch() but I get [Grid.js] [ERROR]: Could not determine the storage type as an error.

I'm aware you have to use the server prop to set the data that way (as seen in this REPL). But my use case requires that I use my own HTTP client - the one I wrote automatically renews authentication on 401 responses.

I ask if there's a way to set the table data dynamically without using the server prop? Currently I'm testing using fetch() on jsonplaceholder which matches the format of the data in the Svelte example REPL. This results in the aforementioned error message on compile.

I've also seen the Custom HTTP Client section of the documentation but I'm unsure how I can create something reusable, especially since I'll be calling a lot of dynamic columns from different endpoints.

Perhaps a way to set the data using writable stores? Or maybe I'm missing something and this is already possible?

Thanks in advance. 😁️

[HubertKaluzny]

Error comes from here: https://github.com/grid-js/gridjs/blob/51e0818aff399c7151eb7bc363246e44acad1bbd/src/storage/storageUtils.ts#L32

Need to ensure your storage/data property isn't undefined/null when instantiating the component (occurred for me when I was statically prerendering the site).

E.g statically building this:

<script>
    import { onMount } from 'svelte';
    import Grid from 'gridjs-svelte';
  
    let data;
    onMount(async () => {
        // dynamically load values into data array
        data = [1, 2, 3, 4];
    });
</script>

<Grid data={data} />

Will fail as the data property is undefined and grid-js can't determine what the storage type it is.

Whereas here the site builds fine:

<script>
    import { onMount } from 'svelte';
    import Grid from 'gridjs-svelte';
  
    // instantiate with empty array
    let data = [];
    onMount(async () => {
        // dynamically load values into data array
        data = [1, 2, 3, 4];
    });
</script>

<Grid data={data} />