Highlight: Join columns in Table View

AppGini Helper JavaScript Library / Highlights of the day

Sometimes the number of visible columns in a table view becomes too large. Then we begin to hide unnecessary columns. But that has its limits if we need and want to display certain columns. I show here how I merge the contents of several columns into one column.

Table View

Definately there are too many columns. A few are too small, a few are empty. The browser starts wrapping headers and content for best fit. But for my personal taste this does not make it look better.

Some columns belong together, for example there are tuples or triplets of columns like (created_by and created_on), (modified_by and modified_on), (assigned_by, assigned_to and assigned_on), (finished_by and finished_on).

Also those six lookup columns take a lot of space although only three of them contain data at all:

Idea

My idea was that I could bring these columns together, for example turn those two columns created_on and created_by into one.

So, I have written a function named join() which will be available as BETA for testing purposes in next version of our AppGini Helper Javascript Library.

Code

jQuery(document).ready(function () {
  AppGiniHelper.TV
    .join("created_on", ["created_by"], "Created")
    .join("partner_id", ["project_id", "contact_id", "machine_id","calculation_id", "calculationitem_id"], "Zuordnung");
});

The join() function takes two or three arguments. First is the field name of the target column. Second parameter is an array of field names which will be appended to the target column.

There is an optional third argument for re-naming the column (header) of the target column.

In other words, the code line above means:Append the column created_by to created_on and replace the header of created_on by the string "Created".

Result

I have grouped certain columns in one column. This allowed me to delete some columns. Overall, I find the table tidier than before.

Tuples / Triplets

Columns created_on and created_by have been merged into created_on and labeled "created" (DE: Erstellt)

Joined lookup columns

There is only one column left, containing the filled values only.

Complete code

This is the code for joining then columns in this example.

AppGiniHelper.TV
  .join("created_on", ["created_by"], "Erstellt")
  .join("modified_on", ["modified_by"], "Geändert")
  .join("assigned_on", ["assigned_by", "assigned_to"], "Zugewiesen")
  .join("finished_on", ["finished_by"], "Erledigt")
  .join("partner_id", ["project_id", "contact_id", "machine_id","calculation_id", "calculationitem_id"], "Zuordnung");

Note that the second argument is an array of field names. I can pass multiple field names and all of them will be appended to the target column.

Comparison

Default

Joined

Sorting

When renaming the header i make sure that the sort function is retained. Ascending or descending sorting is applied to the original data of the target column.

Do you like it?