Grid Rows in Different Colors
In this article, you will learn how to change appearance of grid rows in IntegralUI Grid component by using custom CSS classes, inline styles and custom properties. A sample code below is available in JavaScript, Angular, React and Vue.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, whenever a row is clicked it will appear in different color. Any subsequent clicks (up to three) will change the color until resets.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Change Row's Appearance in Grid Component
The row appearance is controlled by a small set of built-in CSS classes that you can modify on your side. You can:
- override the default settings in each of these classes by applying your own attributes using the same class name
- set an inline style directly to the row object
- use CSS custom properties
Each of these options has their own advantages and disadvantages. Depending on whether you want to change appearance for all grid rows or only modify specific row (like highlighting a row in different color), you can use a different method.
How to Modify Built-in CSS Classes for Grid Row
Each row can have one of several states: normal, hovered, selected or disabled. A different CSS class, set up in default grid style (/styles/default/integralui.grid.style.js), governs each row state. You can create your own style file where you can override attributes of these CSS classes with your own settings.
For example, to change the row appearance when it is hovered, at first you need to:
- Create a new file where you will override iui-grid-row-hovered class with different background
- Import the style settings from this file in your project where IntegralUI Grid component is used
- Apply the style to the Grid using customStyle property.
The grid row appearance will change based on style settings. Although you can use CSS selectors, for example to set alternate appearance for odd/even rows using nth-child, in most cases, this will affect all rows. For individual row's changes, you need a different approach.
To apply a different CSS class to a specific grid row, you can use the setClass method. This method allows you to apply a custom CSS class to specific row object. You can use this method in your code, which will apply a custom CSS class when custom conditions are met:
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 Row
In similar way like with CSS classes you can use inline styles to directly change the row appearance on demand in your code. There are two ways to set an inline style to row object:
- By setting the style field of row object
- By calling the setStyle method for specified row object
Either way the changes to row appearance are applied directly to top HTML element that represents the row.
In this example, there are three different styles applied whenever a row is clicked. In addition, using the setStyle method an animation is applied using transition attribute that smoothly changes the row background from one color to the next.
Use of CSS Custom Properties for Grid Row
The IntegralUI Grid is a native 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 rows:
// General
--grid-row-color // row text color, default is black
--grid-row-hovered-animation-name // animation name when row is hovered, default is none
--grid-row-hovered-background // row background when hovered, default is #f5f5f5
--grid-row-hovered-border // row border when hovered, default is thin solid #efefef
--grid-row-hovered-border-color // row border color when hovered, default is #efefef
--grid-row-hovered-color // row text color when hovered, default is black
--grid-row-selected-animation-name // animation name when row is selected, default is none
--grid-row-selected-background // row background when selected, default is #e5e5e5
--grid-row-selected-border // row border when selected, default is thin solid #dedede
--grid-row-selected-border-color // row border color when selected, default is #dedede
--grid-row-selected-color // row text color when selected, default is black
// Batch Editing
--grid-row-deleted-background // row background when deleted, default is #e5e5e5
--grid-row-deleted-color // row text color when deleted, default is #999999
// Cell Label
--editor-label-margin // margin of cell label, default is 0
--editor-label-padding // padding of cell label, default is 2px 0 0 0
You can create your own CSS file where you can put custom properties using global or local selectors. Either way any change from custom properties overrides built-in settings and is applied directly to the component.
Conclusion
There are few ways to change the row appearance in IntegralUI Grid, by 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 rows in whole or just a specific row.
IntegralUI Web is a suite of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.