Learn Material Design in Angular. Tables, part 1

We’ve all seen data tables before, but what is the proper way to use them? Well, according to Materium data tables are meant to show lots of data in a format that’s easy to scan, identify patterns, and draw conclusions.

You can use additional tools to help visualize data such as filters and sorting. And these tools should be available on top or bottom of the data table. Data should always be presented and organized in a sort order that’s obvious to the user.

Don’t create a table with only two columns. There are other ways to show key value relationships than a data table. If your table allows multiselection, use a checkbox in the first column.

Also learn Node js design patterns

If your users can drill into data, it’s good practice to highlight the row on hover. Let’s add a data table to our orders application. In Visual Studio Code, let’s go ahead and Command + P and open the orders.module.ts file.

And we’re going to go ahead and import what we need for our data table. On line 15, let’s import the MatTableModule from @angular material table. And let’s go ahead and right above this, let’s copy this line and add it again above. And now we need to add the MatSortModule which is going to give us the ability to add sorting to our table.

And that would be client side sorting. And now if I scroll down to the imports, I’m going to go to line 31, and let’s go ahead and add the MatTableModule here. And just above this on line 31 we’ll add the MatSortModule.

Now that we’ve done that we can go ahead and add the table to our component. And now, since we’re working with data tables, we need to create some data. So let’s Command + P and let’s go to the order list component, that ts file. And we’re going to import some stuff here. So on line two, let’s go ahead and import the MatSort as well as the MatTableDataSource from @angular material.

And then let’s go ahead and create a const on line four. And we’ll just call this element data and I’m going to make an array here. And we’re not going to use a special type, but you might want to actually create a class to represent this.

And I’m going to create some data, so we’ll have an order date, which is new date, and order number, which is 100, a total, which is 29.99, a description, which we’ll just put two pounds of tuna, and is checked false, we’ll just initialize that. Now I’ll take this and I’m just going to go ahead and copy and make two more of these so we have some data here.

And I’ll just go ahead and change the order numbers. We’ll make this 101, 102. I’ll change the prices on line 15. And then I’m going to change the description and I don’t want these to be in order, so I want to be able to make them so they’re different so I can sort in different ways.

Now that I’ve done that, I need to create an array for the display column. So I’m going to scroll down back to our order list component class. Let’ go ahead and make an array here called displayedColumns and I’ll make a string array. And we’re going to go ahead and put our columns here.

So I’m going to use actions, that’s going to be our checkbox column, order number, order date, description, and total. And I’m going to go ahead and create a data source below this and we’re going to initialize that as a MatTableDataSource and we’ll pass in our element data there. And then the next thing I want to do is in the ngOnInit, I want to initialize this.dataSource.sort = this.sort.

And I’m going to go ahead and need to create that sort as well, so on line 37 I’m going to create a ViewChild, called MatSort, which is a MatSort. Now that we’ve done that, let’s go ahead and return to the html and add the elements we need for a data table.

Let’s Command + P and go to our order list component .html. And you see here on line three, we have a paragraph that says Eager fetched. Let’s just go ahead and clear all that out completely.

And let’s go ahead and add a couple items inside this tab. I’m going to add a order actions div. I’m going to add a order container div as well, and that’s where we’re going to put our table. So let’s go ahead and create a table element inside here, just an html table with the MatTable directive. And we’ll assign the dataSource equal to our dataSource. I’m going to add the MatSort directive and the multitemplateDataRows directive, ’cause we want to have hovering eventually.

And now I need to create some containers for our actual column. So let’s go ahead and create ng container and I’m going to create a MatColumn definition for this and we’ll call it action. And since we have five columns, we’ll go ahead and copy this and make this four more times. And I can Command + P for that document to clean that up. Now let’s go up to the first one, action, let’s go ahead and add a th element, which is our header.

