27
Views
11
Comments
alignment of records in the table

How do to aligment the table records with head of the another tables ?

In attachment is OML.

OBS: I need keep the scrolls in the screen. 


ColumnAlignment.png
AlignmentRegisters.oml
2024-10-12 12-11-20
Kerollos Adel
Champion

hallo @Vivian Mattos

you can add this css in your page style or in you theme will make header and row in same width


.table-header th  {    min-width: 200px !important;}.table-row td  {    min-width: 200px !important;}



just as note : you set data source for the second table from category not from customer

UserImage.jpg
Vivian Mattos

Thanks @Kerollos Adel, but I put 100px and keep misaligned.
Could you share your OML ?


Is there any way to modify the table only in this acordeon? 

Because in this screen have others table and they cannot be modified.

ColumnAlignment_V2.png
AlignmentRegisters_V2.oml
2024-10-12 12-11-20
Kerollos Adel
Champion

@Vivian Mattos hallo , 

i Just add border to make width clear 

number 1 ==> width is enough For header ( after i update it to be 150 )

number 2 ==> not enough , so header extent and row not 


by adding max width  also can prevent header from extend 

min-width: 150px !important;    max-width: 150px !important;


2021-09-06 15-09-53
Dorine Boudry
 
MVP

@Vivian Mattos ,

the natural behaviour of tables is to adjust the width of each column to the data being displayed in it.  If you have to resort to giving the columns a fixed width, you are destroying that feature.  

The only proper place for a header is in the same table as the rows.  

Can you explain what problem you are trying to solve by having the header in a separate table ???

If it is just for being able to scroll the rows while keeping the header in view, there are styling solutions to do this within the same table.

Dorine

UserImage.jpg
Vivian Mattos

@Dorine Boudry 

I need that there is a space between the head and the below informations.

I need that each subitem don't show your head, the unique head that can exist is the head up there.

How do this some way more simple ?

EspacoTitulo.png
2021-09-06 15-09-53
Dorine Boudry
 
MVP

Oke,

I see, so you want multiple tables, each for a 'category' of rows, but not with multiple headers.  And you want all tables with the extra header table at the top be perfectly aligned.

I still think you can do this in a single table, holding category rows and normal rows, with different styling applied to each.

Let me see what I can do with your oml,

Dorine

UserImage.jpg
Vivian Mattos

@Dorine Boudry  I agree with you, if can use a sigle table would be perfect.

2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi,

I'm not going to work with your OMl, it has too many flaws (like no reference attribute between cargo and customer), so I think it needs a lot more work than just drawing a fancy table.

But when you are ready, you can look at the screen 'demoWithLevelsInData' in this OML for some inspiration. A lot is solved with classes, so you'll have to look around a bit.

Dorine

QDR_LastRowFakeFooter .oml
UserImage.jpg
Vivian Mattos

@Dorine Boudry Thanks, I was able to use only one table. 
How could I collapse and expand it? Or hide the line colapsed ?

Fruit2.oml
2021-09-06 15-09-53
Dorine Boudry
 
MVP

You would need these things for this, if you want to keep it to 1 table :

  • the information which 'child' belongs to which 'parent' row should be incorporated in the row details, see the extra attribute CollapseKey
  • a state for each row, whether the group it belongs to is collapsed or expanded, see the extra attribute IsCollapsed
  • some icons on only the rows with IsCategoryRow true
  • a client action propagating the IsCollapsed value to all the rows with the same CollapseKey
  • a dynamic class on some item inside each row, only being set when it is a collapsed item, but not the parent row
  • some css making a row holding that class display:none

See attached OML


QDR_LeveledTableWithCollapsibleParent.oml
2021-09-06 15-09-53
Dorine Boudry
 
MVP

Here's a post where I gave an OML to make a table scrollable with the header staying in view.  The OML does much more that that, so take your time exploring it and finding what you need there.


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