DataTable Column's header text does not align in v.3.3.0

[ubau]

DataTable Column's header text does not align in v.3.3.0 'center' and 'right' ignored, text always stays on the left side.

code examples

  <Column
    field="amount"
    header="Amount"
    :style="{ width: '123px', textAlign: 'right' }"
    :sortable="true"
  >

  <Column
    field="amount"
    header="Amount"
    headerStyle="width: 123px; text-align: right"
    bodyStyle="width: 123px; text-align: right"
    footerStyle="width: 123px; text-align: right"
    :sortable="true"
  >

This is regression from v.3.2.4 and before.

[shweinfeld]

I seem to be facing the same issue using v^.3.9.1

currently my code reads: <Column field="qty" header="Quantity" style="text-align:right"></Column>

but I've also tried using headerStyle with no success.

[bjorntj]

Seems to be the same problem using 3.11.0 also...

[rolfs42]

Much has changed I think and DataTable employs flexbox. Thus, at least in my setup, I can format the column via :style="{'justify-content':'flex-end'}" which works for both, the body and the header cells.

[xbhrnnd]

I tried with <Column (...) alignHeader={'center'} /> an it worked for me.

[sbscan]

@cagataycivici it's not fixed. I believe flex inheritance makes the trouble. Changing DataTable style from flex to inline-flex solves the problem. Perhaps you should change other occurrences. DataTable.vue -> Style -> .p-column-header-content {display: inline-flex}

[zortext]

@sbscan I don't think changing global styles is a good idea. It may lead to unexpected results when more complex headers with filters are used. Instead I add align-xxx classes for columns with the following css.

.align-right{
  text-align:right;
}
.align-center{
  text-align:center;
}
.p-datatable th[class*="align-"] .p-column-header-content {
  display: inline-flex ;
}

I think this is much more convenient.

[thebleucheese]

We had to use the above CSS hack and justify-content: center rather than being able to apply a headerClass.

That got the content to center but feels a bit hacky.

[fhprietor]

I using 3.15.0. Don't align

[wanglin86769]

I have the same problem with 3.15.0, is there any workaround to align center for table column header?

[ManuelTS]

I have the same problem with 3.15.0, is there any workaround to align center for table column header?

Same here

[lao-tseu-is-alive]

same for me

[rubjo]

[may820806]

life saver

[Slimelvone]

Add headerClass="column-text-right"

<Column
  field="totalValue"
  header="XXX"
  sortable
  :showFilterOperator="false"
  :showFilterMatchModes="false"
  :showAddButton="false"
  filterMatchMode="contains"
  headerClass="column-text-right"
>
  <template #body="{ data }">
    <div class="text-right">{{ $helper.toCurrency(data.totalValue) }}</div>
  </template>
</Column>

---

<style lang="scss">
  .column-text-right {
    .p-column-header-content{
      text-align: right; // or center
      display: block !important;
    }
  }
</style>

[mr-feek]

:pt="{ headerContent: 'justify-content-end' }" on the column component worked well for right aligning the header for me

[duzijie]

I have the same problem with 3.15.0, is there any workaround to align center for table column header?

    <Column field="code">
        <template #header>
            <span class="flex-1 text-center">Code</span>
        </template>
    </Column>

[Robertofs1]

I have the same problem with 3.15.0, is there any workaround to align center for table column header?

    <Column field="code">
        <template #header>
            <span class="flex-1 text-center">Code</span>
        </template>
    </Column>

worked for me!! thanks

[smlombardi]

This will not work for a sortable table, as it "pushes" the sort icon away