And I’ll use the mat header cell directive, use the MatHeaderCell definition, mat checkbox, put that checkbox in that first column. And on change, we’re going to go ahead and call something called selectAll. And then below that I’m going to go ahead and create the cell template, I’m going to use the mat cell directive there for that first column. We’ll give this a name, this is going to come from element, which is going to be the iteration of everything inside that data collection, and let’s go ahead and put a mat checkbox in here as well.

And we’ll set the state of this checkbox to element.isChecked. And lastly, I want to create a footer template as well. So we’ll go ahead and create a mat footer cell and I’ll use the MatFooterCellDef directive here and we’ll save that. Now I’m back into the next columns. We actually want to show some data now. So I’m going to go ahead and copy our header cells and let’s paste this down here into lines 19 through 25 and now we’re going to change the way this works. Now I don’t want to have a checkbox as the header, I actually want to have a header.

So we’re going to go ahead and change the way this works now so let’s add the mat sort header attribute to this th and I’m going to call this order number, and I’ll clean this up a little bit. And now we’re going to change the way that the element works, instead of a checkbox, we’re just going to display element.orderNumber. And I don’t want to have anything in the footer for this one. So I’m going to go ahead and clean this up. Format document and I’ll copy all of the inside here and we’re going to go ahead and do that again below.

And we’re going to change this column definition here actually on line 18 that should say orderNumber and the next one down’s going to be our order date. So we’re just going to call this the date of the order and we’re going to change the way this displays so instead we’re going to do element.orderDate and we’re going to pipe this into date to give me a better looking date. I don’t want to show the raw time or anything. And now I’m going to go ahead and copy this from line 27 to 31, we’ll paste this into the next column, which we’re going to call description.

And I can go ahead and get rid of the piping into the date and just put description there. I’ll change the header on line 36 to description. I’ll copy this again, the inside contents, paste this into the next column. And this is going to be our total column. And I’m going to go ahead and use the total here and I’m going to pipe this into currency to give us some good formatting. And eventually I’m going to want to show a actual total, a grand total, down here.

So for now, I’m just going to go ahead and put $100 until we actually wire that up so it works. So now just below the ng container here, I’m going to go ahead and add a couple rows here. So let’s go ahead and create three rows. These are going to be for our footers and we’re going to say this is the mat header row, matHeaderRowDef = and I’m going to use displayedColumns sticky:true and then next I’m going to create the basic row template.

Mat row matRowDef = let row and then I’m going to say columns.displayedColumns which is going to grab those columns that we defined earlier. And I’m going to create a mat footer row matFooterRow definition = displayedColumns, use a semi-colon there, sticky = true. And I’m just going to look at this and see if I like the way it looks. And I think we’re good.

I’m going to add a semi-colon there on line 52 as well as line 51 and 53. So we have sticky = true, columns = displayedColumns. Okay, sounds good, let’s go ahead and save this. And let’s see what we need to do. We’ll probably have a couple things to fix. Okay, and everything compiles well, so that’s good. Let’s go to Chrome and let’s just refresh that page. And we’ve got some errors, that’s what we thought we might have. So let’s go look at the console and figure those out. Mat checkbox, I have not imported that.

So let’s go back to Visual Studios Code, Command + P and let’s go to the orders.module and we’re going to import that checkbox component. So that’s going to be right here. Import MatCheckboxModule from @angular material checkbox on line 12. I’ll copy that, go down to our imports and we’ll put it in order on line 29, save that. Refresh the page, and let’s return now to the Orders page. And it looks like we’ve got another error.

So let’s see what our next error is. I have a duplicate column definition action, so let’s fix that. Let’s go back to our html and you see here I did not change this to total. And let’s see if there’s any other duplicates. I think we’re good, save that. Refresh the page, and column with id actions. And let’s go back to our orders list component. I think I missed name this actions, it should be action singular.

And now we have a table. Okay, well we have something here. It needs a little bit of styling, needs a little bit of work, but let’s clean that up. We’ll make it look better.

Leave a Reply

Notify of