Photo by Lukas Blazek on Unsplash

Tables are widely used in Web Applications. There are already a few pretty good options, such as Material Components and AG-Grid. If you are seeking something simpler, a more user-friendly and visually attractive alternative to the traditional HTML table, then this post could be just what you need.

We start by creating a simple HTML structure for the table.

We have created a few containers that will hold columns, rows and action buttons - allowing the user to switch between pages after we implement pagination.

The ui-table component takes columns and data that will be displayed in the template.

Sticking to the simple HTML structure we have created before, now it is time to create and then map templates to row and column containers.

In this case, we are passing templates using 2 directives, tableHeader and tableBody.

Template on the directive can be accessed via the ContentChild decorator. Then using ngTemplateOutlet we tell Angular which template and data to use in the ui-table component.

If we add some styling to this, our table currently looks like this:

ui-table before Pagination

We also add pagination to complete our minimal table setup.

A page indicator and buttons to switch to the previous and next pages are added to the template. Pagination logic is handled by the ui-table component.

Final Look of the UI Table Component

I hope you found this post about creating a custom table component helpful.

💡 Tip: Once you’ve created your table component, you can use an open-source toolchain such as Bitto “harvest” it from your codebase and share them on bit.dev. This would let you reuse your table component across all your projects.

Learn more here:

You can find the Stackblitz demo below.