Let's create a filter table component in Vue

Подписаться 35 тыс.

Просмотров 21 тыс.

50% 1

A plain table element displaying your data in Vue is pretty boring, let's make it more dynamic!
In this video, we'll use computed properties, events, fetch requests, and emits to build out a component that acts like a filter and search table with Vue 3 and the Composition API.
By the end of the video, we'll be able to search through a data set with text, select based on radio button options, or choose multiple statuses with checkboxes.
- 0:00 Intro
- 0:58 Setting up the table
- 3:55 Pulling in data
- 6:37 Adding the filter components
- 8:52 Search bar
- 16:54 Radio buttons
- 22:34 Dropdown checkboxes
- 30:18 Wrap up
Send me new video ideas and vote on what's coming next: suggest.gg/aschmelyun
Follow me on Twitter! / aschmelyun
Join my newsletter, where I send out new information about twice a month in the PHP, JavaScript, and Docker realms: aschmelyun.substack.com

Наука

Опубликовано:

7 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 63

@sibow 9 месяцев назад

This was very comprehensive, and found to be useful… thanks man

@NebulaM57 2 месяца назад

Man, you did a great job with this video!!! Would love to see more straight Vue tutorials!

@anangyoga1381 5 месяцев назад

thank you! it helps me understanding how to make search functionality

@sohanrahman1897 9 месяцев назад

Great & Very Helpful! Thank You Sir!❤

@MrCellodj 9 месяцев назад

Amazing video!!! 👏 I love how clear you teach these concepts in your videos. Will you be doing a follow-up adding pagination and order-by toggles by any chance?

@aschmelyun 9 месяцев назад

Yep, I have that planned, stay tuned!

@matthiashoffmann6555 8 месяцев назад

"And as always: " Thanks for this great video!

@sayedahmadnaweed1 Месяц назад

Thank you. The tutorial is easy, useful with a fully comprehendible explanation.

@aschmelyun Месяц назад

I'm glad you liked it!

@sayedahmadnaweed1 Месяц назад

@@aschmelyun return cuisineFilter.value.splice(cuisineFilter.value.indexOf(filter), 1); this doesn't work until I changed it to return cuisineFilter.value.splice(cuisineFilter.value.indexOf(filter), -1); I am wondering if the same happened to others as well.

@naalexis Месяц назад

Great video!

@CookingFantasies 8 месяцев назад

Amazing video and very helpful, thanks you very much! Do you happen to have a repo with the code?

@ElectroTechKh 5 месяцев назад

Great video

@codedjango 8 месяцев назад

@23:28 ...here we will additionally need to clear the statuses array upon the clicking of "Filter" button by emitting 1 more event from FilterDropdown component to parent DataTable component so that the filter in the parent DataTable component is cleared when the filter button is clicked in the FilterDropdown component, and next time it will start sending the updated list to its parent....

@user-tt6nc6mo7k 9 месяцев назад

Excellent video as always. That being said, I would always store the state for a table like that in the url. Guessing you didn't to keep it simple for the demo?

@aschmelyun 9 месяцев назад

Correct! I'm planning a follow-up video to this that deals with more intricacies like browser state, v-model usage, and pagination.

@guarddogchronicles 4 месяца назад

Makes so much sense to me compared to using React, thanks very clear. When i was trying to do something like this my initial thought was to filter at the end point to only fetch the desired "tasks" for example instead of fetching all the tasks and then filtering on the frontend, would what i was trying to do be considered bad practice? This method seems a lot easier, thank you for your time. I am going to start using Vue now

@tomaszdrabik79 9 месяцев назад

Hi, Really great job :) just one question, If we working with API then we should send filters to backend or no ?

@iUmerFarooq 9 месяцев назад

Man! Love your videos. Please make more Vue js project base tutorials.

@aschmelyun 9 месяцев назад

Thanks! I have more coming down the line, just need to build out the projects and record them

