bug(table): column header alignment is ignored #99
Description
We used to align column headers by passing the text-align CSS property in the PpwTableOptions. For example:
public tableOptions: PpwTableOptions<Player> = {
header: {
styles: {
firstName: () => {
return { 'text-align': 'right' }
}
}
}
This no longer seems to work on headers. The header is always aligned left, regardless of the tableOptions.
I'm guessing that this issue is caused by the implementation of sortable columns. The added attribute mat-sort-header, wraps the header content in an extra div (.mat-sort-header-container) with display: flex, which deprecates/no longer supports the use of text-align in the parent element.
So instead of this:
<th
role="columnheader"
mat-header-cell
class="mat-mdc-header-cell mdc-data-table__header-cell cdk-header-cell cdk-column-firstName mat-column-firstName ppw-column-type-text mat-mdc-table-sticky mat-mdc-table-sticky-border-elem-top"
style="text-align: right; top: 0px; z-index: 100;"
>
First name
</th>
We now get this:
<th
role="columnheader"
mat-header-cell
mat-sort-header
class="mat-sort-header mat-mdc-header-cell mdc-data-table__header-cell cdk-header-cell cdk-column-firstName mat-column-firstName ppw-column-type-text mat-mdc-table-sticky mat-mdc-table-sticky-border-elem-top"
aria-sort="none"
style="text-align: right; top: 0px; z-index: 100;"
>
<div class="mat-sort-header-container mat-focus-indicator" tabindex="0" role="button">
<div class="mat-sort-header-content">
First name
</div>
<div class="mat-sort-header-arrow">
<svg viewBox="0 -960 960 960" focusable="false" aria-hidden="true"><path d="M440-240v-368L296-464l-56-56 240-240 240 240-56 56-144-144v368h-80Z"></path></svg>
</div>
</div>
</th>
This issue is visible in the filter table of the demo application. The "first name" column should be aligned right.
