Answers

• Quelluomo00! Posts: 2Questions: 1Answers: 0

  August 5

  I was able to solve it, here's the solution I came up with.

  I added a custom node just like in the docs:

  let toolbar = document.createElement('div');
  toolbar.id = "tableToolbar"
  
  const dataTableOptions = {
      layout: {
          topStart: toolbar
      },
      // other options
  });
  

  Then I added the button on top of my component HTML, wrapped in a Teleport tag:

  <Teleport to='#tableToolbar' v-if="mounted">
      <a class="btn btn-primary" href="#" @click="btnClick">My Button</a>
  </Teleport>
  

  Normally, the Teleport target should already exist before the component is mounted, otherwise Vue will throw a warning and the teleport will fail.
  To circumvent this, I use conditional rendering to activate the teleport only after the component is mounted. The mounted variable is set in the onMounted hook:

  let mounted = false;
  onMounted(() => {
      mounted = true;
  });
  

  This ensures that the target element exists when the teleport tries to find it.

  Hope this helps someone! Feel free to comment if you know there's a better (or official) solution, right now I'm fine with using the Teleport tag.
• allan Posts: 63,489Questions: 1Answers: 10,470 Site admin

  August 6

  That's cool - nice one! I wasn't actually aware of the Teleport tag, so that's really useful to know about.

  The other option is to create vnodes and render them, then return that from a function in the layout option. I know from experience that while it is perfectly possible, it isn't massively easy though!

  I'll have a bit more of a think about how Vue components could be used in layout - to be honest it never occurred to me before!

  Allan