@iUmerFarooq 9 месяцев назад

@@aschmelyun Thank you Thank you. Just waiting

@usamaramzan2497 4 месяца назад

which font you are using in your editor ??

@NotEdwinDev 3 месяца назад

bro just saved my live on this because I was told to add the same exact features by my supervisor.

@bohdan.vorona 9 месяцев назад

Thanks 💓

@sametc001 Месяц назад

thank you

@nutzersht1179 9 месяцев назад

Nice 🙏👌

@MagickzRex 8 месяцев назад

Is it possible for you to provide the source code for this project? Thanks.

@NaviView Месяц назад

Thank you! very useful information. Can you make a video about adding pagination on this data using vue?

@diarqoroviqi4869 8 месяцев назад

Hey Andrew great video thanks man, could you mind posting a video something like how to "manage" Roles and Permission in a SPA using vue.js? It would be a great video for example in Laravel using the Spatie Roles & Permission package

@ContextF1 7 месяцев назад

what it the full code of the class of input field inside searchform and of the input inside filterdropdown

@mahadevmushrooms 8 месяцев назад

🙏

@BossAPlays 7 месяцев назад

crystal clear explanation. can I request. how about a paginated version and table sorting with same search filters.. would appreciate it.

@aschmelyun 7 месяцев назад

That's coming in a future version, yes!

@BossAPlays 7 месяцев назад

tnx in advance! looking forward.

@sdsd-ec8rw 6 месяцев назад

4:20 "from the API that I set up earlier" - which video this API from and did you use Elasticsearch in there?

@pearkid 3 месяца назад

idk either man, thats where im at now

@boysmart339 8 месяцев назад

Thanks you sir. Can you create filter with date_booking. Example: Hotel booking. ❤

@emmanuelterdoomzer6309 Месяц назад

Where is the api data coming from please? Is there a github repo to clone to follow along? I think you should have shared the resources used in the video so it is easy to follow along.

@ordago123 9 месяцев назад

I think I disagree with having that many handle methods. Probably should've been `v-model`s. That would also allow having a clearAllFilters method in the table and send state from the server to those fields.

@mattskelton7471 9 месяцев назад

Can you explain what you mean? Do you mean use v-model instead of events?

@aschmelyun 9 месяцев назад

100% agree, kept it more verbose to kind of see how everything's moving in between components. I have a follow-up video planned that refactors this to use models and stores state via query params!

@aschmelyun 9 месяцев назад

@@mattskelton7471 For each of the inputs (the search bar, radio buttons, and checkboxes), in Vue instead of listening to an event and using a handler function to modify the local ref, we could just directly attach the ref to the input using Vue's v-model attribute.

@macton182 Месяц назад

@@aschmelyun hello and thanks for your work. Is there a chance that the video (that you planned) will still appear?

@mcprah 8 месяцев назад

Great video. Could you please add pagination as well 🙏🏾

@aschmelyun 8 месяцев назад

Of course! It's planned for the follow-up video out soon

@NebulaM57 2 месяца назад

Pagination AND column sorting too??

@k0wu705 8 месяцев назад

Thank You :) Please can u do pagination and headers sorting for this table component? :))

@aschmelyun 8 месяцев назад

Great suggestion! It's definitely planned for the follow-up

@freddyhuonder2969 2 месяца назад

its a very good video. What's about the pagination and sort?@@aschmelyun

@patsechaluce4407 7 месяцев назад

Can you this be integrated with laravel/inertia? thanks.

@aschmelyun 7 месяцев назад

Yes, definitely! It's just a plain Vue component which means we can add it easily to a Laravel app with Inertia. You'll just have to ensure that your controller has the functionality to pull in things like filter/sort changes, which can then be fired off with a partial reload: inertiajs.com/partial-reloads

@patsechaluce4407 7 месяцев назад

Thank you for the advice Sir? looking forward for more content like this :D @@aschmelyun