Как получить общий статус ошибки в Material UI DataGrid?

Question

Я использую компонент Material UI DataGrid для рендеринга файла EXCEL. Каждый файл Excel имеет несколько имен столбцов и имеет определенные типы. Например:

      const columns = [
    {
        "field": "uwgroup",
        "headerName": "Group",
        "minWidth": 200,
        "editable": true
    },
    {
        "field": "Amazing column Name ",
        "flex": 1,
        "minWidth": 150,
        "editable": true
    },
    {
        "field": "Building TSI",
        "flex": 1,
        "minWidth": 150,
        "editable": true
    },
    {
        "field": "dev",
        "flex": 1,
        "minWidth": 150,
        "editable": true
    }
]

Название столбца Building TSI относится к типу number. И я добавляю имя класса invalid с использованием cellClassName, что-то типа:

      classnames({
   invalid: !isPositiveNumber(params.value)
})

Он отлично работает, отображает имя класса и указывает ячейки с ошибками. Проблема в том, что я хочу подсчитать общее количество ячеек с ошибками. Причина в том, что мы разрешаем сохранять файл Excel только в том случае, если в какой-либо ячейке нет ошибок.

Решения, которые я пробовал до сих пор:

1. Добавить состояние и увеличить errorCountкогда добавляю класс. Это вызывает несколько повторных отрисовок и превышает лимит памяти.
2. Я пытался использовать document.getElementByClassNames('invalid')и проверьте его длину. Работает только для отрендеренного элемента. То есть, если файл Excel содержит более 10 строк, он разбивается на страницы. Подсчет недопустимых ячеек выполняется только для текущей отображаемой страницы.
3. Я пытался использовать preProcessEditCellPropsреквизиты для обозначения ошибки. Однако мне не удалось найти способ получить общее количество ячеек с ошибками. Единственное, что я мог извлечь из этого реквизита, - это возможность не позволять пользователю вводить неверное значение.
4. Я даже пробовал использовать localStorage. У него та же проблема, что и у решения номер 2.

Буду признателен, если бы кто-нибудь столкнулся с подобным сценарием. Было бы неплохо получить общее количество ячеек с ошибками, поэтому я могу отключить кнопку СОХРАНИТЬ.

Заранее спасибо!

Answer 1

Может помочь наличие другого свойства в столбцах и ссылка на него перед экспортом для каждой ячейки/строки.

В этом примере вызов функции expiredForExport с определением столбцов и фактическими данными в качестве параметров даст логическое значение, указывающее, существует ли ошибка или нет. Также можно изменить для подсчета ошибок.

      const isInvalidBuildingTSI=(value)=>!isPositiveNumber(value);

const isPositiveNumber=(num)=>num>=0;

const eligibleForExport=(columns,data)=>{
    return !(data.find(row=>columns.find(column=>row[column.field] 
        && typeof column["isValid"] === "function" && column["isValid"](row[column.field]))))
}

const columns = [
    {
        "field": "uwgroup",
        "headerName": "Group",
        "minWidth": 200,
        "editable": true
    },
    {
        "field": "Building TSI",
        "type": 'number',
        "flex": 1,
        "minWidth": 150,
        "editable": true,
        "isValid" : isInvalidBuildingTSI,
        "cellClassName":isInvalidBuildingTSI(param.value)?"invalid":""
    }
];

Answer 2

Если исходные данные всегда действительны , простой способ решить вашу проблему — следовать документации DataGrid о проверке на стороне клиента:

Проверка на стороне клиента

Чтобы проверить значение в ячейках, сначала добавьте preProcessEditCellPropsобратный вызов определения столбца поля для проверки. После его вызова подтвердите значение, указанное в params.props.value. Затем верните новый объект, содержащий params.propsа также атрибут, установленный в значение true или false. Если errorимеет значение true, значение никогда не будет зафиксировано.

       const columns: GridColDef[] = [
  {
    field: 'firstName',
    preProcessEditCellProps: (params: GridEditCellPropsChangeParams) => {
      const hasError = params.props.value.length < 3;
      return { ...params.props, error: hasError };
    },
  },
];

Для вашего сценария это приведет к следующему:

      const columns = [
    {
        "field": "uwgroup",
        "headerName": "Group",
        "minWidth": 200,
        "editable": true
    },
    {
        "field": "Amazing column Name ",
        "flex": 1,
        "minWidth": 150,
        "editable": true
    },
    {
        "field": "Building TSI",
        "type": 'number',
        "flex": 1,
        "minWidth": 150,
        "editable": true,
        preProcessEditCellProps(params) {
            const invalid = !isPositiveNumber(params.props.value);
            return { ...params.props, error: invalid };
        }
    },
    {
        "field": "dev",
        "flex": 1,
        "minWidth": 150,
        "editable": true
    }
]

Есть важное отличие от того, что у вас есть сейчас. Эта проверка влияет только на правки. Таким образом, исходные данные должны быть действительными. Преимущество в том, что вам больше не нужно использовать classnames({ invalid: !isPositiveNumber(params.value) })и кнопка сохранения всегда может быть включена, так как все зафиксированные изменения можно считать действительными.

Если исходные данные могут быть неверными, это, вероятно, не тот ответ, который вы ищете.