syidaxgrid
Home Pricing Settings

GRID FEATURE

Conditional formatting

Conditional formatting changes visual properties such as background and text color based on a value's meaning. Use it to identify low stock or exceeded targets without changing source values or validation results.

Markdown source Features

How it works and when to use it

Specify the target field, comparison condition, and style for each rule. Review rule order and stopIfTrue when multiple rules match the same cell.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Highlight quantities above a threshold

Distinguish cells with quantities greater than 100.

javascript
grid.conditionalFormats = [{
  field: 'quantity', condition: { type: 'greaterThan', value: 100 },
  style: { backgroundColor: '#fff1cc' },
}];

Verify the result: 100 is excluded; highlighting starts at 101. Choose greaterThanOrEqual to include the boundary value.

Example 2. Distinguish multiple states

Create separate rules for completed status and empty quantities. First decide whether blank and numeric zero mean the same thing in your workflow.

Verify the result: Use different target columns or set priorities so completion colors and missing-value warnings do not conflict. Retain text labels too.

Example 3. Let users adjust rules

Open the formatting settings UI and connect its change event to your app's save functionality.

javascript
grid.conditionalFormatUi = true;
grid.addEventListener('conditionalFormatsChanged', event => {
  console.log(event.detail.rules);
});

Verify the result: Read the updated rule array and save it as a user preference. Assign a new array when the user returns to the page.

Combining features and troubleshooting

Do not distinguish errors and completion through color alone. Include status text and validation messages, and choose readable contrast in both light and dark themes.

Formatting does not block input. Use validationRules and invalidEditMode to prevent invalid values from being saved.

Related reading