Responsive v-data-table with limited elements showing

I have a v-data-table that's supposed to display 42 elements. I made it so it can display 10 elements minimum or 42 depending on the user's wishes.

<v-card-text>
    <v-data-table
      dark
      :footer-props="{ 'items-per-page-options': [10, 25, -1] }"
      dense
      calculate-widths
      fixed-header
      height="498"
      :headers="headers"
      :items="res"
      sort-by="publicationDate"
      :sortDesc="sortVal"
      class="elevation-1"
    >
      <template #item.video="{ item }">
        <a
          target="_blank"
          v-if="item.video != ''"
          class="links1 video-icon"
          :href="item.video"
        >
          <v-btn dark icon>
            <v-icon class="ic1">mdi-movie</v-icon>
          </v-btn>
        </a>
      </template>

      <template #item.title2="{ item }">
        <!-- NEWS column -->
        <a
          target="_blank"
          v-if="item.file != ''"
          class="links1"
          :href="item.file"
        >
          <span style="color:white"> {{ item.title }} </span>
        </a>
      </template>
    </v-data-table>
  </v-card-text>
</v-card>

When 10 items are displayed, I'd like my table to not be scrollable, that all 10 items are displayed and I'd like it to be scrollable when mre than 10 items are displayed.

Does anyone know how to do that ?