DataTables vs. Data Tables
If you've been developing for a "while" like I have (so you also feel old), there's a decent chance that you've used jQuery
on the front end (or still use it) and thus have made use of jQuery DataTables
for your "greenfield" (new code) projects to create SPA (Single Page Applications), which many would agree is the best approach.
So, how would you use Data Tables (two words) in Angular Material
to create tables that function like these jQuery DataTables
on my site? Let's go through how Angular Material Data Tables works, how it compares to jQuery DataTables, and how to create similar elements with the same data.
To get some "housekeeping" out of the way, all of the examples on my my "old" (it really is old) site use the Employees Sample Database
, which as I noted there is used on the jQuery DataTables site as well. To use that data with this example, I retrieve it from an API
I wrote in Laravel Lumen
, but obviously you can use any API and database you want to get data into your Angular project. I'm also going to assume basic knowledge of Angular 7, including HttpClient
. I would also highly recommend you take a look at the CDK table documentation
on the Angular Material site (which I missed/skipped the first time I read the docs due to the fact it's pretty much mentioned as an aside) as I found it pretty vital to get a solid understanding of how exactly Angular Data Tables work and how to customize them.