Grid Columns in Different Colors

In this article, you will learn how to change appearance of grid columns in IntegralUI Grid component by using custom CSS classes, inline styles and custom properties.

In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to apply a different background color to grid columns.

Grid component is part of IntegralUI Web
a suite of native Web Components for Angular, React and Vue

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

In this example, each column has different colors for its header, body and footer.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Change Column's Appearance in Grid Component

There are few ways to change the appearance of grid columns. You can modify the built-in CSS classes by applying your own attributes, you can set style directly to the column object using inline styles from code or you can set CSS custom properties.

Each of these options has their own advantages and disadvantages. For example:

  • Applying your own CSS classes is mostly static change where at first you need to have them defined, but allows you to change appearance for all columns at once or individually one column object at time.
  • CSS custom properties allow you to penetrate the shadow DOM with your own settings, but changes are applied to all columns depending on current file with style settings you are using.
  • With inline styles you can change column appearance in code and on demand, depending on custom conditions set in your code. However, this will change the general HTML element that represents the column, without making deep changes to its child elements.

How to Modify Built-in CSS Classes for Grid Column

By default, grid column appearance is controlled by a small set of built-in CSS classes with different settings for each column's state: normal, hovered, selected and disabled. You can create your own style file where you can override these CSS classes with your own settings.

For example, to have a column where header appears in different color, at first you need to:

  1. Create a new file where you will override iui-grid-column-header class with different background
  2. Import the style settings from this file in your project where IntegralUI Grid component is used
  3. Apply the style to the Grid using customStyle property.

The grid column appearance will change based on style settings. Although you can use CSS selectors , in most cases, this will affect all columns. For individual column's changes, you need a different approach.

To apply a different CSS class to a specific grid column, you can use the setClass method. This method allows you to apply a custom CSS class to specific column object, by specifying the header, body or footer part. You can use this method in your code, set up conditions and when met, apply the CSS class name.

When using setClass method it is presumed that the CSS class with specified name exists in the file from where you are importing the style settings. In addition, these style needs to be applied to the grid customStyle property, on order to take effect (see steps above).

Use of Inline Styling for Grid Column

In similar way like with CSS classes you can use inline styles to directly change the column appearance on demand in your code. There are two ways to set an inline style to column object:

  • By setting the style field of column object
  • By calling the setStyle method for specified column object

Either way the changes to column appearance are applied directly to top HTML element that represents the column's header, body or footer.

The term column's body is referred to each grid cell from all rows that appear under specified column.

In this example, there are three columns with colors set in red, green and blue for each column's part: header, body and footer.

Use of CSS Custom Properties for Grid Column

The IntegralUI Grid is a web component, which means that it has a shadow DOM that protects the component from any outside style changes. However, you can still make changes to any part of the Grid using CSS custom properties.

Not all attributes of built-in CSS classes have its own custom property. In general, the most used styles have their own custom property. Here is a list of available properties that you can use for grid columns:

    // General
    --grid-column-background                           // column background, default is #ededed
    --grid-column-border                               // column border, default is thin solid #d5d5d5
    --grid-column-border-color                         // column border color, default is #d5d5d5
    --grid-column-color                                // column text color, default is black
    --grid-column-filter-background                    // column background for filtered fields, default is transparent

    // Fixed
    --grid-column-fixed-background                     // column background when fixed, default is #dddddd
    --grid-column-fixed-border                         // column border when fixed, default is thin solid transparent
    --grid-column-fixed-color                          // column text color when fixed, default is black

    // Hovered
    --grid-column-header-hovered-background            // column background when hovered, default is #d5d5d5
    --grid-colum-header-hovered-border-color           // column border when hovered, default is #cecece
    --grid-column-header-hovered-color                 // column text color when hovered, default is black

    // Selected
    --grid-column-header-selected-background           // column background when selected, default is #bebebe
    --grid-colum-header-selected-border-color          // column border when selected, default is #aeaeae
    --grid-column-header-selected-color                // column text color when selected, default is black
                    

With custom properties you don't need to set anything to the Grid customStyle property. You can create your own CSS file where you can put custom properties for different components at once, using global or local selectors. Either way any change from custom properties overrides built-in settings and is applied directly to the component.

Conclusion

Although Web Components, in this case the IntegralUI Grid component has protection from outside style changes regarding custom CSS, you can still modify the component appearance using three different methods: Modifying built-in CSS classes with your own settings, using inline styles or custom properties. This allows you to choose the method that is the most suitable to your applications and whether you want to customize grid columns in whole or just a specific column.

Grid is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.