CODEWITHSUNDEEP
datatableprimereact
HectorziN
HectorziN

Reputation: 31

Customizing colors for PrimeReact datatable

There is a way to change a background or text color to a row in PrimeReact Datatable that is using rowClassName={rowClass} where rowClass is a function that allows returning a class configured in the CSS file.

but... what if I want to choose an arbitrary color? for example, one fetched from a database in #RRGGBB format?

Reading de documentation I can't see a way to call a function to return the style string. Another way could be, creating dynamically the class name, for example...

class RRGGBB for a selected color, define this class with background: #RRGGBB and let rowClassName={rowClass} call rowClass function returning this dynamically created class...

I have this approach, but don't work:

const mycolor = "#00ff00";

function createStyle() {
  const style = document.createElement("style");

  // add CSS styles
  style.innerHTML = `
  .lulu {
            color: white;
            background-color: ${mycolor};
        }
    `;

  // append the style to the DOM in <head> section
  document.head.appendChild(style);
}

createStyle();

  const rowClass = (data) => {
    return {
      "lulu": data.category === "Accessories"
    };
  };
.....
        <DataTable value={products} rowClassName={rowClass}>

this code is a modified version of the sample code by prime react, here, in sandbox: https://codesandbox.io/s/o6k1n

thanks!

Upvotes: 1

Views: 2852

Answers (1)

HectorziN
HectorziN

Reputation: 31

I have solved it...

What I did is to create a dynamic css, and then use it:

function createStyle(color) {
    var style = document.getElementsByTagName("style");
    var colortag = color.replace("#", "mycolor");
    //Assuming there is a style section in the head
    var pos = style[0].innerHTML.indexOf(colortag);    
    if(pos<0)
        style[1].innerHTML += "."+colortag+`
    {
            color: ${color}!important;
        }
    `;
    return colortag;

const rowClass = (data) => {
    var colortag;
    if (data.COLOR!=undefined)
        colortag=createStyle(data.COLOR);
    return { [colortag]: ata.COLOR!=undefined };
}

<DataTable  ref={dt} value={Data} rowClassName={rowClass}>
    <column>......</column>

</DataTable>

With this code, if in the data there is a field called COLOR:"#RRGGBB" then it will create a style with this color and use it as text color. The same can be applied to background or whatever

Upvotes: 2

Related Questions