Creating Datatables within #each, dynamic table count

[amsmith-pro]

Hello -

Disclaimer: I'm new to Svelte, the answer to this may be obvious

In the multiple tables example, you declare rows1 and rows2 in advance for two tables. How would I dynamically create n tables at runtime?

Something like:

<!-- dictionaries = { 'Dictionary_1': [<data>], 'Dictionary_2': [<data>] -->

<section>
  {#each Object.entries(dictionaries) as [name, dic_data], counter}
    <aside>
        <p>{name}</p>
        <Datatable settings={settings} data={dic_data} bind:dataRows={rows[counter]} id='{name.toLowerCase()}_table'>
            <!-- etc -->
        </Datatable>
    </aside>
  {/each}
</section>

Tried something like bind:dataRows={rows[counter]} with let rows = Array<any>(Object.keys(dictionaries).length) but couldn't get the data to display with:

{#if rows[counter]}
    {#each rows[counter] as row} <!-- The example code uses `$rows`, `$rows[counter]` not allowed? -->
    <tr>
        <!-- tds generated from dic_data with #each block-->
    </tr>
    {/each}
{/if}

[vincjo]

Hello,

I think the best solution is to create your own component that embeds 1 datatable
and takes as a parameter a unique id per datatable

Something like

{#each Object.entries(dictionaries) as [name, dic_data]}
    <MyComponent id={name} data={dic_data}/>
{/each}

Each of <MyComponent/> instantiates 1 <Datatable/> with a unique id and its own data.

Just "let rows", no need to worry about indexes anymore