Grid Cells in Different Colors
In this article, you will learn how to change appearance of grid cells in IntegralUI Grid component by using custom CSS classes, inline styles and custom properties.
You will find sample code that shows how to apply different background colors to grid cells in JavaScript, Angular, React and Vue, in following sections below.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this example, whenever a cell is clicked it will appear in different color. In addition, an alert state with animation is applied to a cell when clicked few times.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Change Cell's Appearance in Grid Component
Grid consists of different types of cells, ones displayed as part of column's header or footer, or as part of grid row. In general, by a grid cell usually is referring to a row cell. A cell that belongs to a specific row is displayed under specific column using column-cell relations. So, you can modify a cell either from column styles settings for body part or by modifying, row style settings for cells or changing the cell style directly.
Built-in CSS classes that you can modify on your side control the cell appearance. You can:
- override the default CSS settings in each of these classes with your own
- set an inline style directly to the cell object
- use of CSS custom properties
Each of these options has their own advantages and disadvantages. Depending on whether you want to change appearance for all grid cells or only modify specific cell (like highlighting a cell in different color), you can use a different method.
How to Modify Built-in CSS Classes for Grid Cell
You can create your own style file where you can override attributes of default CSS classes with your own settings.
For example, to change the overall cell appearance, at first you need to:
- Create a new file where you will override iui-grid-row-cell class with different background
- Import the style settings from this file in your project where IntegralUI Grid component is used
- Apply the cell style to the Grid using customStyle property.
When creating a CSS file in this case it needs to be in format acceptable by web component using Lit Element syntax. The file is in JavaScript format where you create and export a css object. That's the only difference from regular CSS file.
Other CSS classes and attributes used by the Grid are available in default style settings, you can find them in /integralui/styles/default/integralui.grid.style.js file.
The grid cell appearance will change based on style settings. Although you can use CSS selectors, in most cases, this will affect all cells. For individual cell's changes, you need a different approach.
To apply a different CSS class to a specific grid cell, you can use the setClass method. This method allows you to apply a custom CSS class to specific cell object. You can use this method in your code, which will add a custom CSS class when custom conditions are met:
In this way using CSS classes, you can add animations to the grid cell on demand. For example, to generate alerts to notify the user of changes in specific cell data.
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 Cell
In similar way like with CSS classes you can use inline styles to directly change the cell appearance on demand in your code. There are two ways to set an inline style to cell object:
- By setting the style field of cell object
- By calling the setStyle method for specified cell object
Either way the changes to cell appearance are applied directly to top HTML element that represents the cell.
In this example, there are three different styles applied whenever a cell is clicked. In addition, using the setStyle method an animation is applied using transition attribute that smoothly changes the cell background from one color to the next.
Use of CSS Custom Properties for Grid Cell
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.
When using CSS custom properties, you don't need to set the customStyle property of the grid, you can have a general CSS file where using selectors and custom properties change the grid appearance.
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 cells:
// General
--grid-row-cell-background // cell background, default is transparent
--grid-row-cell-border-left // left border of the cell, default is thin solid transparent
--grid-row-cell-border-right // right border of the cell, default is thin solid transparent
--grid-row-cell-border-bottom // bottom border of the cell, default is thin solid transparent
--grid-row-cell-padding // cell padding, default is 0
// Batch Editing
--grid-row-cell-deleted-background // cell background when deleted, default is #e5e5e5
--grid-row-cell-deleted-color // cell text color when deleted, default is #999999
--grid-row-cell-value-changed-background // cell background when value changed, default is #ffc58f
--grid-row-cell-value-changed-color // cell text color when value changed, default is black
// 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
IntegralUI Grid component comes with few ways to change the cell appearance completely or individually. You can modify built-in CSS classes with your own settings, using inline styles or CSS custom properties. This allows you to choose the method that is the most suitable to your applications and whether you want to customize grid cells in whole or just a specific cell.
A sample code is available in JavaScript, Angular, React and Vue that shows a grid where cells have different background colors. The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.