Replies

• allan Posts: 65,666Questions: 1Answers: 10,921 Site admin

  7:53AM edited 7:53AM

  Changing the rendered data in the table body, after DataTables has drawn the table, in a scrolling table, is a sure fire way of causing that issue. The column alignment issues don't get a chance to update to keep everything in line (I'm surprised that this is happening in the beta, but not v2 - I'd expect it to happen in both!).

  The solution is to use slots:

        <template #column-0="props">
          <div class="flex flex-wrap gap-1">
            <Tag :value="props.cellData" />
          </div>
        </template>
  

  I've updated your example here to use <Tag> in a slot, and it works much better.

  Allan
• coreyg142 Posts: 11Questions: 1Answers: 0

  12:57PM

  The reason I didn't go with slots and instead did my weird hacky way was due to performance. I had found it was significantly slower to draw the table with slots than it was with this even with a low pagination size. Although admittedly that was before I made the table server side processed, so I'll give it another shot.

  ---

  Seeing an issue with the columns that use slots not updating when the table changes (reorder, search, etc.). This only happens in v3, it works as expected in stable.

  v3 behavior - https://streamable.com/pzhncr

  stable working - https://streamable.com/ojmil0

  ---

  also one very minor nitpick - page size element is not styled properly in dark mode