Прокручиваемая таблица с фиксированным заголовком таблицы и динамической нумерацией страниц c

Question

Эта таблица - это то, что у меня есть сейчас, и что вызывает у меня некоторые проблемы У меня есть приложение электронного окна, которое слишком мало, чтобы содержать все записи таблицы. В теле приложения скрыто переполнение, и я хочу иметь фиксированный заголовок для таблицы и прокручиваемое тело с нумерацией страниц в верхней части таблицы. Я тестирую решение css, но безуспешно, я использую vue. js и Dex ie. js в качестве базы данных для обновления таблицы, а также мне нужна помощь, чтобы понять, как разбивать страницы на страницы. данные и как исправить заголовок таблицы и позволить телу начать прокручиваться. Вот код:

//HTML
        <div class="col-12 tableFixHead p-3">
          <table class="table table-responsive-md table-dark table-sm table-bordered table-hover">
            <thead class="thead-dark">
              <tr class="text-center">
                <th scope="col">Data</th>
                <th class="" scope="col">Saldo iniziale</th>
                <th class="" scope="col">Saldo chiusura</th>
                <th class="" scope="col">Differenza</th>
              </tr>
            </thead>
            <tbody class="">
              <tr v-for="data in history">
                <th class="" scope="row">{{ data.date }}</th>
                <td class="">{{ data.start_balance }}</td>
                <td class="">{{ data.end_balance }}</td>
                <td class="">{{ data.difference }}</td>
              </tr>
            </tbody>
          </table>
        </div>

//JS
    <script type="text/javascript">
      const { Electron, ipcRederer, BrowserWindow } = require('electron');
      const Dexie = require('dexie');
      const Chart = require('chart.js');

      // var ctx = document.getElementById('tradingChart');
      // let tradingChart = new Chart(ctx, {
      //   type: 'line',
      //
      // });

      // Fix table head
      function tableFixHead (e) {
          const el = e.target,
                sT = el.scrollTop;
          el.querySelectorAll("thead th").forEach(th =>
            th.style.transform = `translateY(${sT}px)`
          );
      }
      document.querySelectorAll(".tableFixHead").forEach(el =>
          el.addEventListener("scroll", tableFixHead)
      );

      let db = new Dexie('trading_balance');

      db.version(1).stores({
        trading_history: "++id,date,start_balance,end_balance,difference"
      });

      let app = new Vue({
        el: '#app',
        data: {
          date: new Date().toLocaleDateString('it-IT'),
            start_balance: null,
            end_balance: null,
          positive: null,
          negative:  null,
          result: 0,
          history: [],
          balance: null,
          percentage: 0
        },
        created: function(){
          this.viewTradingHistory();
        },
        computed: {
                total: function(){
                    this.result = parseFloat(this.end_balance) - parseFloat(this.start_balance);
              this.percentage = Math.round( (this.result / this.start_balance) * 100 );
                if( this.result < 0 ){
                  this.negative = true;
                  this.positive = false;
                }
                if( this.result > 0 ){
                  this.negative = false;
                  this.positive = true;
                }
                return this.result;
                },
            totalBalance: function(){
              return parseFloat(this.balance);
            },
            differencePercentage(){
              return this.percentage;
            }
            },
          methods: {
            saveTradingHistory: function(){
              db.trading_history.add({
                date: this.date,
                start_balance: this.start_balance,
                end_balance: this.end_balance,
                difference: this.result
              }).then( (primKey) => {
                // console.log(primKey);
                // console.log(db.trading_history.get(primKey));
                this.updateTradingTable(primKey);
              });
            },
            viewTradingHistory: function(){

              db.trading_history.each( (item) =>{
                this.balance += item.difference;
                this.history.push(item);
              });
              //console.log(this.history);
            },
            updateTradingTable: function( primKey ){
              db.trading_history.get( primKey , (item) =>{
                this.balance += item.difference;
                this.history.push({...item});
              });
            }
          }
        });
    </script>