Disable validation on empty rows (ignore read only cells' value)

Tags: #<Tag:0x00007efc72effcc0> #<Tag:0x00007efc72effb80>
#1

Hi there!
I have an performance-related issue: I want to enable validators only if the whole row is non-empty, as non-empty I mean if ANY editable cell in row (cell which is NOT readOnly) has a value.
I’ve discovered a solution for it by combining afterChange hook, where I trigger validateRows() function, with isEmptyRow() function, which is called inside a validator (quick mock example HERE)
I believe it is not the best performant solution since for hundreds of rows and columns (I’m creating an app where it is a possibility for that type of data) since on the first render (after loading the data) I can see the rows being validated row by row which is not pleasant UX.
Is there other solution where I need to disable validation on empty rows (ignore readOnly columns)?

#2

Hi @alojzy231

the readOnly itself doesn’t block the validator from running. In this case you’d need to remove the cell validator.

Here’s an example https://stackblitz.com/edit/react-jn5tuz-vgtqps?file=src%2FExampleComponent.jsx

Example

 cells={(row) => {
            let cp = {}
            if(row > 1){
                cp.readOnly = true
                cp.validator = undefined
            }
            return cp
        }}

table
11

console

Row 1 in the 'price_eur' column
Row 1 in the 'price_usd' column
Row 1 in the 'year' column
Row 0 in the 'price_eur' column
Row 0 in the 'price_usd' column
Row 0 in the 'year' column

Once we remove the cp.validator = undefined we get the log from the afterValidate hook for all of the cells (besides the text column as it doesn’t have a validator by default).

Row 4 in the 'price_eur' column
Row 4 in the 'price_usd' column
Row 4 in the 'year' column
Row 3 in the 'price_eur' column
Row 3 in the 'price_usd' column
Row 3 in the 'year' column
Row 2 in the 'price_eur' column
Row 2 in the 'price_usd' column
Row 2 in the 'year' column
Row 1 in the 'price_eur' column
Row 1 in the 'price_usd' column
Row 1 in the 'year' column
Row 0 in the 'price_eur' column
Row 0 in the 'price_usd' column
#3

Thanks for the quick reply!
I want to turn off/on validators based on if the whole row is empty (readOnly cells may have value but we ignore it in this case - readOnly state is set in column’s settings if that makes difference).
E.g.:
I’ve modified your example to visualize what I want to do:

image
image.png804×404 16.1 KB

I don’t want to have validators active in the 3rd row (the row should be treated as empty since only read only cell has value) but in the last row there should be active validators.
Is there an elegant solution for that?

#4

Hm, I think that removing the validator from all the cells in the row via afterChange might be the only solution. However, if you have the same cell validator across the columns or not more than two you may also consider using beforeValidate to pass a valid value for a row, like https://stackblitz.com/edit/react-jn5tuz-97umgv?file=src%2FExampleComponent.jsx

Here, the skipValidationArr represents an array of empty rows (to keep things simple). But in this case, if you use more than one validator (where passing 0 won’t be valid), that creates more code to apply within the conditions.

#5

In your solution I’ll still need to check if the whole row is empty (with preconditions mentioned in the issue’s title). Could you create an example where the skipValidationArr will be updated after the change?

Is there a way to batch beforeChange hook calls so I get an array of currently validated cells?

#6

Well, generally we help to guide here on the forum rather than create custom code snippets. But with gpt’s help I think that we have it covered https://stackblitz.com/edit/react-jn5tuz-6yptan?file=src%2FExampleComponent.jsx. However, there’s one issue here, the validateCells() within the afterChange has to be called with a small delay to be sure that it runs after the actual change.

1 Like
#7