image and text?

[j2l]

Hello, Great package, thanks!

I'd like different HTML content in each cell. I play with it for a few hours and searched the issues for images and didn't find one, so I guess my code is not optimal :smile:

<div class="demo-container size">
      <Grid bind:items={items} rowHeight={100} let:item let:dataItem {cols} let:index on:change={onChange} >
        <div class=demo-widget>
            <img id="inside" src={dataItem.img} alt={dataItem.img}>
            {index}
        </div>
      </Grid>
    </div>
...
let layoutOriginal = [
      {
        6: gridHelp.item({
          x: 0,
          y: 0,
          w: 2,
          h: 2,
        }),
        img: "space.png",
      },

I can't really move a cell, it autoscrolls and goes to lalaland. But hey, when I can finally master a cell move I get a temporary limited overlay bonus (only 1 on 0, removed as soon as I move 0): It's fun but not what I want :)

How to add more than one line of text? I tried

{#if dataItem.id == 0}
            <img id="inside" src={dataItem.img} alt={dataItem.img}>
            {/if}

but it's not working, it removes the image of cell 0.

So, how to add different HTML tags and content for each cell?

[vaheqelyan]

https://svelte.dev/repl/3986952efde64489b6651475787cec5e?version=3.40.2

If you don't need predefined components... you can use the text and associate that text with the component

<div class=demo-container>
  <Grid bind:items={items} rowHeight={100} let:item let:dataItem {cols}>
    <div class=demo-widget>
      <svelte:component this={dataItem.component} />
    </div>
  </Grid>
</div>

<script>
const COMPONENTS = {
  text: Text,
  image: Image
}

let data = {
  // ...
  id: uid(),
  component: 'text' | 'image' // Or something else, depending on your needs
}
</script>

[j2l]

Fantastic! Thank you @vaheqelyan It works great for me.