flafla/vue-slim-table

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