feat(ui5-table): adding horizontal column alignment #9228
Conversation
There was a problem hiding this comment.
FoA, there is no more Grid but Table you need to solve conflicts.
Also I am not sure if I liked the idea of looping over all cells in every rendering this could be solved with custom css properties.
Another one that I am not sure yet is letting every cell to decide their own alignment?
| @@ -31,6 +31,9 @@ abstract class GridCellBase extends UI5Element { | |||
| @property({ type: Boolean }) | |||
| _popin!: boolean; | |||
|
|
|||
| @property({ type: String, defaultValue: "Left" }) | |||
There was a problem hiding this comment.
type should not be String but Enum
There was a problem hiding this comment.
See main/src/types/TableOverflowMode.ts as an example, if you need one
There was a problem hiding this comment.
this line needs to be adapted after a rebase from main according to #8846
| @@ -18,4 +18,23 @@ | |||
| :host(#selection-cell) { | |||
| width: auto; | |||
| min-width: auto; | |||
| } | |||
| :host([h-align="left"]) { | |||
There was a problem hiding this comment.
I do not get this css here? Why should every cell attribute override the custom css property? Why we need a custom css property here?
There was a problem hiding this comment.
Why not just set the css variable in onBeforeRendering of GridCellBase/GridCell? See Grid.ts line 307
| this.rows.forEach(row => { | ||
| const cell = row.cells[index]; | ||
| if (cell && cell.hAlign !== header.hAlign) { | ||
| cell.hAlign = header.hAlign; |
There was a problem hiding this comment.
so there is a public property in the table cell but we override from the header? Then what is the idea of having a public property on the table cell?
| @@ -31,6 +31,9 @@ abstract class GridCellBase extends UI5Element { | |||
| @property({ type: Boolean }) | |||
| _popin!: boolean; | |||
|
|
|||
| @property({ type: String, defaultValue: "Left" }) | |||
There was a problem hiding this comment.
See main/src/types/TableOverflowMode.ts as an example, if you need one
| @@ -18,4 +18,23 @@ | |||
| :host(#selection-cell) { | |||
| width: auto; | |||
| min-width: auto; | |||
| } | |||
| :host([h-align="left"]) { | |||
There was a problem hiding this comment.
Why not just set the css variable in onBeforeRendering of GridCellBase/GridCell? See Grid.ts line 307
| @@ -1,6 +1,7 @@ | |||
| :host { | |||
| font-family: var(--sapFontSemiboldDuplexFamily); | |||
| color: var(--sapList_HeaderTextColor); | |||
| justify-content: var(--_ui5-grid-cell-base-hAlign); | |||
There was a problem hiding this comment.
Is there a specific reason, why GridCell has justify-content: var(--_ui5-grid-cell-base-hAlign, left);, while GridHeaderCell has it without left?
Couldnt' this be put into GridCellBase, if we got nearly the same CSS for both cell types?
ilhan007
changed the title
Introduction of a new property
hAlign.hAlignis used to configure the horizontal alignment in GridCells. The idea is to configure the horizontal alignment on the header level of the GridTable and then automatically adjust the alignment of the cells according to their header cell.