why the space between the name and the icons isn't the same for all the headers table in...

The problem is that the space between the title and icons isn't applied with the gap of tailwind, and the margin left set a different space for each header table

Here I used the gap in the parent div that gather the title section and the icons section to set the same space between the title and the icons (the filter and sort icon) for all the header columns, but it is like it doesn't function at all and the space isnt set, and when I set the margin left for the div of the icons to make some space between them, each title and icon's header will have a space different from the other headers. please what can I do to have a specific space between the title and icons set for all the table headers?

here is the code:

<ng-template pTemplate="header">
<tr>
<th
*ngFor="let col of objectColumnsConfig"
pSortableColumn="{{ col.field }}"
style="overflow: hidden; white-space: nowrap;">

<div
class="flex flex-row items-center relative gap-2"
style="height: 25px; overflow: hidden;"
(mouseenter)="fieldShowed = col.field"
(mouseleave)="fieldShowed = null">

<div class="">
<span class="text-base text-black relative space-x-5">
{{ col.name | translate }}
</span>
</div>

<div class="flex items-center absolute left-6 justify-between"
style="top: 50%; transform: translateY(-50%);">

<!-- Filter Icons -->
<p-columnFilter
*ngIf="filterEnabled && col.isDirectFilter && fieldShowed === col.field && !sortDisabled.includes(col.field)"
type="{{ col.filterType }}"
field="{{ col.field }}"
display="menu"
style="margin-left: 4px;">
</p-columnFilter>

<!-- Slider Filter -->
<p-columnFilter
*ngIf="filterEnabled && col.filterType === 'slider' && !col.isDirectFilter && fieldShowed === col.field && !sortDisabled.includes(col.field)"
matchMode="between"
display="menu"
[showMatchModes]="false"
[showOperator]="false"
[showAddButton]="false">
<ng-template pTemplate="filter" let-filter="filterCallback">
<p-slider
[ngModel]="sliderConfig"
[range]="true"
(onSlideEnd)="filter($event.values)"
styleClass="m-3"></p-slider>
<div class="flex align-items-center px-2">
<span>{{ col.sliderConfig[0] }} - </span>
<span> {{ col.sliderConfig[1] }}</span>
</div>
</ng-template>
</p-columnFilter>

<!-- Dropdown Filter -->
<p-columnFilter
*ngIf="filterEnabled && col.filterType === 'tag' && fieldShowed === col.field && !col.isDirectFilter && !sortDisabled.includes(col.field)"
matchMode="equals"
display="menu"
[showMatchModes]="false"
[showOperator]="false"
[showAddButton]="false">
<ng-template pTemplate="filter" let-value let-filter="filterCallback">
<p-dropdown
[ngModel]="option"
[options]="col.filterValues"
(onChange)="filter($event.value)"
placeholder="Any"
[showClear]="true">
<ng-template let-option pTemplate="item">
<span
class="p-2 rounded-lg"
[ngClass]="getColorClass(option, col.tagColors)">
{{ option }}
</span>
</ng-template>
</p-dropdown>
</ng-template>
</p-columnFilter>

<!-- Date Filter -->
<p-columnFilter
*ngIf="filterEnabled && col.filterType === 'date' && fieldShowed === col.field && !col.isDirectFilter && !sortDisabled.includes(col.field)"
display="menu"
type="date"
field="date">
</p-columnFilter>

<!-- Sort Icon -->
<p-sortIcon
*ngIf="sortEnabled && fieldShowed === col.field && !sortDisabled.includes(col.field)"
field="{{ col.field }}">
</p-sortIcon>
</div>
</div>
</th>
</tr>
</ng-template>

Continue reading...