Hi, thanks for your teaching video ! it really helps ! Great work - i have subscribed now )))) I have a question about "Search ..." functionality - what do i need to do, if i need a search by several inputs ( i mean search by some fields with OR and AND and NOT conditions relaying on filled inputs ? Сan you help me with this ? Or maybe link, page, article ? And if my ROWCOUNT is about 10k rows on table, do you think - it would be better to use server-side search (filter) ? Any help would be very useful ))) P.S. Again , i am very thankful to you for these teaching videos on this topic - bootstrap-vue. Please continue ! It released me of private exploration of this amaizing tool - but i have a DEADLINE as Developer on Datatable . Please continue, you are doing great job ! THANK YOU!
I'm new to vue and have been looking for a video that compares the bootstrap and vuetify.... subscribed! Btw I've been using bootstrap for yearrrsss and after watching this I think in a UX sense that Vuetify is much smarter and user friendly getting straight to the point with the pagination. Also, the sortable arrow effect is kind of cool. Love it!
You're right! Vuetify has many more user (and developer) friendly components. But, the team at BootstrapVue has also been adding to it. I can develop faster with BootstrapVue because I've also been using Bootstrap for many years. If you haven't already checked it out, there is a very promising project called Quasar (quasar.dev). It claims to be able to build web, mobile, and desktop in one Vue codebase. I haven't tried it yet but, I have a video planned on it. If it does work well, it will be a gamechanger for my side projects 🤞.
Hi, great video. Unfortunately I have some issues with removing the rows (BootstrapVue), always the last row is deleted. Can you please advise how can I deal with it?
in both cases you should use another function to find index of element in an array of objects: deleteItem(id) { const index = this.users.findIndex((x) => x.id === id) this.users.splice(index, 1); }
looking for a DataTable in PrimeVue where I can make a cell Value a link to route to another page which contains a form. The Data in the Column is coming from .NET using ajax GET API. we can also use axios. problem is with tag or directive which is a wrapper on table column by PrimeVue. doesn't accept anchor tags. anchor tags inside tags. doesnt convert the value into a link. who can help
Go to their docs and look at the last example: vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort It shows you how to wire up your table from an api.
I don’t believe that’s something out of the box with either package. Since your data is in an array, as long as you can get access to the index of each row, you should be able to write a method to update the data. Then just put an input in that slot of the column.
For BootstrapVue, if you go to the table docs (bootstrap-vue.org/docs/components/table) and click on Complete example in the right menu, look at the filter on checkboxes and the corresponding code. It looks like you just need to pass a prop called filter-included-fields to the table with an array of fields you want to filter on. I'm not sure you can filter on two different search bars, but the checkboxes seem like a good direction. For Vuetify, this article looks like a good start: front.id/en/articles/vuetify-achieve-multiple-filtering-data-table-component
If you go to the table docs (bootstrap-vue.org/docs/components/table) and click on Custom data rendering in the right menu, it will show you how you can add a button to any column. You just need to pass it your fields and then use the v-slot and specify the correct cell name.
As a newbie, your instructions to install and get set up was not clear. I already had a vue 3 project that I wanted to have several data table in and thought your video would help. I could not get started at all. I tried to create all the folders you have and copy your codes for each and still it didn't work. I tried the get started documentation from vuetify and bootstrapVue and still not helpful
![Vue 3 Composition API Introduction [FULL TUTORIAL]](http://i.ytimg.com/vi/bwItFdPt-6M/mqdefault.jpg)
Which VueJs data table do you prefer? Leave a comment below!
T hRUFFU7UHLL)8&,;;#&;^&&[^7
Hi, thanks for your teaching video ! it really helps ! Great work - i have subscribed now ))))
I have a question about "Search ..." functionality - what do i need to do, if i need a search by several inputs ( i mean search by some fields with OR and AND and NOT conditions relaying on filled inputs ? Сan you help me with this ? Or maybe link, page, article ? And if my ROWCOUNT is about 10k rows on table, do you think - it would be better to use server-side search (filter) ?
Any help would be very useful )))
P.S. Again , i am very thankful to you for these teaching videos on this topic - bootstrap-vue. Please continue ! It released me of private exploration of this amaizing tool - but i have a DEADLINE as Developer on Datatable . Please continue, you are doing great job ! THANK YOU!
Thanks for the video! Keep posting.
Pure gold. Thank you!
Very good
Great explanation
Can use both vuetify and boostrap vue single project..?
So Bootstrap-vue is not compatible with Vue3. :(
Thanks. This was helpful.
I prefer the vuetify version- it's clean and a lot quicker to set up.
Can you edit items per row?
Yes. If you click on the link in the description for their docs, look for the CRUD example.
Can I use vuetify without bootstrap? cuz im using tailwind. thanks
I'm new to vue and have been looking for a video that compares the bootstrap and vuetify.... subscribed! Btw I've been using bootstrap for yearrrsss and after watching this I think in a UX sense that Vuetify is much smarter and user friendly getting straight to the point with the pagination. Also, the sortable arrow effect is kind of cool. Love it!
You're right! Vuetify has many more user (and developer) friendly components. But, the team at BootstrapVue has also been adding to it. I can develop faster with BootstrapVue because I've also been using Bootstrap for many years.
If you haven't already checked it out, there is a very promising project called Quasar (quasar.dev). It claims to be able to build web, mobile, and desktop in one Vue codebase. I haven't tried it yet but, I have a video planned on it. If it does work well, it will be a gamechanger for my side projects 🤞.
do you have some filter searching for specific columns ?
very good.
thank you
Hi, great video.
Unfortunately I have some issues with removing the rows (BootstrapVue), always the last row is deleted. Can you please advise how can I deal with it?
in both cases you should use another function to find index of element in an array of objects:
deleteItem(id) {
const index = this.users.findIndex((x) => x.id === id)
this.users.splice(index, 1);
}
looking for a DataTable in PrimeVue where I can make a cell Value a link to route to another page which contains a form. The Data in the Column is coming from .NET using ajax GET API. we can also use axios. problem is with tag or directive which is a wrapper on table column by PrimeVue. doesn't accept anchor tags. anchor tags inside tags. doesnt convert the value into a link. who can help
The best chanel
How to fill the vuetify table with the data consumed from an API?
Go to their docs and look at the last example: vuetifyjs.com/en/components/data-tables/#server-side-paginate-and-sort
It shows you how to wire up your table from an api.
Hi
How would I go about editing an inline record inside the datatable boostrap-vue without opening a modal?
I don’t believe that’s something out of the box with either package. Since your data is in an array, as long as you can get access to the index of each row, you should be able to write a method to update the data. Then just put an input in that slot of the column.
Hey, nice video! If i want 2 or more searchbars like one for only id and one for only title do you have any tips on how i can achieve that?
For BootstrapVue, if you go to the table docs (bootstrap-vue.org/docs/components/table) and click on Complete example in the right menu, look at the filter on checkboxes and the corresponding code. It looks like you just need to pass a prop called filter-included-fields to the table with an array of fields you want to filter on. I'm not sure you can filter on two different search bars, but the checkboxes seem like a good direction.
For Vuetify, this article looks like a good start: front.id/en/articles/vuetify-achieve-multiple-filtering-data-table-component
@@DiligentDev Thanks alot! I totaly missed those checkboxes when i looked at it the last time. I got it working!
Hii.. What if I want to add a button in any middle column in vue-bootstrap table ? How can I add button in middle column ??
If you go to the table docs (bootstrap-vue.org/docs/components/table) and click on Custom data rendering in the right menu, it will show you how you can add a button to any column. You just need to pass it your fields and then use the v-slot and specify the correct cell name.
so confuse about why the css style didn't chaos between two UI frameworks in one Vuejs projects
it works nice thks dear teacher
I know its crazy. I imagine the grid layout functions the exact same in each.
As a newbie, your instructions to install and get set up was not clear. I already had a vue 3 project that I wanted to have several data table in and thought your video would help. I could not get started at all. I tried to create all the folders you have and copy your codes for each and still it didn't work. I tried the get started documentation from vuetify and bootstrapVue and still not helpful