Estoy usando el componente Material UI DataGrid para renderizar el archivo EXCEL. Cada archivo de Excel tiene varios nombres de columna y tiene tipos específicos. Por ejemplo:
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 }, { "field": "dev", "flex": 1, "minWidth": 150, "editable": true } ] La columna Nombre Building TSI es de tipo number . Y estoy agregando un nombre de clase invalid usando cellClassName , algo así como:
classnames({ invalid: !isPositiveNumber(params.value) })Funciona bien y representa el nombre de la clase e indica las celdas de error. El problema es que quiero contar el número total de celdas de error. La razón es que solo permitimos guardar los valores de la cuadrícula en la base de datos, si no hay errores en ninguna celda.
Soluciones, he intentado hasta ahora:
errorCount e incremente errorCount cuando agregue la clase. Esto provoca varios renderizados y supera el límite de memoria.document.getElementByClassNames('invalid') y verifiqué su longitud. Funciona solo para el elemento renderizado. Es decir, si el archivo de Excel tiene más de 10 filas, está paginado. El recuento de celdas no válidas solo se realiza para la página representada actualmente.preProcessEditCellProps para indicar el error. Sin embargo, no pude encontrar ninguna forma de obtener el recuento total de celdas de error. Lo único que podría obtener de estos accesorios es la capacidad de no permitir que el usuario ingrese un valor incorrecto.localStorage . Tiene exactamente el mismo problema que la solución número 2.Agradecería si alguien se ha enfrentado a un escenario similar. Sería bueno obtener el recuento general de celdas de error, por lo que puedo habilitar para deshabilitar el botón GUARDAR.
Una de las limitaciones que tengo es que los archivos de Excel son enormes y contienen en promedio de 30 a 40 000 filas y de 25 a 40 columnas. Agregar estado para cada celda se vuelve menos eficaz.
¡Gracias por adelantado!
Tener otra propiedad en columnas y hacer referencia a ella antes de exportar para cada celda/fila puede ayudar.
En este ejemplo, invocar la función elegibleForExport con la definición de las columnas y los datos reales como parámetros darán un valor booleano que indique si existe un error o no. También se puede cambiar para contar errores.
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":"" } ];Si los datos iniciales siempre son válidos , una manera fácil de resolver su problema sería seguir la documentación de DataGrid sobre la validación del lado del cliente:
Validación del lado del cliente 🔗
Para validar el valor en las celdas, primero agregue una devolución de llamada
preProcessEditCellPropsa la definición de columna del campo para validar. Una vez que se llame, valide el valor proporcionado enparams.props.value. Luego, devuelva un nuevo objeto que contengaparams.propsy también el atributo deerrorestablecido en verdadero o falso. Si el atributo deerrores verdadero, el valor nunca se confirmará.const columns: GridColDef[] = [ { field: 'firstName', preProcessEditCellProps: (params: GridEditCellPropsChangeParams) => { const hasError = params.props.value.length < 3; return { ...params.props, error: hasError }; }, }, ];
Para su escenario, esto daría como resultado lo siguiente:
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 } ] Hay una diferencia importante con lo que tienes actualmente. Esta validación solo afecta las ediciones. Así que los datos iniciales tienen que ser válidos. La ventaja es que ya no tiene que usar classnames({ invalid: !isPositiveNumber(params.value) }) y el botón Guardar siempre puede estar habilitado, ya que se puede asumir que todos los cambios realizados son válidos.
Si los datos iniciales pueden no ser válidos, probablemente esta no sea la respuesta que está buscando.