Vue Slim Tables

Installation & basic usage

yarn add vue-slim-tables
// or
npm install vue-slim-tables

<template>
  <VueSlimTables :columns="columns" :source="asyncSource" />
</template>

<script setup>
const columns = [
  { key: 'id', title: 'ID' },
  { key: 'name', title: 'Name' },
  { key: 'phone', title: 'Phone' }
]

const asyncSource = (params) => {
  return fetch('...', params).then((res) => res.json())
}
</script>

Props

| Prop | Type | Required | Description | | - | - | - | - | | columns | Array | true | Array of column objects described below | | source | Function | true | async load | | perPage | Number | false | Number or rows to display. By default 25 will be used |

Column object

| Key | Type | Required | Description | | - | - | - | - | | key | String | true | Uniq key that used for ordering and slots | | title | String | true | Displayed in thead cell | | orderable | Boolean | false | Ordering by column key |

Slots

| Slot | Props | Description | | - | - | - | | #thead:before | - | Add a row before main | | #thead | { columns, orders } | Rewrite the entire thead row | | #thead:after | - | Add a row after main | | #thead:${column.key} | { column } | Rewrite thead cell with custom html | | #row | { row, index, columns } | Rewrite the entire tbody row | | #row:empty | - | Rewrite empty table row markup | | #row:loading | - | Rewrite loading table rows markup | | #cell:${column.key} | { row, index, column, value } | Rewrite tbody cell with custom html | | #pagination | { page, rows } | Rewrite pagination with your own implementation |