Comments (2)
Hi @ywiyogo
I wrote an example for you. Hope helpful you
updated: I am already added the example to document, if you want to check the result, click me.
<template>
<div style="text-align: left">
<label>SearchBy:</label><input v-model="searchTerm" />
</div>
<table-lite
:is-static-mode="true"
:is-loading="table.isLoading"
:columns="table.columns"
:rows="table.rows"
:total="table.totalRecordCount"
:sortable="table.sortable"
></table-lite>
</template>
<script>
import { defineComponent, reactive, ref, computed, watch } from "vue";
import TableLite from "../components/TableLite.vue";
export default defineComponent({
name: "App",
components: { TableLite },
setup() {
const searchTerm = ref(""); // Search text
// Fake data
const data = reactive({
rows: [],
});
/**
* Get server data request
*/
const myRequest = async (keyword) => {
const fakeData = [];
for (let i = 0; i < 126; i++) {
fakeData.push({
id: i,
name: "TEST" + i,
email: "test" + i + "@example.com",
});
}
return await new Promise((resolve, reject) => {
try {
table.isLoading = true;
// Remove setTimeout() and change to your Axios request or AJAX request on here.
setTimeout(() => {
table.isLoading = false;
let newData = fakeData.filter(
(x) =>
x.email.toLowerCase().includes(keyword.toLowerCase()) ||
x.name.toLowerCase().includes(keyword.toLowerCase())
);
resolve(newData);
}, 2000);
} catch (error) {
console.log("Fetch error", error);
reject();
}
});
};
// Table config
const table = reactive({
isLoading: false,
columns: [
{
label: "ID",
field: "id",
width: "3%",
sortable: true,
isKey: true,
},
{
label: "Name",
field: "name",
width: "10%",
sortable: true,
},
{
label: "Email",
field: "email",
width: "15%",
sortable: true,
},
],
rows: computed(() => {
return data.rows;
}),
totalRecordCount: computed(() => {
return table.rows.length;
}),
sortable: {
order: "id",
sort: "asc",
},
});
/**
* Use vue.js watch to watch your state's change
*/
watch(
() => searchTerm.value,
(val) => {
myRequest(val).then((newData) => {
data.rows = newData;
});
}
);
// Get data on first rendering
myRequest("").then((newData) => {
data.rows = newData;
});
return {
searchTerm,
table,
};
},
});
</script>
from vue3-table-lite.
awesome @linmasahiro ! Thanks for the support and helping improving my knowledge about the async with Vue3!
from vue3-table-lite.
Related Issues (20)
- Header's first column is always fixed on horizontal scrolling
- Unable to get table width to be responsive and fixed first column in table header not fixed HOT 18
- Sortable function doesn't work with grouping key HOT 2
- Links under slot mode stopped working in 1.3.2 HOT 1
- checking rows doesn't work in 1.3.2 and 1.3.3 HOT 1
- Return duplicated value on「return-checked-rows」event HOT 1
- click event not handled in tableLoadingFinish function HOT 2
- Static mode pagination not working as expected HOT 3
- Is it possible to add 'return clearChecked' if 'hasCheckbox'?
- Is it possible to add 'return clearChecked' if 'hasCheckbox'? HOT 6
- Bug when dynamically showing checkboxes HOT 1
- Grouping with toggle like a treeview inside table ? HOT 4
- [OTHERS] Call a Function inside of display property for a button HOT 12
- Unchecking row returns old value HOT 5
- Examples not compatible with latest version of vue3 and node18 HOT 1
- Allow HTML in header HOT 4
- Vertical highlighting on mouse hover HOT 3
- has-checkbox and is-fixed-first-column turned on, only checkbox header stays when table scrolls horizontally. HOT 3
- checked items not being cleared HOT 6
- Page selection list too long HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue3-table-lite.