Cannot remove pagination and add sorting indicators in v-data-table in vue

I am porting an old vue2 project to vue3 my project is setup on vite and I am using v-data-table from vuetify labs at the moment. I am unable to remove pagination and the default sorting indicators on the data table headers are not visible. Like the one's that appear here on hover

This is my vdatatable component.

 <v-card-title>Asks</v-card-title>
            <div class="table-container">
            <v-data-table
              dense
              :sort-by="sortBy"
              :headers="asksHeaders"
              :items="marketdata.asks"
              :rows-per-page="-1"
              options="disablePagination"
              class="elevation-1"
            >
              <template v-slot:column.price="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Price ({{wallets.rel.ticker }})
              </template>

              <template v-slot:column.maxvolume="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Amount ({{wallets.base.ticker }})
              </template>

              <template v-slot:column.relamount="{ header }">
                <!-- {{ header.text.toUpperCase() }} -->
                Total ({{wallets.rel.ticker }})
              </template>

              <!-- Rounding from https://www.jacklmoore.com/notes/rounding-in-javascript/ -->
              <!-- Better to move to computed function for maintainability/non-repetitive -->
              <template v-slot:item.price="{ item }">
                {{ roundedPrice(item.columns.price) }}
              </template>

              <template v-slot:item.price2="{ item }">
                {{ roundedPrice(item.columns.price) }}
  <!-- Remaining code -->

<!--
better implementation handled in parent component on load of orders, then promise to set flag
                <v-chip v-if="hasMyOrder(item.price)" color="purple" dark>me</v-chip>
-->
                <v-chip v-if="item.myOrder" x-small color="purple" dark>*</v-chip>
              </template> 

              <template v-slot:item.maxvolume="{ item }">
                {{ roundedPrice(item.columns.maxvolume) }}
              </template>

              <template v-slot:item.relamount="{ item }">
                {{ roundedPrice(item.columns.price * item.columns.maxvolume) }}
              </template>
              <template v-slot:bottom></template>
            </v-data-table>
            </div>


<script>
import { VDataTable } from 'vuetify/labs/VDataTable'

export default {
  name: "MarketData",
  props: ['wallets', 'marketdata', 'myOrdersThisMarket'],
  components: {
    VDataTable
  },

These are my versions:

{
  "name": "mm2v3",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "serve": "vite preview",
    "build": "vite build",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "dev": "vite",
    "host": "vite --host",
    "format": "prettier --write src/",
    "preview": "vite preview"
  },
  "dependencies": {
    "@mdi/font": "5.9.55",
    "axios": "^1.3.4",
    "pinia": "^2.0.32",
    "qrcode.vue": "^3.3.4",
    "roboto-fontface": "*",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6",
    "vuetify": "npm:@vuetify/nightly@next",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vue/eslint-config-prettier": "^7.1.0",
    "eslint": "^8.34.0",
    "eslint-plugin-vue": "^9.9.0",
    "prettier": "^2.8.4",
    "vite": "^4.1.4",
    "vite-plugin-vuetify": "^1.0.0-alpha.12",
    "vue-cli-plugin-vuetify": "~2.5.8"
  }
}

Complete code here

Removing the pagination

As shown in the "External Pagination" example in the Vuetify 3 docs, you can change the pagination of a data table by overriding the content of the "bottom" slot. By overriding the slot but not providing any content, you can effectively remove the pagination.

Keeping the default sorting mechanism

Based on your example code, you're already overriding the headers slot for each column, which would be why the default sorting controls are not appearing

Putting it all together

You can see an example that implements that using the <v-hover> component and some inline styling here: [Vuetify playground link]. The first, second, and third headers in the example have been overridden, and the fourth and fifth headers have been left with the default.

This approach would probably benefit from a custom component to abstract away the logic for the sort icon, otherwise that template will get verbose quickly.