Column Type: Tag

The tag column type turns a regular column into an "enum"-style column where values can be easily scanned. Each value can be given a unique background color and text color.

Any value that is not defined in the list of colors will be given the style as defined in default. Type a random value in the Department column and you'll see that it turns gray, as defined under default.

Code

const columns = [
  // ...
  {
    title: "Department",
    type: "tag",
    settings: {
      colors: {
        default: { bg: "#cccccc", text: "#000000" },  // Default style
        "Sales": { bg: "#28a745", text: "#ffffff" },   // Green bg, black text
        "IT": { bg: "#4682B4", text: "#ffffff" }, // Blue bg, white text
        "HR": { bg: "#dc3545", text: "#ffffff" },   // Red bg, white text
      }
    }
  }
];

Pro Tip

Not only can you use HEX or RGB values inside your color settings, you can also use CSS variable-syntax. The colors refer to the colors inside your DataGridXL theme. For example:

{
  colors: {
    "IT": { bg: "var(--selector)", text: "#ffffff" }, // Blue bg, white text
    // ...
  }
}

The code above will use the color value for selector as found in your theme. This way, if the data grid theme switches from light to dark, the background color for "IT" will always match the color with the theme's selector color setting.

You can even add custom properties to your theme, like:

{
  colors: {
    "IT": { bg: "var(--it-tag-background)", text: "var(--it-tag-text)" }, // Blue bg, white text
    // ...
  }
}