Learn Material Design in Angular. Tables, part 2

To give our table in material design the look we want to have, we’re going to Command P, and go to styles.css, and just below the example tool tip, we’re going to go ahead and add a new definition for the table in material design element, which should be width 100%, and I’m going to go ahead and add some styling for some of the columns and rows, so my sortable header, we want that to be black.

My mat footer row, we want that to be bold. Our mat table sticky class, we want to have a border of e0e0e0, and we want to add some hover colors.So on hover of our rows, we’re going to go ahead and hide at those with F5, and we’ll copy that down to line 31, and we’ll say when the row is active, which means selected, we’ll want it to be efefef.

Save that. Let’s go back and refresh the page, and you see our table looks much better now. What about these columns? Notice my descriptions. I can sort now. This is a client side sort. I can sort on the prices, as well. So it’s coming together pretty well.

Also learn Node js design patterns

What we don’t have yet are actions, and I don’t have the select all working yet. But I have a table now with client side sorting, and I have a footer row that’s sticky on the bottom. Let’s go ahead and add a little bit more functionality to make this table even better.

Returning to Visual Studio code, let’s Command P and open the orderlistcomponent.html, and let’s find that order actions div that we created before, and let’s create some buttons in here. There’s going to be actions on these tables. We’ll use the mat button directive, and we’ll say that the color is primary, and we’re going to make a delete.

I’ll copy this. Put one more below it, and we will call this one archive. And the purpose here is to show how we might put multi-select actions on a table. Now remember I put the select all code here. Well, that actually doesn’t do anything yet ’cause we never implemented it.

So let’s go ahead and go to the Command P orderlistcomponent.ts, let’s make that little function here. So now I will say select all. Line 45 and I’ll say for var elm of element data. I’m going to set the is checked property equal to the opposite of whatever it’s currently set to.

So that, we’re just working like a big toggle. We’ll just set everything on and I’ll set everything off. Now we’ll save that and now I need to go back to or list component, actually bind those check boxes to that property. So right now I’m checked, element is checked, and I may already be have done it, so let’s go ahead and look at the page and see how it works. There we go.

I can check and I can uncheck everything, and I can delete this whole section if I want or archive these rows and it’s really clear to my users how that should work. Now, obviously, this isn’t exactly how you’d implement this because I can’t create some weird scenarios where these numbers are not going to work out correctly.

But you could see how to apply actions here. So let’s go ahead and do one more thing here. Let’s Command P to the order list component style sheet, and let’s add one little bit of flair just to make this look really good, and then we’re going to walk away from it. Order actions and I want to another class called order container. Notice there’s a dot ’cause these are classes.

So the margin top on my action is going to be 20 pixels, and I want to set an overflow container of auto, and I want to set a height of my container to 400 pixels. If I save this and I go back to my orderlistcomponent.ts, let’s just copy our data and let’s just duplicate it.

So we have lot’s of data to show here. So I’m going to copy from lines five all the way down to lines 25, and we’ll paste that in there. We’ll save. I’ll go back to the application, and now I actually have a lot more data showing up in here, and if I were to shrink this down a little bit, I can actually, let’s get some even more data, let’s copy that again.

I’ve actually got a fixed bottom and top row. You see how the $100 stays fixed and the top stays fixed as well, and I can highlight and I can delete everything if I want to, or I can change those actions to be however I want to work with my data.

Leave a Reply

avatar
1000
  Subscribe  
Notify of