create a table with vertical headers

Hi Team,

I Need to create a table with vertical 8  table headers and two horizontal Headers
Could anyone please guide me with the style classes and design. i am attaching a sample from the prototype. Kindly have a look.

Hi Saif,
The Widget table, It is not possible to indicate a location to the header of the table.
Header_Row_Widget

If you wanted that you could create a reusable block for other occasions that require that functionality.
But keep in mind that the scrool would come out laterally and not horizontally.


I recommend that you group the values in the first column indicate the grouped value.
For this example I grouped all my activities and the consumption, time and speeds that I have.es un query complejo.



Greetings.

mvp_badge
MVP

Hello Saif.

If your table will always have 2 columns and 8 rows, you can just configure manually each cell.


For tables with multiple rows, apparently it can be done with CSS. Take a look on this example and see if you can adapt it to OutSystems.

https://codepen.io/veekungx/pen/MWgvBxe


Hi Saif,

you can create a Weblock that receive a List as input. This List can be a List of a custom Structure that just have 3 Text attributes, like below:

  


Then you can have a container for the fixed Header (titles) with something like:

.TableHeader{
  height: 50px;
  width: 100%;
  border: 1px solid #E4EAED;
}
.HeaderDisplayFlex{
  padding: 0px 16px 0px 26px;
  display: flex;
  font-weight: bold;
}
.DisplayFlex{
  border-bottom: 1px solid #E4EAED;
  display: flex;
  height: 50px;
  padding: 0px 16px 0px 26px;
}

For the Label_Header (and Label) containers set width to 20%. For the other columns (Col1_Header, Col2_Header, Col1 and Col2) set width to 40%. All these 6 containers must also have the Style Class "vertical-align".

Use the standard list widget using the input variable (which I called "List") as source.

The expressions will be the List.Current.Label, List.Current.Col1 and List.Current.Col2.


Just be sure to have the source with the list that has the info you want (might be from an Aggregate or Data Action). 

If these will be always fixed values, you can use OnInitialize event to do a bunch of ListAppends with the info you want (one ListAppend for each line you want).


It might also be useful to check what is Scaffolding and how fast OutSystems can build things for you ;)

https://www.outsystems.com/training/lesson/867/scaffolding-and-richwidgets/

 

Hi Fábio Godinho ,
This indeed seems to be the solution. Let me work on it and get back to you..

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.