Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataTable design token has some not working. #7050

Open
4 tasks
leosin opened this issue Jan 6, 2025 · 2 comments
Open
4 tasks

DataTable design token has some not working. #7050

leosin opened this issue Jan 6, 2025 · 2 comments
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@leosin
Copy link

leosin commented Jan 6, 2025

Describe the bug

in datatable component Design Tokens,
Only a few of them work, the rest don't work properly.

But in the component page, I directly bind: dt = 'dtDatatable', it works

import { definePreset } from '@primevue/themes';
import Aura from '@primevue/themes/aura';

export default definePreset(Aura, {
  components: {
    datatable: {
      header: {
        cell: {
          color: '{blue.400}',
          selected: {
            color: '{yellow.400}',
            background: '{red.400}',
          },
          hover: {
            background: '{blue.400}',
          },
        },
      },
      sortIconColor: '{red.600}', //working fine
      body: {
        cell: {
          padding: '0.5rem 1rem', //working fine
        },
      },
    },
  }
});

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-twrms6kv?file=src%2Ftheme%2Fcustom.js

Environment

macos 15
node v20
nuxt 3.15

Vue version

3.5.13

PrimeVue version

4.2.5

Node version

20.16

Browser(s)

chrome 131

Steps to reproduce the behavior

export default definePreset(Aura, {
  components: {
    datatable: {
      header: {
        cell: {
          color: '{blue.400}',
          selected: {
            color: '{yellow.400}',
            background: '{red.400}',
          },
          hover: {
            background: '{blue.400}',
          },
        },
      },
      sortIconColor: '{red.600}', //working
      body: {
        cell: {
          padding: '0.5rem 1rem', //working
        },
      },
    },
  },
});

Expected behavior

Hope the theme changes will take effect

@leosin leosin added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 6, 2025
@j0rgedev
Copy link
Contributor

j0rgedev commented Jan 7, 2025

If you use headerCell instead of header: { cell: {} }, it works, which is not expected, but it's a workaround

@leosin
Copy link
Author

leosin commented Jan 7, 2025

If you use headerCell instead of header: { cell: {} }, it works, which is not expected, but it's a workaround

Thank you for your temporary solution, this one works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

2 participants