Angular CDK Data Tables

Key Takeaways

[Music] what if there is a way that you could capture all the benefits of annular material but customize the behavior and styling in an unaffiliated way well that's exactly what angular's component development kit does in today's video you'll learn how to build a reactive cdk data table that implements its own custom behaviors and also uses bootstrap 4 for its CSS styling if you're new to the channel make sure to LIKE and subscribe and the code for this video is produced by Zack DeRose who is a senior team lead working on angular over at Swamp Fox Inc make sure to check out his full article on medium because it goes into some advanced stuff that I don't cover here such as searching sorting and applying styles on a cell-by-cell basis I'm starting out from the state regular angular 6 app and the first thing I'll do is install the component development kit which is at angular slash cdk then I'll generate a component called table from there I'll jump over to the app module and we'll want to import the data table from angular cdk then add the cdk table module to the imports array the first table we'll build is pretty basic and ugly but what it's doing under the hood is pretty powerful and without the cdk this would take a lot more code than it does in this video I'll be working with some dummy data throughout this video which I have saved in this data Ts file first we have an array of column names which just define the names of the columns in the table and then we have the actual data which is a map of various heroes and each hero has a set of properties that match these column names so basically this simulates some initial data that you might pull from a back-end database or API now let's jump into the component and start putting together this table I'm going to go pretty slow through this code because I want to talk about behavior subjects and observables because they're very powerful structures when working with tables a behavior subject is really useful when you have a value that you want to manually change over time they work just like an observable but they always have a current value and you can push new values to them and you can always get the current value in place which means you kind of have the best of both worlds between observables and just regular JavaScript what's also really cool is that you can use your behavior subject as a single source of truth that gets mapped to other observables for example we'll be able to map this heroes dictionary down to an array of data that we can loop over in our data table for each row and we'll build up to some more advanced use cases with that concept later in the video so if you want to take your single source of truth and map it to just a regular observable you can do that by just calling pipe and then adding some operators to structure it in the way that you need for the UI in this case we just want to map the dictionary down to an array of values which we can do with object dot values so now we have an observable array of data that we can loop over in the table you may have noticed that I was clicking a button in the table that was changing the values for a given row that's also made possible by the reactive nature of behavior subjects and observables we can grab the value of our behavior subject by simply calling value on it and because it's an object we can then grab the hero name that's being clicked on and update its values to level up the hero will simply increment each one of its properties by one from there we can compose a new object by using the spread syntax and taking that current value from the behavior subject then overwrite the value for the clicked hero so that'll be the next value for our behavior subject and everything else that depends on it will react accordingly and we can simply push that into the stream by calling next now we can jump into the component HTML and we'll see that the cdk gives us a whole bunch of different directives that we can use to bind our data to the table the most important one is the data source which is that observable that we mapped our behavior subject to in the type script the next thing we'll do is define the header row and because we already have an array of the column names we can just pass that in as the cdk header row definition after that we will make a definition for each actual row in the table and that's going to automatically loop over every item in our data source array now the last major step is to define the logic for each cell in the row you could loop over each cell or you can define them one by one since we have some custom behavior we'll just go ahead and declare each one of our cells one by one all we have to do is define what the header should look like then we have access to the underlying data object which is in the template variable of Rho so this cell will have a header of hero name and then the actual value will be the row name then we'll just go ahead and repeat this logic over and over again until we get to the actual cell that has the clickable button the special thing about this cell is that we're not actually displaying a value but instead we'll have a clickable button that will trigger that level up event handler that we define in the type script to level up a hero we need to know its name which we have access to through the row template variable which we can then pass in to our level up method as the argument and just like that we have a data table that relies on a single source of truth for its input which is a pattern that you really want if you're going to scale up in complexity just imagine trying to apply the same pattern and plain JavaScript or jQuery you'd have a lot more code to write but for your end users this is still a pretty ugly table let's see how we might add some better styling to it for that we'll use bootstrap for but you could use any other CSS framework or your own styles completely you can grab the CSS for bootstrap from the website and then paste it into the head of the document in the index.html file and angular then back in the bootstrap Docs you'll see a variety of different styles for tables pick whichever one you like and you'll also want a style for the button in that table as well so as you might imagine adding styles to our cdk table is easy as any other HTML table we simply add the class name and we're good to go so now we have a table that behaves like angular material but looks like bootstrap but I want to take this a step further and I want to highlight the hero with the highest and lowest health rating and I want that style to be updated reactively whenever the values change in this table let's see how we can leverage our existing behavior subject to handle this for us I'm also going to install the max by and min by methods from lodash to make this code a little bit more concise these functions are really useful if you have an array of objects and you need to calculate some statistics about a certain property on those objects which in this case we want to find that heroes with the men and health from there we'll go ahead and define a new observable called min max and this will be tied to our hero source behavior subject but this time we want to map it down to just the two heroes one with the men and one with the max health so what we're doing here is computing a value based on a single source of truth that will update reactively inside of map we can simply use lodash to find the hero with the max health and then the hero with the min health and then we'll just return the names of those two heroes so we can use them in our HTML now angular has a built-in ng class directive that we can use to easily update the styles based on this logic we pass ng class an object where the key of that object is the CSS class that we want to apply this class is from bootstrap which is BG success which will give the row a green highlight and then we'll unwrap the min Max observable and if the max equals this row name then we'll go ahead and highlight it then we'll do the same exact thing for the min value except this time we'll apply the BG danger which will give it a red highlight and that's all there is to it we now have reactive CSS Styles being applied to our data table if your tables have huge amounts of data then you'll probably need to paginate it so let's look into how we can further leverage rxjs to make a reactive pagination system to simplify the UI elements I'm going to use ng bootstrap but you could definitely do this from scratch as well first we'll install it via NPM then go into the app module and add it to the imports array there it gives us access to a pagination component and we just need to pass it a few input variables to make it work it needs to know the total size of our collection which is just the length of our data source array then it needs to know how many items we want to show on each page it also needs to know the current page which will also be a behavior subject when we get to the typescript and lastly it needs an event handler so when the user clicks on a new page it updates to the correct page and a little trick when you're using a behavior subject is instead of writing an event handler you can just call current page next with that event as long as the event is what you actually need to send in the stream and the last change we'll make is set the data source to a new observable called data on pages which is a slice of the actual values that we want to show so we'll need to add a couple of new properties to our component to make all this work the first one is the current page which is a behavior subject and it's a behavior subject because we want to react to it and we also want to change it dynamically from there we have a data on page observable which will react to changes in the data source of Heroes and also the current page and lastly the page size which is just a number the hardest part is defining the slice of data that we want to show for each page we need to react to page changes so we'll go ahead and pipe an observable that's based off the current page behavior subject but the actual data source is the hero's behavior subject so we can use the switch map operator to switch to that data source so at this point we know that current page as well as the array of heroes and we just need to map it down to a slice to display on that page we can figure out which items to display on the page by taking that current page value subtracting one and then multiplying it by the page size that's the starting index then the ending index is just that starting index plus the page size and those are the two arguments that we'll use to slice the array if we go back to our data table you'll see that it's only displaying two items per page but it's also maintaining the styling logic that we set up in the previous step and again this is possible because we're using a single data source and having everything else react to a coordinate light I'm gonna go ahead and wrap things up there if this video helped you please like and subscribe and if you're serious about building angular apps consider becoming a pro member at angular firebase com you'll get a free copy of my book as well as one on one project support thanks for watching and I'll talk to you soon