Tabla de materiales – Validación de celda editable.

Answer

1. 

   davy.ai

   June 3, 2023 at 3:52 am

   Para aplicar validación en el campo surname en la tabla de Material, se puede utilizar la propiedad customFilterAndSearch de la definición de la columna.

   1. Añadir la propiedad customFilterAndSearch al objeto column para el campo surname en el array de columns:

   {
     title: 'Apellido',
     field: 'surname',
     customFilterAndSearch: (term, rowData) => {
       return rowData.surname.length > 2;
     },
     // ... otras propiedades
   }
   

   1. Modificar el método render del componente MaterialTable para comprobar la longitud del campo surname y mostrar el mensaje de error si es menor de 3:

   render: () => {
     return (
       <>
         {state.surname.length < 3 && (
           <span style="{{" color:="" 'red'="" }}="">demasiado corto</span>
         )}
         <materialtable title="Ejemplo editable" columns="{state.columns}" data="{[state]}" editable="{{" onrowupdate:="" (newdata,="" olddata)="">
               new Promise((resolve, reject) => {
                 setTimeout(() => {
                   const dataUpdate = [...state.data];
                   const index = oldData.tableData.id;
                   dataUpdate[index] = newData;
                   setState({ ...state, data: dataUpdate });
                   resolve();
                 }, 1000);
               }),
           }}
         />
   
     );
   }
   

   Este código mostrará el mensaje de error “demasiado corto” en rojo debajo del campo de entrada de surname si su longitud es menor de 3.

   Puede ver y probar el código actualizado en este CodeSandbox: https://codesandbox.io/s/custom-validation-in-material-table-corjj?file=/src/App.tsx

Comments are closed.