Zurb 基础表格分页

Question

如何使用 Foundation 框架为表格实现分页？

我的桌子：

<div v-if="accounts && sortedTransactions.length==0">
  <h3>No transactions to show</h3>
</div>
<div v-else class="container">
  <ul class="responsive-table">
    <li class="table-header">
      <div class="col col-1">Date</div>
      <div class="col col-2">Type</div>
      <div class="col col-3">Amount</div>
      <div class="col col-4">Description</div>
    </li>
    <li class="table-row" v-for="transaction of sortedTransactions">
      <div class="col col-1" data-label="DATE"> {{transaction.date.slice(0,10)}} </div>
      <div :class="[transaction.type === 'CREDIT'? 'col col-2 credit' : ' col col-2 debit']" data-label="TYPE"> {{transaction.type}} </div>
      <div :class="[transaction.type === 'CREDIT'? 'col col-3 credit' : ' col col-3 debit']" data-label="AMOUNT"> {{transaction.amount}} </div>
      <div class="col col-4" data-label="DESCRIPTION"> {{transaction.description}} </div>
    </li>
  </ul>
</div>