what if we have some data in a table and we want to apply some filters to it to narrow down the items displayed based on attributes like a status or create a date let's go ahead and build this out as a view component this is what it should look like when we're done we have a table here that displays a bunch of tasks as they come into us from an API but we can also filter these out by the date they are due either today or past due and we have a drop down of filters that we can select that narrows it Down based on the status attribute for each task if you wanted to narrow this down even further we can use the search bar and search based on who they are assigned to or what the title is associated with them so let's go ahead and starting from scratch build out this component so I already went ahead and created a boilerplate View application that just has this single element in it right now we can go back to the browser and see that we just have a blank screen but right here is where I want our table to end up going the first thing that we should do is create the main table component that all of our data will flow into so in our components folder let's go ahead and create a new component and we'll just call this datatable.view I'm using the view3 composition API so we're going to start off with script setup at the top of each of our components and then after that we'll follow up with the template that will store our markup for this table so let's go ahead and create a basic table element in here and decide what we need to have coming in to this component for that we can use Define props at the top here in our script setup and this is in an object where each key is a property passed in when we use this component I can really only think of one attribute we're going to have associated with this table and that's the actual tasks or items coming into it so we can say items array and this denotes that we are expecting an array of items coming in as the prop for this component we can specify these options out even further by using an object here instead of just a type and we can say the type of items is an array and it is required so the required attribute is set to true so this way of items aren't passed into our data table component an error will be thrown so now what do we do with these items well we want to use this table and we want to Loop over each of them and display out some kind of data before we go any further let's just start out with something simple to make sure that we're getting our data in here and it's populating as expected so let's create a row for each item so we can say TR V4 item in items and because we're using V4 we need a key attached with this I like to use the ID property of whatever object is going to be in this array alternatively though we can set item and index here so that way for the key we can just use the index of the item instead if you have an array you have something like simple strings but for this we will keep the ID in here and then let's just go ahead and Echo out that item id as the first column in the table so now how do we actually use this well let's go back into our main app view component and we're going to include that data table here now already it's expecting some items to be pushed in here we don't have those available yet but we could create some up here if we say const items is an array and we're expecting a couple of IDs here well a couple of objects with some ID attributes because we're using that in both the key and what's being echoed out in a table and we can pass in these items by V binding items to this items array that we have up here so now if we go back into our browser we can see that we have a table now with the two IDs that we passed in two and three this is good though but we're not going to hard code these items into our component we want to pull these in from an API so instead what we're going to do is dynamically load these in whenever the component is mounted in view so if we use this on mounted hook that is part of the view lifecycle what this basically does is say all right when this component is mounted when it's available for the browser to use I want to perform some kind of action usually this is where you would call things like API endpoints to get data that you would use for a particular application or component so I need to fetch out these tasks from this API that I had set up earlier to do that I can just use the fetch API that's available in any modern browser so I can say all right const response is equal to await Fetch and then my endpoint and then because we have an await here this needs to be an async function for on mounted so we just need to add this async keyword before the function call and then we need to store the items that we get back from this API call so we need to create a ref up here in our component const items is equal to F and an empty array so this ref with an empty array means that we have a dynamic object in view any updates that happen to this will be reflected in any component that uses this item's object to actually attach our items that we're getting back from our API endpoint now we can call items value and set it to the await response Json call from the fetch request we should be expecting a collection of task objects and then those items are dynamically added into our data table and we should be able to see these IDs fill up so then back in our component we should be able to see each of these items populate our table and display their ID and sure enough back in the browser we have all of them here and this looks good but we need a little bit more data for our table besides just the ID so let's go ahead and flesh this out a little bit more okay so I added some markup to our table here so that we have some kind of distinct styling for it and then I went ahead and added this header here containing the different attributes that are going to be associated with our data coming in for these tasks back down here we actually have our Loop that we're performing for each of these items so let's go ahead and add in each of these attributes associated with each item our ID the user's name is assigned to the status the title when it's due and finally our actions which just right now is a single link that says details so back in the browser we can see that this looks pretty good we have each of the tasks laid out here as well as their particular details but what I want to do now is filter these out depending on certain attributes that we have in here so I might only want to see the tasks that are blocked and in progress and the ones that have the due date of now or in the past so we should do is have some kind of header up here where we can have these filters laid out and be able to click on the ones that we want to activate so up toward the top of our component markup here I think right above the table element is a good place to have this so there's a few things that I want here I want a search bar I want some radio buttons to be able to easily pick dates that tasks are due at and then I want a list of filters for each of the individual statuses now what I could do for each of these is add the markup directly to this component but that kind of defeats the purpose of front-end Frameworks like view is we have the ability to split apart and compartmentalize our code so that we have these small components that really do one thing well instead of a bunch of things so instead for each of these I want to create a separate component that will hold the markup and some of the functionality and just emit back to this main data table component what we actually need which is the things being filtered out so let's start doing that now and we'll take each one one at a time let's go ahead and create these three components and just get them Bare Bones out and then we will add in their markup here and work on each one so our first one let's just call this searchform.view and we'll have a blank script setup and template in here just for right now we'll create another one for filter radios Dot View and then finally filter dropdown.view we can exit out of our main app view component we are not using that anymore and let's go ahead and add these three in to our main data table component so we have our search form our filter radios for the radio buttons and our filter drop down for the main statuses drop down and then I'm going to wrap these two and another div is to make the styling a little better all right perfect and if we go back to our main browser screen we can see nothing's changed and that's expected because we haven't added any markup to any of these components that we just created so let's go back and let's work on these one at a time we'll start with the search form and I like to start with a markup first because that shows what the actual style of the component that we're creating is we can work on functionality afterwards so that's looking pretty well we have our search bar here but it doesn't really look that good so let's go ahead and add some classes to this to style it up a little bit okay and how does this look a bit better okay perfect so now we need to add some functionality to this right now if someone types something in this search bar nothing shows up we're not filtering out the results based on what gets typed in here and we need two things for that to happen we need to capture the input that's coming from this search bar and then we need to perform an action on our data table component to actually filter out the items that are in this items array and return back only the ones that match a certain string that we are typing in so the first thing that we need to do is capture the input of this search bar and for that we can use the input directive from view which is just a short code for V on input and this expects a function name that will be ran whenever anything has been added into this text box and we can just call this something simple like sir search so then we need to create this function up here at the top we can say const search is equal to an event and it's a function so now we have access to this event we can pull what's been typed in by using e Target value so if I go ahead and console log this out and then back in the browser I open up my console log and I start typing we can see each time the input was changed for this box the function was fired off and we have that value displayed down here in our console log so what I want to do now is give that value back to our data table component so that we can filter out the items that are in our table and to do that we use something called emits in view what that means is that a component emits up an event that the component that is utilizing that original component can listen to and react to so our search form can have some kind of event that the data table listens to and then reacts to it to filter out these items and this emit could be anything you name it yourself for our search form it makes sense to stick with convention and say that we are emitting a search event so we can say emit search and then provide it as the second argument the value we want to Bubble Up in these components which again is that e Target value now we see here that emit doesn't resolve to anything and that's because in view we need to create an emit object that holds all of the emits that are going to happen for a particular component so we say const Emit and the value of that is the result of a Define emits function this takes in an array of strings that are all of the events you want to emit from a particular component for us that is just search so now if I save this on our data table component we can listen for this event just like we do with Native events like at input here in our search form we listen to them with at and then whatever the event name is we can see that it's Auto completed to search here so add search and then we want to do something just like we did in this search form so we can say okay on a search event let's handle a search and then in order to have this resolved we'll need to create this function const handle search and the argument that gets passed through to this function is just the value that was provided back when we were using emits in search form so it should be the text that is in that box so again we can just call this the search and now we need to do something with this value that is stored here so in view we have this function called computed in view 2 it used to be a computed property in our script tag but now it's a function that returns a result so we can set that to something like filtered items and it is the result of the computed property which returns back an anonymous function now what we return in here is basically constantly regenerated based on new and dynamic data throughout the rest of the component so for instance let's say that in here I want to return back the items that have a status of blocked so first I need to set the Define props property to cons props that way I can use it in the rest of the component script tag and I can say all right I want to return back props dot items filter item where item dot status is equal to blocked so now what happens is I have an array that I can use throughout the rest of this template that will update by itself automatically if these items changes at any time inside of the main component that is sending them out so remember initially we have no items in our app.view file the items ref is set to an empty array so whenever this filter runs we'll have back an empty array because there's no items there regardless but then when that array gets populated this automatically runs again and filters out only the items that we need and all we have to do is just use this value somewhere in our component so instead down here instead of saying oh I want four item in items the items prop that we're getting passed in here we can say for item in filtered items so now we are using the computed property that gets passed in so we should only see the items that have a status of blocked and sure enough back in our browser we are only seeing items that have a status of block now what this means is that we can conditionally build filters based on different attributes in the rest of this component and be able to dynamically create a data set that's displayed based on the value of those filters so what I mean by that is let's let's get rid of this line that we have here and going back into our search bar so let's take the value that we're getting from the search element and use this to filter out through some of these items that are passed into us so first I need to save this state of this search filter or this search bar somewhere in this component so that we can use it somewhere else so let's just call this cons search filter and we'll set it as a ref to an empty string for now whenever we get a search event in from this input I'm going to set the search filter value to the value of this search that comes in so now because this is dynamic anytime that this search element is adjusted I can use the search filter anywhere else in this component and it will update things automatically so for filtering items let's say that if our search filter dot value does not equal an empty string so we don't want to run this if the string is empty that doesn't make sense I want to return back items filter and then for each individual item if that item's title includes the search filter value or the item user name includes the search filter value okay otherwise I just want to return back the full items prop so now let's go ahead and see how this looks so okay back in our front end you know we see all of the data that's coming through here just fine but now if I type in a name here we can see that we are automatically getting back only the data associated with either the name or the title that includes this string and if I clear this out we see everything again so this is how we're going to conditionally build more and more filters is by using this computed property here so filtered items is whatever other filters is included in this component just going through the props items that we are getting in here and filtering them out based on the needs or the values selected throughout the rest of the component so let's continue on and let's go ahead and add these radio buttons instead so we are done with our search form component that looks great let's move on to our filter radios component and so again we're starting with the template first we're starting with the markup I want three radio buttons to show us either the data from All Dates past due or tasks that are due today so let's go ahead and create these three radio buttons okay I hope you don't mind I just pasted these in with the styling already set up we have three radio buttons one with the value of all one with the value of today and one with the value of pass to show all items the ones due today or the ones that are past due now we need to add some functionality to these so just like we did with the search form component I'm going to capture the events that happen whenever one of these uh radio buttons is selected and then bubble it up using an emits so that the data table component can listen to that save that filter and then react to it in our computed property now for each of these radio buttons we can use the at change event so for a radio button it's whenever this is checked it will fire off this function in here and we can just call this function filter so at change filter at change filter and at change filter and then we'll also set a default state to this one too so by default we should have the show all on so I'll just set this checked attribute in the radio button element and now we need to create this function so cons filter is equal to an event and then we need to emit we'll emit out a name also called filter and we can set that to e Target value which will emit out the value of each of these radio buttons so it'll emit out all today or past and just like before we need to set this emit so cons emit is equal to Define emits and filter is the only one that we have now let's go ahead and go to our data table component and we can go down to our filter radios component here and we automatically have this Auto completion so at filter handle radio filter and create this function so back in our script cause handle radio filter is equal to filter and it is a function that we now need to set a different value just like the search filter we'll create it something called radio filter I hope you can kind of see where this pattern is going so we are setting a property in the component we are reacting to an event and storing a new value for that component so radio filter value is equal to the filter that comes in from these radio buttons and now we have to react to it in our computed property to narrow down the results in our data table so for our radio buttons I feel like we can use a switch here and say switch radio filter value and on the case of today we want to have all of the items that are due on this particular date and then case uh pass show items past due and we don't need to handle all because that's just the default amount of items but this is where we kind of get into a tricky situation here is that so if the search filter value is empty we're returning immediately these props that are filtered out but we also want to be able to activate the radio buttons as well and then later the drop down for the status is what we need to do is set an intermediate variable and then conditionally go through and filter out these items returning back this variable storing these items so we can just say let items is equal to props items so this is the initial value we get in here and it'll still be reactive based on these props items because we're using that in this computed property so now instead of down here instead of us using props items we can return back items filter but we don't want to return it back because we don't want to end this function early so we can just say items is equal to items filter and then down here at the bottom we can return back that intermediate variable so now here we can again filter out by the items and just just kind of keep filtering out this intermediate variable so we can say items is equal to items filter item new date item do at dot get date is equal to new date dot get date so this will filter out items based on the duat attribute of the the date itself specifically is equal to today's date so that'll only filter out the items that are due today and for past two we can do something similar where items is equal to items filter item new date item due at is just less than new dates okay now all this should be working so let's go ahead and see it in action now back in our front end we can say all right just the items due today and we get back these three and the ones how about how about the ones past due we get back everything that is due before today's date which is right now the 3rd of October and then showing all shows everything and the cool thing is that because we're using uh the intermediate variables that we can say all right the ones do today but how about the ones just assigned to Lenny well we get back just one so we have both of these filters activated at the same time all right let's go back into our code and we can finish up with this last component of filter drop down for check boxes based on the status of each of these items okay so like with our other two components let's start with the markup first okay so I created some basic markup in here we have a button that says filter and then we have an absolute div down here that's going to be the actual drop down status list in this UL element here and looking on the front end we see that it's just a button here but the status is always open right now this this drop down is always open so the first thing that I'd like to do is be able to toggle that on and off so let's go ahead and create a new ref and we'll just call this show and by default it's set to false so now we can say all right V if show so this will conditionally show so now it's it's off but we want to be able to click and toggle that on or off so for the button we can just say at click we say show is equal to not show so this will toggle it on between on the the on and off State for the the show element here and now we can conditionally display that drop down but now for the actual drop down items this is where things get a little tricky so I want to be able to just keep them as an array up here that way I can easily Loop through them down here and I can add new status options if I want to but I don't know if I want to hard code them in here because that could change from what comes in through our API what I'd like to do instead is pull the statuses from our actual items so back in our data table we can create a new prop for this filter drop down so we can pass in the items that we have in our props items so we are seeing the same items in the filter drop down component as the data table component sees I just need to set that as const props is equal to Define props items is an array type and it is required but now how do I Loop through each of those in our list down here well just like we saw in the data table what we're using to filter this data out we can create a new computed property called statuses and what I want to do is return back a list of just the statuses from each of these items that gets passed into us but as a unique array I don't want like you know if there's four items with the block status I don't want four blocks in this array so what I can do is say return items map item and I just want to get the item status back so each array in this um actually sorry this is return back props Items Map so now each item in this new array is going to be a status from these items that are getting passed into us but again remember this is not this is not a unique array here it's going to be every status from every item so instead what I can do is create a new set which should have unique values in here and if I wrap this in another array and then use the spread operator here I should with this one liner get back just unique attributes from these statuses in our items array now we actually have to use this so let's go down here into our list and populate this with list items where each one is a status name and then a check box to where we can filter out through it if we want to okay so we have our input which is a type of check box and the value has been bound to this status that we are getting back in this computed array I also set these IDs and fours here because that way it just makes the front end easier to click on the checkbox we can click on the label instead and that's set to the status coming through so on the front end what this looks like is our five different statuses that we can have in our all right here actually let's get back to this original state okay so yeah we have the five different statuses that are set to or available to these tasks that we have in here so now what I want to be able to do is kind of Click through these and conditionally set a filter based on what um statuses we have checked so just like our other two components what this means is reacting to an event from this checkbox and then bubbling up that event to our main data table component so we can say all right change just like our radio button and we can say filter so again we'll add a filter function here and we'll just emit filter the target value and then remember we have to set these myths as well so we can we'll just add this here con submit is equal to Define emits filter so now back in our data table component we can use add filter handle check box filter and then create the function for that as well now unlike what we did up here earlier where we just store a particular filter as a value and then Loop over it in our computed property this is a little different because we need to store this as an array and then go through the array in the computed property so what I'm going to do instead is I'm going to create a another filter so we'll call this statuses filter and this is a ref that has a default value of an empty array what I want to do is push or toggle a status to this array depending on if a checkbox has been checked or unchecked so we can say you know status is filter value push and we can just push the filter to it but what that'll do is each time the check box is unchecked it'll push the same value to this ref so we need to check if it is set first so we can say all right if status is filter value includes filter then we use status filter value splice statuses filter value index of filter and one and we can use return statements on this so we don't need to use an else and so now what happens is we have an array that consists of filters based on how many check boxes have been checked from our filter drop down component now we can go ahead and use these up in our filtered items computed property so let's go ahead and add these underneath our radio filter we can say items is items filter and where the item's status is part of that status is filter value ref array so if it includes item status now if we go back to our browser we see a little bit of a problem we don't see any tasks here anymore but if we click on these filters do we see them now we do and the filters are working as expected we can click and add as many as we want or take them away but the problem is is that when we have no status selected we see no tasks what I want to do is conditionally render this only if the status filters actually have statuses in them so let's wrap this in a conditional if status is filter value length so only if we actually have statuses to filter out is this going to fire so now by default we see all of them and now filter them out conditionally based on their statuses so yeah our board is complete we can check a couple of these boxes let's say we want tasks that are blocked planned and started that are past due and we can even filter this down even more by typing in part of the title so yeah we learned how to put together a dynamic table that automatically filters data based on different attributes using Vue if you have any suggestions for video topics that you might want to see in the future you can also let me know in the comments or I have a link in the description to send me ideas directly and as always thanks for watching