Help needed - can't get #header v-slot directive to spread onto the different columns

[yardenroee]

Hi all, I am new to vue and quasar in general, so please bare with me.

I'm trying to create a custom header for my <QTable> component, and I'm having an issue where the header elements are printed, but they are not actually mapped to their proper columns. I cannot seem to understand why this is happening or how I could potentially solve this

idk if you can see, but the header is all under the first column!

here is my code

<QTable
            id="prices-table"
            hide-bottom
            :columns="pricingTableColumns"
            :rows="pricingTableRows"
            row-key="name"
            :rows-per-page-options="[0]"
          >
            <template
              #header
            >
              <div
                class="row justify-end"
                row-key="name"
              >
                <div
                  v-for="(plan, idx) in pricingTableColumns.filter(plan => plan.label)"
                  :key="idx"
                  class="row justify-center q-px-lg q-py-md plan-card"
                  :style="idx === 0 ? { 'border-left': '#6a72899e solid 1px' } : ''"
                >
                  <PlanHeaderButton
                    v-if="plan.label"
                    :plan
                  />
                </div>
              </div>
            </template>
          </QTable>

please help!

[stefanvanherwijnen]

You need to use a QTr with QTh in the header:
https://quasar.dev/vue-components/table#header-slots