Validate user data input

For more advanced validation requirements, you can use a custom plugin that intercepts user edits and maintains a cache of invalid cells. This approach allows for dynamic validation rules that can be applied at runtime.

With the CellValidatePlugin, you can enforce validation rules when data is entered into the grid.

For instance, you could define validation rules directly in your column definitions:

1
// Define columns
2
const columns: ColumnRegular[] = [
3
  {
4
    name: '💰 Price',
5
    prop: 'price',
6
    validate: (value: number) => {
7
      // Highlight prices outside the range of 10 and 20 but don't apply values
8
      return value >= 10 && value <= 20;
9
    }
10
  },
11
];

Example

In this example, the validate function checks that the price falls within the range of 10 to 20. If the entered value does not meet these criteria, the cell will be marked as invalid, similar to the first approach.

Combining Validation with Additional Properties

The CellValidatePlugin also allows you to define additional properties in your grid columns, which can be validated using the same rules you apply in your plugin. This provides flexibility in how you manage and enforce validation across your grid.

Conclusion

Cell validation in RevoGrid can be implemented in various ways to ensure data integrity and provide users with a smooth experience. Whether you choose to use simple cell properties for basic validation or develop a custom plugin for more complex scenarios, RevoGrid offers the tools you need to validate data effectively.

By applying these validation techniques, you can create a robust data grid that not only captures user input but also enforces data quality standards.