@vigilio/vue-table
v2.0.6
Published
this is a table library in vue
Downloads
16
Readme
@Vigilio/vue-table
A simple vue Hooks library for table.
npm add tslib
npm add @vigilio/vue-paginator # 2kb
Getting Started
useTable
API REFERENCE
{
const { table: {
Thead,
TBody: {
Row,
Cell,
},
},
updateData,
pagination, // @vigilio/vue-paginator
sort: {
sort,
sorting,
},
}}=useTable({
columns: columns,
pagination: { limit: 10, offset: 0 },// @vigilio/vue-paginator
});
<script lang="ts" setup>
import { Columns } from "@vigilio/vue-table";
const columns: Columns<{ name: string }, "index" | "acciones"> = [
{
key: "index",
header: () => {
return h("div", { class: "flex items-center" }, [
h("input", {
id: "checkbox-table-search-1",
type: "checkbox",
}),
h(
"label",
{
for: "checkbox-table-search-1",
},
"checkbox"
),
]);
},
cell: () => {
return h("div", { class: "flex items-center" }, [
h("input", {
id: "checkbox-table-search-1",
type: "checkbox",
}),
]);
},
},
{
key: "name",
cell: (props, index) => props.name.toUpperCase() + " " + (index + 1),
header: (props) => h("span", null, props + "^"),
isSort: true,
},
{
key: "acciones",
cell: () => {
function clicked() {
console.log("hola bro");
}
return h("div", null, [
h("button", { class: "" }, "Editar"),
h(
"button",
{
onClick: clicked,
},
"Eliminar"
),
]);
},
},
];
const { pagination, sort, table, updateData } = useTable({
columns: columns,
pagination: { limit: 10, offset: 0 },
});
// You can use @vigilio/vue-fetching
const { refetch, isLoading } = useQuery(
"/paginator/product",
async function (url) {
const data = new URLSearchParams();
data.append("offset", String(pagination.pagination.offset));
data.append("limit", String(pagination.pagination.limit));
for (const [key, value] of Object.entries(sort.sort)) {
data.append(key, value);
}
const response = await fetch(`http://localhost:4000${url}?${data}`);
const result = await response.json();
return result;
},
{
onSuccess(data) {
updateData(
{ total: data.count, data: data.results },
// if you want to add methods {}
);
},
}
);
watch(
[pagination.page, () => pagination.value.limit, sort.sort],
() => {
refetch();
},
{ deep: true }
);
</script>
<template>
<h1>@VIGILIO/TABLE</h1>
<div>
<table>
<thead>
<tr>
<th scope="col" v-for="{ value } in table.Thead()">
<template v-if="typeof value === 'string'">{{
value
}}</template>
<component v-else :is="value" />
</th>
</tr>
</thead>
<tbody>
<p v-if="isLoading">loading...</p>
<tr
v-else
v-for="{ ...data } in table.TBody.Row()"
:key="data.index"
>
<td
class="px-6 py-4"
v-for="{ key, value } in table.TBody.Cell(data)"
:key="key"
>
<template v-if="typeof value === 'string'">{{
value
}}</template>
<component v-else :is="value" />
</td>
</tr>
</tbody>
</table>
<!-- if you want to see paginator -->
<!-- @vigilio/vue-paginator -->
</div>
</template>