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 |