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

Common table for different data

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 article we will add settings for sorting, filtration and will add a new entity.

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