Cell Validation with Renderers

One straightforward way to validate cell data is by using cell properties cellProperties & cellTemplate. You can apply validation rules directly to individual cells, marking them as invalid based on certain conditions. For example, you can highlight incorrect cells by checking their values and applying an invalid tag:

Note

In this example, any cell with a value less than 10 or greater than 20 will be tagged as invalid, allowing you to apply specific styles to these cells. To style invalid cells, you can use CSS to define how these cells should appear.

This style will highlight any invalid cell with a red background, providing immediate visual feedback to the user.

Source code

TypeScript ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import type { ColumnRegular } from '@revolist/revogrid';
import { ColumnStretchPlugin, TooltipPlugin, validationRenderer } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { basicValidationSource, invalidCellStyle } from './validate-basic.data';

defineCustomElements();

const columns: ColumnRegular[] = [
  {
    name: '💰 Price',
    prop: 'price',
    ...validationRenderer({
      invalidProperties: () => ({
        style: invalidCellStyle,
      }),
    }),
    validationTooltip: (value: any) =>
      value >= 10 && value <= 20
        ? undefined
        : `Price ${value} must stay between 10 and 20`,
    validate: (value: number) => value >= 10 && value <= 20,
  },
];

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  const { isDark } = currentTheme();

  grid.source = basicValidationSource;
  grid.columns = columns;
  grid.plugins = [ColumnStretchPlugin, TooltipPlugin];
  Object.assign(grid, {
    stretch: 'all',
  })
  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  grid.range = true;

  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue vue

<template>
  <RevoGrid
    class="cell-border rounded-lg overflow-hidden"
    style="min-height: 320px;"
    :columns="columns"
    :source="source"
    :plugins="plugins"
    stretch="all"
    :theme="isDark ? 'darkCompact' : 'compact'"
    hide-attribution
    range
  />
</template>

<script setup lang="ts">
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
import { ColumnStretchPlugin, TooltipPlugin, validationRenderer } from '@revolist/revogrid-pro';
import { currentThemeVue } from '../composables/useRandomData';
import { basicValidationSource, invalidCellStyle } from './validate-basic.data';

const { isDark } = currentThemeVue();

const columns: ColumnRegular[] = [
  {
    name: '💰 Price',
    prop: 'price',
    ...validationRenderer({
      invalidProperties: () => ({
        style: invalidCellStyle,
      }),
    }),
    validationTooltip: (value: any) =>
      value >= 10 && value <= 20
        ? undefined
        : `Price ${value} must stay between 10 and 20`,
    validate: (value: number) => value >= 10 && value <= 20,
  },
];

const source = basicValidationSource;
const plugins = [ColumnStretchPlugin, TooltipPlugin];
</script>

React tsx

import React from 'react';
import { RevoGrid, type ColumnRegular } from '@revolist/react-datagrid';
import { ColumnStretchPlugin, TooltipPlugin, validationRenderer } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { basicValidationSource, invalidCellStyle } from './validate-basic.data';

const { isDark } = currentTheme();

export default function ValidateBasic() {
  const columns: ColumnRegular[] = [
    {
      name: '💰 Price',
      prop: 'price',
      ...validationRenderer({
        invalidProperties: () => ({
          style: invalidCellStyle,
        }),
      }),
      validationTooltip: (value: any) =>
        value >= 10 && value <= 20
          ? undefined
          : `Price ${value} must stay between 10 and 20`,
      validate: (value: number) => value >= 10 && value <= 20,
    },
  ];

  return (
    <RevoGrid
      style={{ height: '320px' }}
      theme={isDark() ? 'darkCompact' : 'compact'}
      columns={columns}
      source={basicValidationSource}
      plugins={[ColumnStretchPlugin, TooltipPlugin]}
      stretch="all"
      hideAttribution
      range
    />
  );
}

Angular ts

import { Component } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { ColumnStretchPlugin, TooltipPlugin, validationRenderer } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';
import { basicValidationSource, invalidCellStyle } from './validate-basic.data';

@Component({
  selector: 'validate-basic-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      class="grow h-full cell-border"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      stretch="all"
      [theme]="theme"
      [hideAttribution]="true"
      [range]="true"
      style="min-height: 320px;"
    ></revo-grid>
  `
})
export class ValidateBasicGridComponent {
  source = basicValidationSource;
  columns = [
    {
      name: '💰 Price',
      prop: 'price',
      ...validationRenderer({
        invalidProperties: () => ({
          style: invalidCellStyle,
        }),
      }),
      validationTooltip: (value: any) =>
        value >= 10 && value <= 20
          ? undefined
          : `Price ${value} must stay between 10 and 20`,
      validate: (value: number) => value >= 10 && value <= 20,
    },
  ];
  plugins = [ColumnStretchPlugin, TooltipPlugin];
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
}