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
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
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.
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.
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.
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
