svelte-grid

svelte-grid copied to clipboard

Hi, I'm trying to nest the grid in another grid, but not succeeding. Is this something that should work? Thanks

It's possible, but it's a little more complicated.I'll show you the code tomorrow.

Try this repl

I do not why but bind:items={nestedOne} crashes my firefox. I also suggest you limit the maximum width and height of elements in nested grids

If I'm not mistaken bind:items={nestedOne} does not give problems in an earlier version of svelte

Works indeed.

How can I have Svelte update the nested grid via $:? Currently it's updating the 'parent' grid but not the nested one when the items change.

Currently it's updating the 'parent' grid but not the nested one when the items change.

Can you go into more detail?

When changing the items.nestedItems the nested grid isn't updated.

let nestedItems = [...nestedItems, newNestedItem] items = [...items, {...gridHelp.item(...), nested: true, nestedItems = nestedItems}]

This is my version But svelte does not react to it

items = items.map(val => {
  if (val.nested) {
    return {
      ...val,
      nestedItems: [
        ...val.nestedItems,
        ...[gridHelp.item({ x: 2, y: 0, w: 1, h: 2, id: id() })]
      ]
    };
  }
  return val;
});

However if you change for example the id it will work

If you change in a changeable way like this

items[0].nestedItems = [...items[0].nestedItems, ...newItem]; // Will not work

items[0].nestedItems = []; // Will work

This is caused by the <Nested/> component. repl