PrimeReact DataTable in combination with other components of other themes

UI Components for React
Post Reply
X1X11X
Posts: 16
Joined: 05 Mar 2022, 21:37

05 Mar 2022, 21:44

Hi, I am currently experimenting with the PrimeReact Datatable, a really successful component that leaves nothing to be desired!

What I'm interested in now is the following, the application I'm developing is built from the ground up with Chakra UI, and I've become aware of PrimeReact because Chakra doesn't offer a DataTable for example.
The interaction between the two themes works without any problems. The only problem I have now is the Dark Mode.

As far as I have seen in the PrimeReact documentation, you have to import the theme CSS you are going to use.

Now my question, is there any way to make the style of the DataTables query dependent? That is, for example, if I activate the dark mode in ChakraUI, that the dark theme for the table is loaded and vice versa?

I am grateful for any help!

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

12 Mar 2022, 18:22

I have to admit what you most likely would have to do is pull all the "datatable" CSS styles from one of the PrimeFaces themes like Arya, Vela, or Saga and copy them into your poejct. Most PrimeReact components are designed to be themed by PrimeTek CSS themes.

But that should work.
Last edited by Melloware on 21 Mar 2022, 14:21, edited 1 time in total.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

X1X11X
Posts: 16
Joined: 05 Mar 2022, 21:37

15 Mar 2022, 22:59

Hi, I have now placed the two CSS files for Dark and Light locally in my project.
I tried to change the CSS using conditional import, that means if my dark mode cookie is present, the dark theme should be loaded, otherwise the light theme - Unfortunately without success.

I have also created two components "DataTableLight" and "DataTableDark", both render a DataTable but with different CSS themes import, as mentioned above, a dark and a light theme - Unfortunately also without success.

The appearance of the table unfortunately does not change.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests