Table ​

The Component ​

Usage ​

This is a base table component that accepts an array of data and handles pagination internally. It displays a responsive pagination component below the table. It also handles sorting, with the column headers as sort buttons.

Table headers and cells can be customized using scoped slots with dynamic slot names. For column headers the slot name is 'header-' + column id and for row cells just the column id.

<template #[`header-${IDS.NAME}`]="col">
  <span class="font-bold">{{ col.name }}</span>
</template>

<template #[IDS.VALUE]="row">
  <span class="text-right">{{ row.value }}</span>
</template>

Component API ​

Data ​

// columns
[
  { id: "country", name: "Country" },
  { id: "val1", name: "Value 1" }
  ...
]

// rows
[
  { country: 'Spain', val1: 30 },
  { country: 'France', val1: 20 },
  ...
]

Props ​

Events ​

Dependencies ​

• OTPagination component
• heroicons
• VueUse