In my configuration q-table :

  <q-table
      class="my-sticky-header-column-table-caja"
      dense
      :data="cajaFilterDateData"
      :columns="columns"
      :filter="filter"
      :filter-method="filterCaja"
      row-key="name"
      :rows-per-page-options="[0]"
      :pagination.sync="pagination"
      flat
      bordered
      separator="cell"
      table-header-class="bg-orange text-white"
      virtual-scroll
    >
      <template v-slot:top-row>
        <q-tr>
          <q-td colspan="100%">Top row</q-td>
        </q-tr>
      </template>

      <template v-slot:bottom-row>
        <q-tr>
          <q-td colspan="100%">Bottom row</q-td>
        </q-tr>
      </template>

display:
Only working whitout virtual-scroll prop:

 <q-table
      class="my-sticky-header-column-table-caja"
      dense
      :data="cajaFilterDateData"
      :columns="columns"
      :filter="filter"
      :filter-method="filterCaja"
      row-key="name"
      :rows-per-page-options="[0]"
      :pagination.sync="pagination"
      flat
      bordered
      separator="cell"
      table-header-class="bg-orange text-white"
    >
      <template v-slot:top-row>
        <q-tr>
          <q-td colspan="100%">Top row</q-td>
        </q-tr>
      </template>

      <template v-slot:bottom-row>
        <q-tr>
          <q-td colspan="100%">Bottom row</q-td>
        </q-tr>
      </template>

Display correctly:

How can I solve the problem or get the desired result?
Thank you.

Well, doing tests I found a simpler solution: just put the component inside a <form> tag with the attributes you want to specify for example:

<form  autocomplete="off">
			<q-search size="lg"  placeholder="search" clearable color="primary" v-model.trim="filterText" />
		</form>