Make a Generic Angular Table. Represent New Data in Easiest Way.

Common table for different data

Yurii Kuznietsov
Apr 8 · 4 min read

Problem

In many cases the best way to show data to users is to use a table. At first you’re gonna probably copy and paste code for one table to another and adjust this table to your needs. If you will go by this path eventually you will find yourself in a project with a lot of almost the same tables. Them you will need to add one feature in all tables. This task will take a lot of time and will become a nightmare. You definitely don’t want to do this type of task.
What a solution to this problem can be? Flexible table is our savior. Imagine one table that is easy to set up and will be flexible.

Plan

Our goal is make a flexible table that we can set up from outside by using logic of base class and inheritance. We will have a table component, models that help to set up the table and base table service that will do almost all the work. When we need to set up a new table we will override the couple method in the delivered class.

Every table has two important things in it, columns and data. When we look in clean html code we can see identical code with different data inside.

Model

First step is define a column model with all settings. Basically the model will contain information about property name, title, width, type of cell and unique identifier.

In our table we will show a simple student list.

BaseTableSettings

Our main class will be abstract because we want to force the deliver class to override methods that will give us column settings and columns order. Those methods give us flexibility to change the order or column settings independently.

On row 8 we have an interesting class — ColumnBuilderService. That service is make table columns for the html table. I put logic of creating columns in a different class because I think it is better to have a couple of classes with one responsibility.

ColumnBuilderService

Column builder makes a couple checks, to be sure there are no duplicates and we have all settings that we need to make a table, then it gives us an array of columns that we want to see.

Component

Now it is time to make a component that will contain our generic table.

CSS

Css is simple, just add some styles to make it a little bit fancy.

HTML

Angular ‘for’ cycle is our savior. Those cycles make all the work for us. We just need to take an array from table settings.

TS

In TS file we define input to set data and implementation of base settings.

Implementation of base table settings

In order to make code clean it is better to create an enum for representation of column keys. Our student table settings class overrides methods to return an array of column keys in the right order and an array of column settings to represent data how we want.

Result

When we need to add a new column we just add a new entity to the array of columns settings and put a new column key in columns keys array. If we need to add a new template for columns we need to add it in a component and give it a unique name.

In next we article we will add settings for sorting, filtration and will add a new entity to be sure this table can handle that.

Originally published at http://tomorrowmeannever.wordpress.com on April 8, 2021.

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Yurii Kuznietsov

Written by

Full-stack developer. In my work I use Angular and C#. In free time I write articles for my blog http://tomorrowmeannever.com

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store