data-te-class-table-header text white

[aguiagui5]

Hello, I cannot change the header text color to white. It doesn't recognize the "text-white" class on data-te-class-table-header. However, if I put "text-white" in data-te-class-row, it does recognize it and changes the color. Does anyone know why this happens?

Another question:
Is there any way to add Tailwind classes directly to the th and td of tables?
Thank you very much.

<template>
  <div class="rounded-lg shadow-lg overflow-hidden">
    <div
      data-te-datatable-init
      data-te-pagination="false"
      data-te-class
      data-te-class-table-header="bg-stone-700 text-xl text-white"
      data-te-class-row="text-xl"
    >
      <table>
        <thead>
          <tr>
            <th>{{ $t('leka.employee.name') }}</th>
            <th>{{ $t('leka.kpi.upsells') }}</th>
            <th>{{ $t('leka.kpi.revenue') }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="employee in employeesRanking"
            :key="employee.name"
            class="border-b border-stone-300 !important"
          >
            <td>{{ employee.name }}</td>
            <td>{{ employee.upsells }}</td>
            <td>{{ employee.revenue }} €</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

[juujisai]

Hi! The data-te-class-table-header assigned the classes to the whole thead element. The font color was also added but it is beeing overriden by the classes added to the th elements. You can add another data attribute that will change those classes by using the data-te-class-column attribute. For example:

    <div 
      data-te-datatable-init
      data-te-class-table-header="bg-stone-700 text-xl text-white"
      data-te-class-column="py-4 pl-1 text-clip overflow-hidden text-white dark:text-white"
    >

Hope that helps!

[aguiagui5]

It works, thank you!
Would it be possible to modify the style of a specific cell, either in the header or the table?
That's why I was asking if it would be possible to add tailwind styles to a specific or .
Thank you again for your support!

[aguiagui5]

Would it be possible to modify the style of a specific cell, either in the header or the table?

[juujisai]

You would have to either try to catch the specific cell via querySelector or use a format property for your data. Something like in the example here: https://tw-elements.com/docs/standard/data/datatables/#cell-formating