I am trying to change the column header color in the PrimeVue v4 DataTable, but none of the methods I've tried worked. I might be able to do this by changing the CSS classes globally. If so, what is the point of introducing a PT method?

My sample code:

<template>
  <ThemeSwitcher />
  <div class="card">
    <DataTable
      :value="products"
      scrollable
      scrollHeight="flex"
      show-gridlines
      :pt="{
        table: { style: 'min-width: 50rem' },
        thead: {
          class: '!bg-yellow-500',
        },
        headerRow: {
          class: '!bg-yellow-500',
        },
        headerCell: {
          class: '!bg-yellow-500',
        },
        bodyRow: {
          class: '!bg-green-500',
        },
      }"
    >
      <Column field="code" header="Code"></Column>
      <Column field="name" header="Name"></Column>
      <Column field="category" header="Category"></Column>
      <Column
        field="quantity"
        header="Quantity"
        frozen
        alignFrozen="right"
      ></Column>
    </DataTable>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';

onMounted(() => {
  ProductService.getProductsMini().then((data) => (products.value = data));
});

const products = ref();
</script>

Output:

Expected: To change the header style.

I have also provided an Online Playground

I am trying to change the column header color in the PrimeVue v4 DataTable, but none of the methods I've tried worked. I might be able to do this by changing the CSS classes globally. If so, what is the point of introducing a PT method?

My sample code:

<template>
  <ThemeSwitcher />
  <div class="card">
    <DataTable
      :value="products"
      scrollable
      scrollHeight="flex"
      show-gridlines
      :pt="{
        table: { style: 'min-width: 50rem' },
        thead: {
          class: '!bg-yellow-500',
        },
        headerRow: {
          class: '!bg-yellow-500',
        },
        headerCell: {
          class: '!bg-yellow-500',
        },
        bodyRow: {
          class: '!bg-green-500',
        },
      }"
    >
      <Column field="code" header="Code"></Column>
      <Column field="name" header="Name"></Column>
      <Column field="category" header="Category"></Column>
      <Column
        field="quantity"
        header="Quantity"
        frozen
        alignFrozen="right"
      ></Column>
    </DataTable>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ProductService } from '@/service/ProductService';

onMounted(() => {
  ProductService.getProductsMini().then((data) => (products.value = data));
});

const products = ref();
</script>

Output:

Expected: To change the header style.

I have also provided an Online Playground

• vue.js
• primevue

2 Answers 2

Was able to figure this out. In order to change datatable header color globally, we should use the Column >> headerCell pass through. Not the ones related to the datatable.

app.vue

<template>
  <div class="card">
    <DataTable
      :value="products"
      tableStyle="min-width: 50rem"
      :pt="{
        column: {
          headerCell: {
            class: ['text-white bg-yellow-500'],
          },
        },
      }"
    >
      <Column field="code" header="Code"></Column>
      <Column field="name" header="Name"></Column>
      <Column field="category" header="Category"></Column>
      <Column field="quantity" header="Quantity"></Column>
    </DataTable>
  </div>
</template>

Output :-

To have this change globally for all the Tables, we move this to our primevue config to make it work globally.

// https://nuxt/docs/api/configuration/nuxt-config
import Aura from '@primevue/themes/aura';
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: false },
  modules: ['@primevue/nuxt-module'],
  css: ['~/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  primevue: {
    options: {
      theme: {
        preset: Aura,
        options: {
          cssLayer: {
            name: 'primevue',
            order: 'tailwind-base, primevue, tailwind-utilities',
          },
        },
      },
      pt: {
        column: {
          headerCell: {
            class: ['text-white bg-blue-500'],
          },
        },
      },
    },
  },
});

If anyone wants to play around with the code, here is the stackblitz URL I used to figure it out. Primevue Datatable global PT

You can target the header style of a column using the headerStyle Prop, like so:

<Column field="code" header="Code" headerStyle="color: blue"></Column>

I'm not sure how you can reference a Tailwind color in an inline style, though...