Basic DataTable component for Vue3 in typescript and Composition API. It has basic functionality such as Filter/Search, pagination etc.
npm install --save @jobinsjp/vue3-datatable
or,
yarn add @jobinsjp/vue3-datatable <data-table :rows="data"/>In addition to basic use it you can configure data-table behaviour by applying following properties and template slots.
striped property
<data-table :rows="data" striped/>loading property
loadData event
<template>
<data-table ...
:loading="isLoading"
@loadData="loadData">
<template #loading>
<div class="">Loading....</div>
</template>
</data-table>
</template>
setup() {
// ...
const isLoading = ref(false)
const loadData = async (query) => {
isLoading.value = true
// ...
isLoading.value = false
}
return {
isLoading,
loadData,
// ...
}
}rowClicked event
<template>
<data-table ...
@rowClicked="rowClickHandler">
</data-table>
</template>
setup() {
// ...
const rowClickHandler = (row) => {
console.log("Row Clicked", row)
}empty slot
import { TableBodyCell } from "@jobinsjp/vue3-datatable"
<data-table :rows="[]">
<template #empty>
<TableBodyCell colspan="2">
No record found.
</TableBodyCell>
</template>
</data-table>Documentation, in todo, see code example here: https://github.com/JoBinsJP/vue3-datatable/tree/master/src/components/Tables
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent