Example of Conditional Formatting in React Spreadsheet Component


This sample demonstrates about the conditional formatting features like highlight cell rules, data bars, color scales, and icon sets by using the inventory list details.

More Details...


This feature allows you to format a cell or range of cells based on the conditions applied. You can enable or disable conditional formats by using the allowConditionalFormat property.

In this sample, we have applied conditional formatting color scales in Quantity column, data bars in Purchase price and selling price column, highlight cell rules in last updated column and rating icon sets applied in rating column by using the conditionalFormat method and conditionalFormats property in sheets model.

In the Profit column, we have applied conditional formatting custom format. Using the support you can set cell styles like color, background color, font style, font weight and underline etc.

More information about the Spreadsheet component can be found in this documentation section.