Angular Data Tables for jQuery DataTables Developers

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 (all one word). There's also a decent chance that you're moving to newer JavaScript (well, TypeScript, in this case) frameworks such as Angular 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.
With all that said, let's move on to a simple example.