Data tables

Tables are one of the key aspects of designing complex behind-the-login screen functionalities. I say behind the login screen, because that way, the search engine optimization debate won't come into the picture. The problem with traditional tables is that we need to map the data, rows, and columns ourselves, along with implementing pagination and responsiveness. Thanks to Angular Material, we can now have all of that generated for us with just one line of command. That's right, you read it correctly—with only one command, when we use schematics. Run the following command, and we should have our data table ready in no time:

ng generate @angular/material:table issueList

We use the ng command to specify to the schematics with which we want to generate the table from Angular Material, and that it should be created in a new component named issueList. Upon the successful running of the command, we should see the output shown in the following screenshot:

Run the app using the ng serve command, and navigate to the route of the table. We should see the output shown in the following screenshot:

Voila! We now have our dynamic table ready to use. We can customize the data source values and the columns that we need to display and update the pagination just using the configurations in our component class. Go ahead and give it a try.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.141.31.240