Construye un Tablero de Control Hermoso y Rico en Datos con la Rejilla de Datos de MUI X y Joy UI

Rate this content
Bookmark
Github

Aprende cómo utilizar todo el ecosistema de MUI para construir un tablero de control hermoso y sofisticado en una fracción del tiempo que tomaría construirlo desde cero. En particular, veremos cómo integrar la Rejilla de Datos de MUI X con Joy UI, nuestra nueva biblioteca de componentes y hermana de Material UI, el estándar de la industria.


Tabla de contenidos:

- Presentación de nuestro proyecto y herramientas

- Configuración de la aplicación e instalación de paquetes

- Construcción del tablero de control

- Prototipado, estilos y temas - Funcionalidades de Joy UI

- Filtrado, ordenamiento, edición - Funcionalidades de la Rejilla de Datos

- Conclusión, reflexiones finales, preguntas y respuestas

137 min
24 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La Masterclass de hoy se centró en construir una aplicación CRUD utilizando la rejilla de datos de MUI X y Joy UI. Material UI sigue siendo popular y continuará siendo desarrollado, con esfuerzos para implementar la versión 3 del Material Design. La masterclass cubrió varios temas como agregar columnas, filtrar datos, reemplazar espacios con componentes de Joy UI, crear una columna de autocompletado, personalizar la apariencia y el estilo, guardar y actualizar datos, y manejar errores. La masterclass concluyó con planes para futuras funcionalidades y un llamado a conectarse con los asistentes para obtener más ayuda.

Available in English

1. Introducción al Masterclass de MUI

Short description:

Hoy vamos a demostrar cómo puedes construir una aplicación CRUD limpia y sofisticada utilizando la cuadrícula de datos MUI X en conjunto con Joy UI. Al final, te llevarás una plantilla sólida y base que puedes expandir a tu gusto. Si construyes algo genial con el código del masterclass de hoy, avísanos y podríamos compartirlo en nuestra galería de proyectos en mui.com.

Empecemos sin más preámbulos. Muy bien. Gracias a todos por estar aquí. Este es un masterclass de MUI. Hoy vamos a demostrar cómo puedes construir una aplicación CRUD limpia y sofisticada. Eso es crear, leer, actualizar y eliminar. Una aplicación CRUD muy sofisticada que puede manejar grandes cantidades de data con características como filtrado y ordenamiento listas para usar. Utilizando la cuadrícula de datos MUI X en conjunto con Joy UI, que es nuestra última biblioteca de componentes UI React y una biblioteca hermana de nuestro producto estrella Material UI. Espero que algunos de ustedes aquí estén familiarizados con ella.

Ahora, si tuvieras que construir una aplicación así desde cero, podría llevarte días o semanas de trabajo a tiempo completo. Y eso es antes de tener en cuenta los errores y casos límite que, créeme, definitivamente surgirán en el camino. En cambio, estaremos en funcionamiento aquí en cuestión de minutos, algo así como 90 minutos más o menos. Y al final, te llevarás una plantilla sólida y base que puedes expandir a tu gusto. Si construyes algo genial con el código del masterclass de hoy o simplemente con lo que aprendamos hoy en el masterclass, espero que nos lo hagas saber. Nos encantaría verlo y si es genial, podríamos compartirlo en nuestra galería de proyectos que se encuentra en mui.com.

2. MUI y Stack del Masterclass

Short description:

Hoy vamos a demostrar cómo puedes construir una aplicación CRUD limpia y sofisticada utilizando la cuadrícula de datos MUI X en conjunto con Joy UI. Al final, te llevarás una plantilla sólida y base que puedes expandir a tu gusto. Si construyes algo genial con el código del masterclass de hoy, avísanos y podríamos compartirlo en nuestra galería de proyectos en mui.com.

Antes de comenzar con la codificación, me gustaría tomar un minuto para presentarme a mí mismo y a mis colegas que están liderando el masterclass aquí conmigo hoy. Hola, soy Sam Sycamore. Soy un defensor del desarrollo en MUI. Mi experiencia está en redacción técnica y desarrollo front-end, principalmente en JavaScript, React y Next.js. Llevo aproximadamente un año y medio en MUI. Vivo en Minnesota, como puedes ver, este es realmente mi entorno. Bueno, no realmente, pero lo suficientemente cerca. Paso la mayor parte de mi tiempo trabajando en la documentación del producto en MUI. Y participando con la comunidad de desarrolladores que trabajan con nuestras bibliotecas de componentes principales, es decir, Material UI, Base UI y Joy UI. Profundizaremos un poco más en los productos de MUI en un momento. Así que no te preocupes si eres nuevo en nuestro ecosistema.

Junto a mí hoy está mi colega Jun, que es un ingeniero de nuestro equipo principal y el desarrollador principal detrás de la biblioteca de componentes Joy UI con la que estamos trabajando hoy. Estoy muy contento de que esté aquí con nosotros para responder cualquier pregunta y mostrarnos todas las cosas geniales que ha estado construyendo. Jun ha estado en MUI durante aproximadamente dos años y es muy apasionado de todo lo relacionado con la experiencia del desarrollador, lo cual creo que se refleja en Joy UI. Y creo que estarás de acuerdo una vez que lo veas. Jun será quien dirija la codificación en vivo con nosotros en unos momentos. Y hoy también nos acompaña Andrew, que es nuestro líder técnico en el equipo de DataGrid. Así que está aquí en el masterclass. También está en Discord. Estará disponible para responder cualquier pregunta que puedas tener sobre MUIX y la cuadrícula, especialmente si hay alguna pregunta muy técnica. Ciertamente no soy un experto en la cuadrícula. Pero si alguien lo es, es este compañero aquí. Así que estamos contentos de tenerlo con nosotros.

Ahora que sabes un poco sobre quiénes somos. Hablemos sobre quiénes representamos en esta conferencia. Tal vez esté predicando a los conversos para aquellos de ustedes que eligieron asistir a este masterclass. Tal vez ya sepan todo lo que hay que saber sobre nosotros. Pero asegurémonos de que todos estemos en la misma página. MUI como empresa comenzó con Material UI, que es la implementación de código abierto del diseño Material de Google en React. A pesar de los conceptos erróneos populares, MUI no está afiliado a Google. Sin faltar al respeto. Amamos a la familia de Google. Pero somos una entidad independiente con una plantilla de poco más de 30 personas en estos días. Y las ofertas de productos de MUI ahora se extienden mucho más allá del ámbito del diseño Material. Entonces, como puedes ver, en nuestro equipo principal, nuestros productos incluyen Base UI, que es para componentes sin cabeza y hooks de bajo nivel. Tenemos Joy UI, que implementa nuestro propio sistema de diseño interno y algunas ideas nuevas y frescas sobre la experiencia del desarrollador. Y luego también tenemos MaterialUI, como bien sabes, y Material, o perdón, MUI system, que es nuestro sistema de estilo interno. Y eso es solo en el lado principal. En el lado X, es decir, MUIX, tenemos nuestros componentes avanzados como la cuadrícula de datos, con la que estaremos trabajando hoy. También tenemos los selectores de fecha y hora y, próximamente en un futuro no muy lejano, tendremos algunas cosas nuevas y geniales. Y luego tenemos MUI-Toolpad. Todavía estamos en las primeras etapas de esta aplicación, pero este es nuestro generador de administración de bajo código donde básicamente puedes tomar todos los componentes de MUI que conoces y amas y comenzar a construir una aplicación de pila completa simplemente arrastrando y soltando. Estamos muy emocionados por eso. Y si tienes alguna pregunta sobre alguno de esos productos, no dudes en comunicarte. Estaré encantado de mostrarte todos ellos.

Entonces, con eso, creo que ahora estamos listos para pasar y discutir el stack con el que estaremos trabajando hoy. Estamos, por supuesto, operando en el mundo de React, y hoy estaremos codificando en JavaScript. Sé que esa puede ser una decisión controvertida en 2023, ya que el mundo parece estar adoptando cada vez más TypeScript. De hecho, prácticamente solo usamos TypeScript internamente en MUI en estos días. Pero no queríamos asumir que todos aquí tienen experiencia previa con TypeScript, y no queríamos entrar demasiado en los detalles de TS.

3. Introducción a MUI y Joy UI

Short description:

Hoy usaremos JavaScript, pero TypeScript también está disponible. Empaquetaremos nuestra aplicación con Vite, una herramienta popular para construir aplicaciones de React. Nuestra interfaz de usuario se construirá utilizando Joy UI integrado en la cuadrícula de datos MUI X. Joy UI ofrece más libertad y flexibilidad que Material UI, con características como variantes globales y ajustes automáticos.

Primero y ante todo, vamos a hablar sobre MUI. Así que debes saber que aunque hoy usaremos JavaScript solo por simplicidad, todo lo que haremos es absolutamente posible en TypeScript. De hecho, creo que Jun ha preparado una rama en ese repositorio. Que tiene todas estas cosas en TypeScript. Así que después del masterclass, si prefieres estar en el mundo de TypeScript, debes saber que eso está disponible.

Empaquetaremos nuestra aplicación con Vite, que parece estar convirtiéndose rápidamente en el estándar de la industria para construir una aplicación de React que no utiliza Next.js. Si no lo has usado antes, te lo recomiendo mucho, es genial. Sin embargo, sería un poco más allá del alcance de este masterclass profundizar demasiado en ello. Pero simplemente funciona y por eso nos encanta.

Ahora, nuestra interfaz de usuario, que es realmente la estrella del espectáculo hoy, se construirá utilizando Joy UI, como mencioné, integrado en la cuadrícula de datos MUI X. Joy UI fue creado por MUI como una alternativa a Material UI para implementar sistemas de diseño que no se adhieren a Material Design. Estas características son muy similares a Material UI, por lo que si has trabajado con esa biblioteca antes, debería ser bastante sencillo para ti aprender Joy UI también. Pero dado que Joy UI cuenta con nuestro propio sistema de diseño interno, como mencioné, esto nos brinda mucha más libertad y flexibilidad para experimentar con nuevas características que no necesariamente podríamos introducir en Material UI. Cosas como variantes globales, que te ayudan a definir rápidamente la jerarquía de importancia entre un grupo de componentes, utilizando un conjunto consistente de estilos que se pueden aplicar a todos los componentes de la biblioteca. Y también lo que llamamos ajustes automáticos, que significa que los componentes de Joy UI, gracias principalmente a la magia de las variables CSS, son conscientes de su entorno y pueden adaptar sus estilos y estructuras en relación con los de sus hijos y padres. Así que estoy realmente emocionado de que veas algunas de esas cosas.

4. Introducción a MUIX y Mock Service Worker

Short description:

Hoy trabajaremos con la cuadrícula de datos MUIX, que surgió de las necesidades de la comunidad de Material UI. Hemos separado los componentes de MUIX de Material UI para trabajar con Joy UI. Además, utilizaremos Mock Service Worker para simular una API REST para nuestra aplicación.

A continuación, tenemos MUIX. Y específicamente, como mencioné, hoy trabajaremos con la cuadrícula de datos MUIX. MUIX surgió de las necesidades de la comunidad de Material UI cuando se observó que no era factible que los aficionados que trabajan en sus ratos libres pudieran mantener de manera confiable componentes con funcionalidades tan avanzadas. Así que construimos un equipo de ingenieros, digo `construimos` como si yo hubiera tenido algo que ver. Solo estoy aquí para contar la historia. MUI formó un equipo de ingenieros para trabajar en estos componentes a tiempo completo. Y hemos lanzado versiones con licencia para usuarios avanzados que necesitan las características y funcionalidades más avanzadas. Pero también hay una versión de la comunidad que es completamente de código abierto y gratuita para usar. Así que eso es con lo que trabajaremos hoy. Más recientemente, gracias al trabajo de June en colaboración con el equipo de MUIX, hemos comenzado el proceso de, podríamos decir, separar los componentes de MUIX de Material UI para que funcionen correctamente con Joy UI. Ese es el motivo por el cual estamos aquí hoy. Queremos mostrarte cómo es posible construir una tabla de datos utilizando Joy UI integrado en la cuadrícula de datos MUIX. Y finalmente, por último pero no menos importante, estamos trabajando con un paquete llamado Mock Service Worker. No necesitas preocuparte demasiado por lo que hace este paquete. Solo debes saber que lo estamos utilizando para simular una API REST con la que interactuar. De esta manera, podemos fingir que nuestra aplicación está realmente comunicándose con un servidor sin tener que configurarlo todo de verdad. Así que no necesitas saber mucho sobre esto. Ya tenemos todo el código base.

5. Material UI y Joy UI

Short description:

Material UI no va a desaparecer. Lo sabemos. A todos les encanta. Súper popular. Seguirá existiendo probablemente mientras React exista, diría yo. Dicho esto, Material UI actualmente implementa Material Design V2. Y de hecho, acabamos de contratar a un nuevo ingeniero para trabajar a tiempo completo en la implementación de Material U, que es la versión 3 de Material Design. Así que no solo Material UI estará aquí para siempre, sino que también estamos haciendo esfuerzos para llevarlo a la última versión de Material Design. Y sí, Joy UI siempre será una alternativa. Y esperamos que te quedes en nuestro ecosistema, porque de eso se trata. Hemos aprendido mucho a través de Material UI. Y Joy UI fue creado para responder a muchos de los comentarios que han surgido a lo largo de los años sobre Material UI.

Placas configuradas en el repositorio. Así que eso también debería funcionar de inmediato. Veo una pregunta en el chat que quiero reconocer. Jory pregunta, ¿Joy UI seguirá siendo una alternativa para siempre o hay planes de reemplazar Material UI en algún momento? Es una gran pregunta. Material UI no va a desaparecer. Lo sabemos. A todos les encanta. Súper popular. Seguirá existiendo probablemente mientras React exista, diría yo. Dicho esto, Material UI actualmente implementa Material Design V2. Y de hecho, acabamos de contratar a un nuevo ingeniero para trabajar a tiempo completo en la implementación de Material U, que es la versión 3 de Material Design. Así que no solo Material UI estará aquí para siempre, sino que también estamos haciendo esfuerzos para llevarlo a la última versión de Material Design. Y sí, Joy UI siempre será una alternativa. Y esperamos que te quedes en nuestro ecosistema, porque de eso se trata. Hemos aprendido mucho a través de Material UI. Y Joy UI fue creado para responder a muchos de los comentarios que han surgido a lo largo de los años

6. Construyendo una aplicación React con Joy UI y MUIX

Short description:

Hoy estamos construyendo una aplicación React con Joy UI y la cuadrícula de datos MUIX, que cuenta con funcionalidad CRUD completa. Utilizaremos un simulador de servicio y una API falsa de arresto. Los usuarios pueden agregar, eliminar y editar filas y celdas en la cuadrícula de datos. El componente de autocompletado de Joy UI proporciona sugerencias para la columna de país de fabricación. Sumergámonos en la codificación con Jun.

Hablemos un poco sobre Material UI. Así que con eso, vamos a adentrarnos en este proyecto. Por lo tanto, nuestra masterclass de hoy consistirá en guiarte a través del proceso de construcción de una aplicación React con Joy UI y la cuadrícula de datos MUIX, que cuenta con funcionalidad CRUD completa, es decir, la capacidad de crear, leer, actualizar y eliminar. Como mencioné antes, en lugar de un backend completamente desarrollado, utilizaremos un simulador de servicio y una API falsa de arresto, que entrarán en juego un poco más adelante. Y en esta aplicación, los usuarios podrán agregar y eliminar filas en la cuadrícula de datos, podrán editar cada celda en cada fila y cuando un usuario edite una celda en la columna de país de fabricación, se le proporcionará una lista de sugerencias para elegir, gracias al componente de autocompletado de Joy UI. Estoy realmente emocionado de poder incluir eso. El autocompletado es uno de los componentes más geniales que creo que tenemos en la colección de Joy UI en este momento. Así que veremos lo genial que es. Y sí, con eso, creo que estamos listos para sumergirnos en la codificación. Ahora voy a pasarle el control a Jun, quien nos va a poner en marcha aquí.

7. Configurando el Repositorio y Explorando la Página

Short description:

Asegurémonos de que todos tengan configurado el repositorio y abran el archivo app.jsx. Clona el repositorio, elige tu administrador de paquetes, instala las dependencias y ejecuta el servidor de desarrollo. La página muestra un título y una cuadrícula de datos simple. Importamos componentes de Joy UI como container, CSS baseline y typography. La cuadrícula de datos tiene props importantes como row y column, con filas y columnas definidas a partir de un conjunto de datos. Las props de columna definen cómo la cuadrícula de datos maneja el conjunto de datos.

Muy bien Sam, gracias por la excelente introducción. Primero, asegurémonos de que todos hayan configurado este repositorio. Ahora estoy compartiendo mi pantalla, así que no pude encontrar mi chat. Bien, lo encontré. Bien. Utilizaremos este repositorio para construir nuestro panel de control con Delibri Enjoy UI. Siéntete libre de clonarlo, esperaré unos minutos para que todos lo hagan. Y una vez que clones esto y abras el proyecto, verás una plantilla de inicio con nuestro archivo principal aquí que usaremos hoy, que es app.jsx. Explicaré otras configuraciones a lo largo del camino, pero por ahora, podemos centrarnos en app.jsx. Y así, una vez que abras, notarás muchos errores vinculados, lo cual está bien por ahora. Preparé las importaciones para que no tengamos que estar subiendo y bajando en este taller todo el tiempo, para que podamos centrarnos en la UI principalmente. Muy bien. Una vez que clones el repositorio, elige el administrador de paquetes que prefieras. En mi caso, usé Yarn, así que ejecutaré Yarn install, y ahora con mi súper rápida conexión a internet, y una vez que hagas esto, luego ejecuta Yarn dev. Esto iniciará el servidor de desarrollo. Y luego puedes hacer clic, hacer clic con comando o hacer clic con control en la ventana para abrir este enlace. Y esta es la página que verás inicialmente. Muy bien. Verás un título y luego una sencilla cuadrícula de datos aquí. Muy bien. Ahora, demos un minuto para que las personas clonen e intenten instalar las dependencias y ejecutar el servidor de desarrollo. Mientras tanto, si alguien ya lo ha hecho, comenzaré a explicar lo que tenemos en esta página. Entonces, en este momento, en esta página, estamos importando componentes de Joy UI. El primero es el container. Es bastante común en el desarrollo web. Crea un límite para cada vista para que tu contenido no se desborde del límite del ancho. Y el siguiente, el CSS baseline, este es nuestro reinicio de CSS interno. Es posible que hayas oído hablar de normalize.css. Es lo mismo, solo para asegurarnos de que, ya sabes, nuestro componente se vea igual en todos los navegadores. Y el siguiente es nuestro componente de tipografía que se crea para usar con texto. Bueno, explicaré las props a lo largo del camino. Ahora mismo está usando el nivel H3 que se sincronizará con el mismo predeterminado. Entonces esto es como el tamaño de tipografía. Y tenemos la prop SxProp, si has usado Material antes, es lo mismo. Entonces estas props nos permiten escribir CSS dentro de esta prop. Es una prop muy poderosa. Y luego en este taller, lo haremos juntos en unos pocos componentes y nuestras estrellas aquí. Así que la cuadrícula de datos. Las props más importantes, que son row y column, moveré row arriba. Puedes pensar en ello como una hoja de cálculo en la que tienes una fila de data y un conjunto de columnas. Entonces las filas provienen de, tenemos el conjunto de data aquí. Haz clic aquí, que he preparado como una verdadera fila con ID, nombre, fecha de fabricación y precio. Cada uno de estos se definirá como una columna. Y cada elemento de esta matriz será una fila. ¿De acuerdo? Y para las props de columna, esta es una prop que podemos definir cómo queremos que la cuadrícula de datos maneje este conjunto de data. Entonces ahora tenemos el campo id que renderizará el id de los data, del conjunto de data que tenemos. Y otro es el nombre del encabezado. Se usa para configurar lo que aparece en el encabezado. ¿De acuerdo? Supongo que todos han instalado las dependencias y tienen esta página en su

8. Explorando DataGrid y Agregando Columnas

Short description:

En la primera hora, cubriremos las características básicas de la cuadrícula de datos y crearemos un componente personalizado para seleccionar opciones. Luego agregaremos más columnas a la tabla, comenzando con la columna de nombre. La cuadrícula de datos permite que las celdas sean editables con solo una línea de código. Agregaremos otra columna para el precio, asegurándonos de que el tipo de entrada sea número para una mejor funcionalidad. La entrada se puede editar y guardar, y también funcionará con el filtrado.

pantalla. Así que empecemos. En la primera hora, nos familiarizaremos con las características básicas de la cuadrícula de datos e intentaremos crear un componente personalizado que permita a los usuarios seleccionar algunas opciones o un país desde el autocompletado. Luego haremos un descanso y avanzaremos al siguiente paso.

Muy bien, ahora lo que haré a continuación es agregar más columnas a nuestra tabla aquí. Y la primera columna que agregaré será, sacaré la columna de nombre como segunda columna. Para hacer eso, escribe field y apunta al campo que deseas. En este caso, es el campo nombre aquí. Entonces, escribe name. Y luego puedes agregar el nombre del encabezado. Con el nombre que prefieras, puede ser nombre o puede ser nombre del producto. Y luego guardaré este archivo y el hot payload hará el trabajo. Y ahora verás que esta es la segunda columna que acabamos de agregar. Permíteme hacer zoom un poco. Muy bien. Avísame si no puedes ver el código.

Muy bien. Y una propiedad poderosa que DataGrid proporciona de forma predeterminada es esta. Puedes hacer que una celda de la columna sea editable. Ahora mismo, no puedes hacer nada con esta DataGrid. Solo muestra las cosas. Pero puedes agregar editable como true. Y esto hará que la celda pueda ser editada. Los usuarios pueden editar la celda de esta columna haciendo doble clic. Cuando hagas doble clic, verás un campo de entrada de texto donde los usuarios pueden escribir algo más. Y luego pueden guardarlo con blur o con enter. Ahora los data cambiarán y se guardarán en el estado de la cuadrícula de datos. Esto es bastante bueno. Solo una línea de código y obtienes una característica muy difícil de implementar de forma predeterminada.

Muy bien, ahora agreguemos la siguiente columna. Lo mismo aquí. Solo comienza con el campo. Y comenzaré con precio primero. Mantendré el otro campo como el último. Y luego agrega el nombre del encabezado como precio. Y luego lo mismo aquí, agregaré editable como true. Ahora, cuando lo guardes, deberías tener la tercera columna. Que se puede editar. Pero una cosa que noto es que como el precio es un número, Pero ahora no puedo usar el teclado o las flechas para aumentar o disminuir los valores. Porque de forma predeterminada, si no proporcionas ningún tipo a la definición de columna. Esto se llama definición de columna. Obtendrás una entrada de texto simple. Y esto no es lo que queremos porque el tipo de data afectará cómo funciona el filtrado y cómo funciona la clasificación también. Entonces debemos proporcionar un tipo si no es texto. En este caso, proporcionaré el tipo número. Muy bien. Y luego guardaré el archivo. Y ahora, si haces clic en esto, haces doble clic para ingresar al modo de edición, verás que la entrada cambia de texto simple a tipo de entrada número. Y esto es mejor para la accessibility porque los usuarios ahora pueden usar su teclado Ahora pueden usar su teclado para interactuar con esta entrada, o pueden escribir el número que desean sin equivocarse con los caracteres. Muy bien. Y luego presionar enter para guardar data aquí. Ahora, esto también funcionará con el filtrado.

9. Filtrado de la Cuadrícula de Datos y Gestión de Columnas

Short description:

La cuadrícula de datos proporciona filtrado y clasificación predeterminados. Sin embargo, al tratar con columnas de fecha, el tipo de datos debe convertirse de cadena a fecha. También se puede personalizar el ancho y formato de la fecha. Además, la cuadrícula de datos ofrece columnas gestionadas para filtrar y buscar según los tipos de columna.

Estas características vienen incluidas en la cuadrícula de datos, que proporciona filtrado avanzado y clasificación predeterminada. Con el tipo de datos correcto, se realizará la clasificación en el orden correcto.

A continuación, la última columna que tenemos en el conjunto de datos es la fecha de fabricación. La agregaré como la última columna aquí. Igual que antes, escribamos 'manufacture date'. Y luego escribamos el nombre del encabezado 'manufactured dates'. Muy bien, y también agregaré 'editTable: true'. Ahora, como sabemos que este será un tipo de dato fecha, agreguemos 'type: date'. ¡Ups! Muy bien, si guardo el archivo, entonces, boom, esto no es una característica, sino un error. ¿Qué sucedió? Dice que el tipo de columna de fecha solo acepta objetos de fecha como valores. ¿Qué está mal? Si observamos nuestro tipo de datos, veremos que es una cadena. Y esto sucede todo el tiempo porque generalmente los datos provienen del servidor, y los datos no pueden tener un tipo definido desde el servidor. La mayoría de las veces serán cadenas. Y porque definimos el tipo de dato como fecha en la cuadrícula de datos, pero los datos que enviamos a la cuadrícula de datos son cadenas, por eso la cuadrícula de datos muestra un error. Lo que debemos hacer es convertir ese tipo de dato de cadena a fecha y enviarlo a la cuadrícula de datos. La cuadrícula de datos tiene una propiedad llamada 'valueGetter' que nos permite convertir el tipo de dato en la cuadrícula de datos. Podemos hacer eso agregando una función aquí. Y los valores estarán dentro de 'values'. Entonces, 'param.value' es una cadena de este valor. Así que debemos convertir esto en un objeto de fecha. Podemos hacerlo envolviéndolo con 'new Date()'. Ok, esta línea convierte los datos entrantes en un objeto de fecha para que coincida con el tipo que hemos definido aquí. Guardemos el archivo. Y ahora está de vuelta. Muy bien. Ahora la fecha es bastante estrecha. También podemos definir el ancho como número. En este caso, intentemos con 200. Ok, es mucho mejor. Y ahora te encontrarás con este caso en el que quieras cambiar el formato. Ahora está usando mes, día y año. Quiero cambiarlo a otro formato. Para hacer eso, puedes agregar 'valueFormatter'. También será una función y te enviará los valores. Luego puedes agregar 'params.value'. Y debes tener en cuenta estos valores. Estos valores provienen del resultado de 'valueGetter'. Estos valores no son los valores sin procesar porque hemos aplicado 'valueGetter', por lo que serán el resultado, que es el objeto de fecha. Como el valor es un objeto de fecha, podemos usar el método 'toLocaleDateString()' para convertirlo en una cadena de fecha. Así que podemos usarlo directamente aquí. Ahora, si guardo, debería ver un formato diferente aquí. Muy bien, así es como se cambia el tipo de dato y cómo se puede formatear lo que se muestra en la pantalla. Muy bien, genial. A continuación, veamos lo que proporciona la cuadrícula de datos de forma predeterminada. Tenemos columnas gestionadas que puedes usar si tienes muchas columnas. Ahora mismo solo tenemos cuatro, pero si tienes 20 o 30 columnas, esta función es muy útil para filtrar las columnas que el usuario no desea ver. También puedes buscar y mostrar todas las columnas. Esto viene incluido y puedes filtrar según el tipo de definición de columna, lo cual es bastante complejo. Si proporcionas un tipo, los valores del filtro para esa columna corresponderán al tipo que hayas proporcionado también.

10. Reemplazando Ranuras de la Cuadrícula de Datos con Joy UI

Short description:

La cuadrícula de datos te permite reemplazar las ranuras con componentes personalizados de Joy UI. Al importar las ranuras de Joy desde MUI x-databricks-joy, puedes reemplazar ranuras como el icono, el botón y el campo de entrada de texto. La paginación, la apariencia y varios componentes cambiarán para usar Joy UI, brindando una experiencia visual diferente. Se agregarán más componentes en el futuro, convirtiendo a la cuadrícula de datos de Joy UI en la solución definitiva.

Algo así, para que no tengamos esta fecha y podamos cancelarla. Muy bien, otra característica poderosa de la cuadrícula de datos es que te permite reemplazar todas estas ranuras que ves en la cuadrícula de datos, como el icono, el botón, el campo de entrada de texto con el concepto de ranuras. Tiene una propiedad de ranuras, déjame ponerla aquí, propiedad de ranuras, y puedes reemplazar todas estas con tu componente personalizado. Y hoy, lo que vamos a reemplazar, reemplazaremos estas ranuras, no todas, pero casi todas con componentes de Joy UI. Y, ya lo hemos importado aquí, que son las ranuras de Joy desde MUI x-databricks-joy. Así que es una API experimental en este momento, pero planeamos hacerla estable en el futuro. Entonces, probémoslo primero. Genial. Tal vez podamos registrar lo que hay dentro de la ranura de Joy también. Echemos un vistazo primero. Bien, si guardo aquí, deberías ver un objeto, que es por ejemplo el botón. Este es el componente react, y el checkbox también es un componente react. Estas claves coincidirán con las ranuras que la cuadrícula de datos te permite reemplazar. Muy bien, pongámoslo en la cuadrícula de datos. Lo pondré aquí y luego, si guardas el archivo, ahora deberías ver alguna diferencia. La paginación cambiará para usar el componente JoyUI. La apariencia será un poco diferente ahora, con algunos bordes, sombras y colores. Y el botón de icono cambió. Algunos iconos cambiaron. Permíteme abrir esto, ¿de acuerdo? Si recuerdas, el icono cambiará. Y veamos, el filtro. De acuerdo, ahora cambió al campo de entrada de texto de JoyUI. ¿Y qué más? Echemos un vistazo a la gestión de columnas. De acuerdo, el interruptor usará componentes JoyUI. El campo de texto también y el botón aquí. Así que acabamos de reemplazar el componente MaterialEye predeterminado con JoyUI. No es todo por ahora, pero seguiremos agregando más. Y al final, no tendrás que importar las ranuras, sino que usarás la cuadrícula de datos de Joy al final. De acuerdo, genial.

11. Creando Columna de Autocompletar

Short description:

En esta parte, aprenderemos cómo crear una nueva columna en la cuadrícula de datos que permita a los usuarios seleccionar opciones desde un campo de entrada utilizando el componente de autocompletar. Pasaremos por los pasos de agregar la columna, configurar el componente de autocompletar, proporcionar opciones y mejorar la experiencia del usuario agregando la propiedad de enfoque automático.

Ahora que hemos aprendido los conceptos básicos de la definición de columnas. La siguiente será un poco más advanced. Hagamos algo, algo divertido. Y te encontrarás con este caso de uso todo el tiempo cuando quieras crear tu propio componente de edición.

En este momento, lo que obtienes de la cuadrícula de datos es un campo de entrada de texto simple basado en el tipo que defines. Muy bien, pero a continuación vamos a construir nuestro propio componente de edición. Muy bien. Y lo que vamos a construir es una nueva columna. Y eso permite al usuario seleccionar algunas opciones desde el campo de entrada. Y ahí es donde entra en juego el autocompletar.

Crearé una nueva columna como siempre. La llamaré `país de fabricación`. Y luego agreguemos un nombre de encabezado, `país de fabricación`. País, OK. Y agreguemos editable como verdadero. Y ahora, cuando quieras crear tu propio componente de edición y la cuadrícula de datos nos permite hacerlo usando `render edit cell`. Y `render edit cell` será una función que usa los mismos parámetros. Luego puedes renderizar cualquier elemento react que desees. Ahora hagámoslo con `test`. Y guardaré el archivo, y luego tendremos nuestra nueva columna aquí. Muy bien, creo que vamos a eliminar el ancho aquí, tal vez cien. Creo que tal vez 64. Ok. Y luego agreguemos este ancho como 200. Muy bien, ahora si haces doble clic aquí para entrar en el modo de edición, verás tu componente aquí, que es un simple div con `test` como texto. ¿De acuerdo? Ahora cambiaremos esto al componente de autocompletar, que ya importé en la parte superior, en algún lugar aquí. ¿De acuerdo? Ok, escribamos `autocomplete`. Y lo que tienes que proporcionar al autocompletar son opciones como un array. Así que por ahora, proporcionemos un array vacío para ver cómo se ve y luego lo cerramos . Ahora, si guardo el archivo, deberías ver un campo de entrada aquí. Y si haces clic en el campo de entrada, verás que no hay opciones. Porque aún no hemos proporcionado ninguna opción. Agreguemos un poco más como marcador de posición. Porque ahora mismo está vacío. Elige un país. Ok, muy bien, ahora lo tendrás. Y ahora, reemplaza la opción con mis datos simulados que preparé. Echemos un vistazo dentro. Ahora el país, el json es solo un array de elementos aquí con código y etiqueta. Nada más que eso. Así que volvamos al código y reemplacemos este array vacío con `country` y luego guardaré el archivo y verás algunos cambios. Ok, ahora tenemos opciones aquí, y lo bueno del autocompletar es que obtenemos accessibility de forma predeterminada. Ahora mismo, estoy usando mi teclado. Así que tengo un indicador aquí que detectará mi teclado, así que estoy usando la tecla aquí y si presionas enter, seleccionará la opción. Pero ahora mismo, cuando presionas enter, se guarda en la cuadrícula de datos, pero aún no aparece porque no hemos enviado esos datos que seleccionamos a la cuadrícula de datos, lo cual haremos a continuación. Muy bien, antes de guardar esos datos, hay algo que me gustaría hacer primero para mejorar la experiencia. Ahora, si ves que cuando hago doble clic en la celda, lo que tengo que hacer a continuación es hacer clic nuevamente, y es bastante molesto. Entonces, lo que podemos mejorar aquí es agregar una propiedad llamada `auto focus` para que, una vez que aparezca el autocompletar, se enfoque automáticamente en el campo de entrada. Cuando lo guarde, ok, cierremos y hagamos doble clic nuevamente. Ahora se enfocará en el autocompletar para que los usuarios puedan comenzar a escribir de inmediato.

12. Personalizando Opciones de Entrada y Apariencia

Short description:

Ahora, abramos las opciones al enfocar utilizando la propiedad 'open on focus'. También podemos eliminar el borde de entrada para que coincida con la apariencia de la celda. JoyUI permite la personalización a través de variables CSS y variantes globales. Puedes personalizar el componente usando la propiedad SXprop y elegir entre cuatro variantes predeterminadas y seis colores.

Muy bien. Ahora, hay una cosa más que podemos hacer aquí, que es abrir las opciones al enfocar. Y podemos hacerlo con la propiedad 'open on focus' y guardar. Correcto. Y si hago doble clic, las opciones aparecerán cuando el campo de entrada esté enfocado. Estas dos propiedades son bastante útiles para este caso de uso y permiten al usuario seleccionar las opciones directamente. Muy bien.

Genial. Ahora hay algunos estilos que quiero mostrarte cómo JoyUI te proporciona variables para personalizar. Porque en este momento, si haces doble clic, verás que el borde se repite. Tenemos un borde enfocado de DataGridCell, y también tenemos el borde de la entrada. Así que vamos a eliminar, quiero eliminar el borde de la entrada para que se vea como una entrada igual que la celda. Para hacer eso, vamos a los elementos, y bien. Para hacer eso, vamos a debug el componente para ver qué es lo que tenemos que anular. Ahora, cuando te enfocas en esta entrada, el enfoque desaparecerá. ¿Correcto? Y es bastante difícil debug qué está pasando. Un truco que puedes hacer es presionar comando + shift y luego P. Supongo que en Windows será control + shift + P. Esto abrirá la herramienta de profundidad. Luego puedes buscar 'focus'. Y hacer clic en 'emulate a focus page'. Cuando hagas clic en esto, se enfocará en la página. Y si te desplazas hacia abajo e interactúas con la herramienta de profundidad, el enfoque se mantendrá como está en la página. Muy bien. Así que volvamos a nuestra entrada aquí. Ahora, disfruta de lo que es diferente de TUI mientras experimentamos con variables CSS. Así que cambiamos las variables CSS que creemos que serán útiles para que los desarrolladores personalicen el componente. Y verás que ahora el enfoque proviene de estas variables, proviene de 'box static'. Si lo quitas, desaparecerá. Pero en este caso, está en el selector 'before'. Y si tienes que escribir un CSS con este selector, será demasiado largo, ¿verdad? Es más fácil si personalizas o anulas las variables CSS. En este caso, el color es este. Así que si cambio el color, bien, es este, estas variables. Oh, ahora ha desaparecido. Así que hagamos clic en esto. Ahora verás que puedes copiar esto y luego puedes personalizar estas variables usando SXprop. SXprop te permite escribir CSS en el componente y puedes escribir cualquier cosa como con 100% o como margen, todo lo que está disponible en CSS y la variable CSS también es una propiedad válida. Entonces lo que puedes hacer es simplemente pegar una variable CSS y poner los valores que te gusten. En este caso, vamos a eliminarlo. Así que 'transparent' es lo que estamos buscando. Muy bien, y ahora si guardas, el color ha desaparecido, ¿verdad? Y a continuación, aún verás el borde inicial, el gris, este, el gris aquí, que aparece inicialmente debido a las variantes. Aquí es donde quieres cambiar la variante y en Joy UI, todos los componentes tienen la misma variante. Entonces tienen el mismo conjunto de variantes, lo siento. A esto lo llamamos características de variante global donde puedes elegir una de las variantes de las cuatro variantes predeterminadas en cualquier componente, y vamos a probarlo. Ahora mismo, por defecto, la entrada está en la variante de contorno, así que cambiemos a la variante simple para ver cómo se ve. Genial, así es como queremos que se vea, pero tal vez probemos otras variantes. Entonces 'soft' creará un fondo sutil y ¿qué hay de 'solid' aquí? 'Solid' creará un fondo intermitente con un texto blanco. Y también puedes cambiar el color porque la variante siempre viene con colores, y tenemos seis colores para elegir, y por defecto, este color es neutral, así que puedes cambiarlo a algo como 'primary' o tal vez como, ¿qué más? 'Warning', por ejemplo. De acuerdo, en JoyUI, una variante y colores van juntos. Y ahora verás que no se ve bien en absoluto porque tenemos dos componentes dentro.

13. Guardando Datos y Mejorando el Autocompletado

Short description:

En esta parte, aprendimos cómo guardar los datos seleccionados de vuelta en la cuadrícula de datos usando la función onChange. Los valores seleccionados por el usuario se envían de vuelta a la cuadrícula de datos usando el método params.api.setedcell. Los datos se guardan en la cuadrícula de datos, pero se representan como una cadena. Para mostrar la etiqueta de la opción seleccionada, utilizamos el formateador de valores. También exploramos la apariencia de la opción del componente de autocompletado de Joy UI e implementamos en nuestro código. Por último, nos aseguramos de que cuando se guardan los datos y se hace clic de nuevo, el enfoque esté en la selección anterior.

Este es otro componente, que es el botón de icono, pero más adelante te mostraré una característica muy interesante de JoyUI. Por ahora, volveré a usar variantes simples. Genial, esto es lo que quiero. Y... Bien, esto está hecho para estilizar nuestro autocompletado.

A continuación, voy a guardar los data que selecciono de vuelta en la cuadrícula de data. ¿Cómo hacer eso? Ahora lo que tengo que hacer es escribir la función onChange para escuchar la opción que selecciona el usuario. Y dentro de ella habrá un evento y los valores que selecciona el usuario. Vamos a consol.log los valores para ver cómo se ven. Ahora guardo el archivo y luego cambio a la consola y luego elijo una opción aquí. Bien, estos son los valores que obtenemos del controlador onChange. Son el mismo objeto que tenemos dentro de countries.json. Muy bien, lo que queremos hacer es usar estos valores que selecciona el usuario. Y enviarlos de vuelta a la cuadrícula de data y podemos hacer eso usando params.api.setedcell. Muy bien, esta API es de la cuadrícula de data. Y la cuadrícula de data proporciona este método. Ahora, si abro. Hay tres cosas que tenemos que especificar, que son el campo, el ID y los valores. El campo será este campo, que proviene de los params. Y el ID será el mismo, será el ID de las celdas. Y... Los valores serán los que selecciona el usuario, que son estos. Ahora voy a eliminar el console.log aquí. Y luego, una vez que guardo el archivo, y elijo cualquier valor aquí, y luego presiono enter para guardar. Ahora los data se guardan en la cuadrícula de datos, pero verás que se muestra como [object Object], porque enviamos un objeto a la cuadrícula de datos, por defecto, la cuadrícula de datos lo representará como una cadena. Esto se debe a que enviamos un objeto, y la cuadrícula de datos siempre lo convertirá en una cadena. Si lo pruebas en tu navegador, obtendrás el mismo resultado. Así que object.toString, obtendrás esto, que es lo mismo que ves aquí. Puedes hacer lo mismo que hemos aprendido antes, que es el formateador de valores, y luego será un params, y luego un params.valor, así que ahora, params.valores es el objeto, y luego tendremos que... Así que pongo el sombreado opcional aquí porque algunas celdas pueden ser indefinidas, y luego pongo una etiqueta porque quiero mostrar la etiqueta que el usuario selecciona. ¿De acuerdo? Así que si guardo el archivo y luego elijo la opción de nuevo y luego presiono enter. Ahora debería ver la etiqueta en la celda. Una vez que guardas, o una vez que sales del modo de edición. ¿De acuerdo?

Ahora, vamos a hacer algo un poco más interesante aquí porque nuestra opción es bastante aburrida. Es solo un texto simple. Así que lo que podemos hacer aquí es copiar un poco de código y robar algo de Joy UI, documentation, ahora. De acuerdo. Así que vamos a mui.com y luego vamos a abrir, déjame aumentar esto. Y luego ve a docs y ve a JoyUI. Y luego, para Matt, presiona comando k para buscar los componentes o, en Windows, puedes usar control k. De acuerdo, ahora puedes escribir autocompletado y luego presionar enter. Irá a la documentation del autocompletado y tenemos muchos demos aquí. Y el que queremos es la apariencia de la opción. Ahora ves que esto se ve mucho mejor para las opciones y lo vamos a robar. Y así, en todos los demos, puedes mostrar el código fuente o puedes abrirlo y probarlo en el code sandbox también. Y ahora mostraré el código fuente y luego copiaré la opción de renderizado aquí. Así que solo copia el código y volvamos a nuestro código fuente y lo reemplazaré aquí porque ya importé todos los componentes en la parte superior del archivo, así que no tenemos que preocuparnos por eso. Ahora, si guardas el archivo, deberías tener una opción bastante agradable aquí, ¿verdad? Así que puedes eliminar algo si no quieres, está bien, al menos tenemos la bandera, ¿verdad? Y se ve mucho mejor. Genial, ¿qué más? Ah, okay, así que la última cosa para la parte uno, cuando guardas los data, y luego si haces clic de nuevo en él, en realidad, debería enfocarse en la selección anterior, pero ahora, no hay valores, ¿verdad? Eso es porque aún no hemos enviado los valores que el usuario selecciona al autocompletado, así que podemos hacer eso pasando params.values, o si no hay params.values, simplemente pasaremos null. No podemos pasar y definir, porque eso, verás algún error del componente de autocompletado, y eso es por el control y la entrada no controlada de React.

14. Personalizando Formato y Estilo con la Propiedad SX

Short description:

Ahora, si guardas el archivo y eliges una opción, debería seleccionar la anterior cuando vuelvas a editar. Puedes personalizar el formato utilizando render cell y value formatter. Al utilizar la propiedad SX con el componente Box, puedes dar estilo al div y agregar propiedades CSS. La propiedad SX permite selectores complejos y opciones de estilo poderosas.

Muy bien, ahora si guardas el archivo, y luego si eliges uno, digamos este, y luego presionas enter, y si intentas editar nuevamente, ahora debería seleccionar el anterior, que es este, y luego puedes usar el teclado.

De acuerdo, genial, y prometo que este es el último paso para la primera parte, que es que podemos personalizar podemos personalizar el formato con nuestro propio componente personalizado también, así que para hacer eso podemos cambiar el value formatter para controlar completamente cómo aparecerá utilizando render cell. De acuerdo, render cell y value formatter son prácticamente lo mismo, pero render cell te permite controlar la interfaz de usuario que deseas y ahora sí mostraré la etiqueta, pero la pondré en un div y también usaré la imagen que tenemos aquí y la pondré delante de la etiqueta. Ahora tendrás que cambiar la opción aquí porque no tenemos ninguna opción aquí y la opción será params.value. De acuerdo, ahora si guardas, entonces se bloqueará. ¿Por qué? Porque no puede leer la propiedad de indefinido que supongo que es esta. Oh, de acuerdo. Esto se debe a que params.values puede ser indefinido así que lo que podemos hacer aquí es renderizar una condición. Renderizaremos esta interfaz de usuario solo cuando params.values exista. De acuerdo, de lo contrario simplemente renderizaremos null. Porque, no, de acuerdo, genial. Y si elegimos, luego presionamos enter, de acuerdo, ahora tenemos la bandera. De acuerdo, creo que quiero señalar una última cosa aquí que es el estilo en JoyUI en MUI, Mui ecosystem eso, entonces ahora si, digamos, quiero dar estilo a este div, ¿cómo lo haces? Bueno, una forma convencional es usar el nombre de clase, ¿verdad? Y luego crear un archivo CSS o tal vez un archivo SASS, o si quieres usar Tailwind, eso también está bien. Pero en el ecosystem de MUI, por lo general, usaremos un componente práctico con la propiedad SX, y ese componente se llama Box. Y Box es solo un div simple con una característica más que es la propiedad SX. Ahora, con la propiedad SX, puedes escribir CSS, como display flags, y luego un line item sender y agregar un espacio aquí. Entonces, si no entiendes qué es esto, esto es solo CSS que puedes descubrir más tarde. Esto es para crear un flex box y agregar algo de espacio entre los elementos aquí. Y ahora si guardo el archivo, y luego lo elijo nuevamente, de acuerdo, ahora deberías ver un espacio aquí. Aquí es más poderoso, con SxProp, también puedes escribir un selector complejo. Ahora puedo hacer esto en SxProp. Entonces puedo dar estilo a la imagen debajo de este box usando AND y luego IMG para crear un CSS anidado también. Así que es bastante poderoso aquí. Y puedo decir, de acuerdo, agreguemos un border radius de 10 píxeles diagonal 8 píxeles y luego guardo. Ahora veamos cómo se ve. De acuerdo, ahora es como un óvalo. Se ve y se siente, de acuerdo, genial.

15. Creando Nuevas Filas y Guardando Datos

Short description:

En la primera parte, aprendimos sobre la cuadrícula de datos y las definiciones de columnas. Exploramos los slots de Joy y cómo agregar componentes de Joy UI a la cuadrícula. También vimos cómo crear celdas de edición personalizadas y construir un componente de autocompletado. Además, aprendimos sobre la personalización de los componentes de JUI utilizando la propiedad SX y las variantes globales. En cuanto a la elección entre box y stack, depende de las preferencias personales y el diseño deseado. El componente stack ahora admite la propiedad flex gap, que se recomienda para una mejor personalización. En la próxima parte, nos centraremos en crear, leer, actualizar y eliminar datos. Comenzaremos permitiendo a los usuarios agregar una nueva fila y guardar la información ingresada. Esto implicará el uso del slot de la barra de herramientas y agregar un componente de botón. También exploraremos el uso de las variantes globales y el componente box para el estilo.

Y esto es todo para la primera parte. Resumamos lo que hemos aprendido. Sam, ¿deberíamos resumir y tomar un descanso de unos cinco minutos? Sí, sí, buena idea. Veamos, ¿qué hemos aprendido y qué hemos hecho hasta este punto? Hemos agregado una nueva cuadrícula de datos a nuestra aplicación. Hemos definido algunas filas y columnas. Hemos visto cómo agregar slots de Joy a la cuadrícula de datos para agregar componentes de Joy UI internamente en la cuadrícula. Hemos configurado algunas columnas y visto las definiciones de columnas, cómo hacer que las cosas sean editables, cambiar el tamaño. Hemos visto cómo crear celdas de edición personalizadas e incluso cómo construir un componente de autocompletado muy bueno, así como robar algo de código directamente de la documentación de MUI. También hemos visto cómo tomar los valores de ese autocompletado y colocarlos en una celda personalizada renderizada en el otro lado. Y hemos tenido un pequeño vistazo de cómo comenzar a personalizar algunos componentes de JUI utilizando la propiedad SX y también las variantes globales.

Sí, así que con eso, tomemos un descanso rápido aquí. Creo que estamos en un buen punto de parada. Muy bien. Hay una pregunta bastante interesante en el chat. ¿Qué debemos considerar al elegir entre box y stack? Bueno, creo que esto es... Tu preferencia basada en la experiencia. Como los uso indistintamente todo el tiempo. Así que depende del diseño que quieras crear. Si veo, por ejemplo, un botón que se mantiene verticalmente con algo de espacio entre ellos, siempre termino usando stack, pero para otros casos de uso, siempre comienzo con box porque puedo controlar todo el CSS que quiero con box. Pero siempre puedes cambiarlos en cualquier momento. Sí, estaba tratando de pensar, ¿hay alguna característica o propiedades que sean únicas para uno pero no para el otro? Ahora mismo, stack está utilizando, por defecto, un enfoque de margen porque antes, GAP no era completamente compatible, pero ahora está disponible en la mayoría de los navegadores y también tenemos una nueva propiedad, permíteme compartir mi pantalla antes de comenzar el siguiente paso. Muy bien, ahora en... Abramos el stack. Muy bien, ahora voy a abrir la herramienta de inspección aquí y verás que ahora el stack está utilizando margen y esto funciona bien, pero cuando quieres personalizar algo, crea muchos problemas porque, por ejemplo, si quiero personalizar el margen de este elemento, no puedo hacerlo porque es muy difícil anular estos selectores CSS aquí, pero tenemos una nueva propiedad que te permite cambiar la implementación de usar margen a usar gap, que es mucho mejor. Así que puedes consultar la documentación, es solo una propiedad que puedes agregar en el stack y hará que el componente use gap en lugar de margen. Y lo recomiendo porque si miras, ¿puedo usar y luego flex gap? De acuerdo, por lo tanto, el gap del flex box es casi del 93%, lo cual es bastante cercano al gap del CSS grid, que es del 95%. Así que si te importa mucho ese 2%, realmente recomiendo comenzar con gap en lugar de margen. Genial, sí, muchas gracias por compartir eso. Ni siquiera lo sabía. Usa la propiedad flex gap, demuestra lo masivo que es nuestra biblioteca de productos. Eso es genial. Muy bien, veamos si estás listo para la siguiente parte, hagámoslo. Para resumir lo que aprendimos en la última sesión, tenemos un componente de edición personalizado y aprendimos los conceptos básicos de la definición de columnas. La próxima parte será mucho más interesante. Así que comenzaremos con la creación, lectura, actualización y eliminación. Y el primer paso es permitir que los usuarios hagan clic en algunos botones y luego se abrirá la nueva fila y el usuario podrá escribir la información y presionar enter para guardar esa nueva fila. Oops. Muy bien, para hacer eso, una cuadrícula de datos nos permite insertar un slot, el slot de la barra de herramientas, por lo que podemos crear nuestro propio componente, ahora podemos llamarlo barra de herramientas y luego devolvamos un div y agreguemos un botón aquí. Entonces, un botón es de Joy UI, ya lo importamos en la parte superior y ahora lo llamaremos agregar registro. Muy bien, luego pongamos una barra de herramientas dentro de los slots, así que voy a expandir Joy slots aquí y agregar el slot de la barra de herramientas con mi propio componente. Y si guardo el archivo, debería ver mi botón aquí. Muy bien, okay. Y lo que mencioné en la parte anterior es sobre las variantes globales. Esto es algo que, en mi experiencia, uso Joy UI para construir ejemplos y todas las cosas que realmente me gustan las variantes globales que me permiten crear muchos ejemplos diferentes. Ahora, en el botón, también puedes usar la misma variante que el autocompletado y obtendrás el mismo resultado. Y ahora, por ejemplo, iré con soft. O este, y luego puedo cambiar el color a neutral. Muy bien. Ahora usemos el box para crear un pequeño espacio alrededor del botón aquí.

16. Interactuando con la Cuadrícula de Datos

Short description:

Podemos interactuar con la cuadrícula de datos utilizando un poderoso gancho de React llamado API ref, que proporciona métodos para interactuar con la cuadrícula de datos. Al usar la función updateRows, podemos crear una nueva fila proporcionando una matriz de filas para actualizar. Al agregar una nueva fila, podemos generar un ID temporal y pasarlo junto con otros valores iniciales. Además, podemos cambiar el modo de edición de la cuadrícula de datos a Fila, lo que permite editar toda la fila de una vez. Al agregar un registro, la fila entrará automáticamente en modo de edición y el usuario podrá comenzar a escribir o cambiar los datos de inmediato. Los cambios se guardarán cuando el usuario presione Enter. Sin embargo, todavía hay un problema.

Entonces agreguemos un poco de relleno. De acuerdo, podemos comenzar con esto. Y luego, si quieres interactuar con la cuadrícula de datos, puedes usar este gancho de React de la cuadrícula de datos. Es una API muy poderosa, por lo que devolverá todos los métodos con los que puedes interactuar con la cuadrícula de datos. Así que podemos llamarlo API ref y luego llamar al contexto de API de uso. Ahora te mostraré qué hay dentro de API ref. De acuerdo, ahora guardo el archivo y luego deberíamos ver un objeto aquí. Entonces, el método está dentro del objeto actual. Y verás que hay muchos métodos con los que puedes interactuar, cambiar datos o obtener algo de la cuadrícula de datos aquí. De acuerdo, no voy a explicar todas las funciones aquí. Usaré la que queremos. En este caso, queremos crear una nueva fila cuando haga clic en este botón. Entonces, esa función es, así que podemos usar aprf.parent y luego updateRows. Update rows. La función updateRows nos permite proporcionar una matriz de filas que queremos actualizar. Y si la nueva fila tiene un nuevo ID, se agregará a la tabla. Entonces lo que tenemos que hacer es crear un nuevo ID. Digamos, en este momento puede ser cualquier ID, pondré un ID temporal en este punto. Y luego pasaremos este ID a este objeto. Y es lo mismo que tenemos en nuestros conjuntos de datos. Entonces podemos pasar un nombre como valores iniciales aquí para los usuarios, y luego la fecha de fabricación puede ser no o puede ser una nueva fecha. Bien, y luego, ¿qué más? Precio, digamos cero primero. De acuerdo, ahora si guardo este archivo y luego hago clic en Agregar registro, deberías ver una nueva fila aquí. De acuerdo, genial. Ahora lo que quiero a continuación es que cuando agregues un registro, se convierta en modo de edición para que el usuario pueda comenzar a escribir o cambiar los datos de inmediato, para que no tenga que hacer doble clic todo el tiempo. Y, oh, hay una cosa que olvidé cambiar aquí. En DataGrid, hay dos tipos de modos de edición. Entonces, lo que estás viendo ahora mismo es que no puedes editar celda por celda, ¿verdad? Pero es bastante molesto si, para una aplicación CRUD como esta, lo que podemos cambiar es cambiar el modo de edición a una forma diferente, por lo que podemos cambiarlo a Fila. Y luego, si guardas esto y luego comienzas a editar cualquier celda aquí, toda la fila cambiará al modo de edición. Y luego puedes usar el teclado para navegar y cambiar los datos de inmediato. Es bastante conveniente y creo que también es una característica muy poderosa. De acuerdo, ahora toda la fila estará en modo de edición y cuando termines, o cuando el usuario termine de editar la celda y luego presione Enter, se guardará todo. Genial, ¿verdad? Volvamos a lo que tenemos aquí. De acuerdo, ahora podemos agregar un registro, pero, lo siento, permíteme actualizar esto. Entonces, lo que queremos es que cuando agreguemos un registro, se enfoque o se convierta en modo de edición esta fila. Podemos agregar un siguiente paso cuando creamos una nueva fila. Podemos agregar este método. De acuerdo, no recuerdo, rowEdit. RowEdit. De acuerdo, podemos usar StartRowEditMode aquí como un siguiente paso. Y esta función necesita un ID. Entonces, el ID será el nuevo que acabamos de crear. Y luego podemos proporcionar un campo para enfocar. Y podemos especificar el campo en el que queremos enfocarnos cuando esta fila se convierta en modo de edición. Puedo enfocarme en el nombre. Ahora puedes probar con otros campos para ver cómo se ve. Y ahora, si guardo el archivo y luego hago clic en Agregar registro, de acuerdo, se enfocará en el nombre, columna, y luego el usuario puede comenzar a cambiar los datos. Elijamos este. Cambiemos a 100 y presionemos Enter y luego se guardará en DataGridState, ¿genial, verdad? Genial, ¿verdad? Ahora aprendimos cómo crear una nueva fila, pero hay un problema.

17. Actualización y Eliminación de Filas en DataGrid

Short description:

Para asegurarnos de que cada nueva fila tenga un ID único, podemos usar la propiedad processRowUpdate del componente DataGrid. Al generar un ID único con la biblioteca UUID, podemos crear un nuevo objeto que combine la fila actualizada con el nuevo ID. Luego, podemos guardar estos datos en nuestro propio estado y actualizar la matriz de filas con la nueva fila. Esto hará que DataGrid se vuelva a renderizar con las filas más recientes. Al actualizar filas existentes, podemos diferenciar entre filas nuevas y existentes verificando el ID. Al usar un ID temporal para filas nuevas y compararlo con el ID de la fila actualizada, podemos determinar si debemos actualizar una fila existente o agregar una nueva fila. Al recorrer las filas y reemplazar la fila con el mismo ID que la fila actualizada, podemos actualizar la fila específica. Finalmente, podemos pasar a la operación de eliminación, que generalmente se implementa utilizando la última columna de DataGrid.

Si intentas crear más registros aquí, se enfocará en la misma fila. Y eso se debe a que cada vez que haces clic en este botón, el ID es el mismo, ¿verdad? Entonces, lo que podemos hacer aquí es, cuando el usuario termine de editar esta nueva fila, puedes crear un nuevo ID para esa fila. Y esto tiene sentido porque la mayoría de las veces, el nuevo ID se genera en el backend, ¿verdad? Así que hagamos esto. Ahora, DataGrid tiene una propiedad que te permite manejar el evento cuando el usuario deja de editar o finaliza la edición. Y esa propiedad se llama processRowUpdate. Y processRowUpdate te devolverá una nueva fila. Entonces, la nueva fila es los datos que el usuario acaba de terminar de actualizar. Bien, así que primero hagamos console.log de la nueva fila. Bien, así que si presiono aquí y luego si hago clic en cualquier cosa y luego presiono Enter, entrará en este processRowUpdate. Pero obtuvimos un error porque processRowUpdate, tienes que devolver algo. Y generalmente tienes que devolver una fila. De lo contrario, este processUpdate lanzará un error. Muy bien, ahora quieres crear un nuevo ID cuando los usuarios dejen de editar. Así que puedo crear un ID. Y hemos instalado una biblioteca llamada UUID aquí, que generará un ID único para nosotros. Así que UUID aquí, y luego, esto será un ID único. Y ahora crearemos un nuevo objeto, un objeto que extenderemos con la fila que los usuarios acaban de actualizar con nuestro nuevo ID, ¿de acuerdo? Y una vez que hagamos eso, en este punto tendríamos que guardar estos datos en algún lugar. Y podemos hacer eso creando nuestro propio estado. Así que aquí crearemos nuestro propio estado, useState y podemos establecerlo como predeterminado como datos, como un valor predeterminado, y luego en este punto estamos cambiando, tomamos el control de los estados y luego enviaremos el estado a la cuadrícula de datos. Muy bien, ahora que tenemos la fila actualizada, lo que queremos hacer es establecer las filas como si estuviéramos agregando nuevos datos a esta matriz. Así que establecemos las filas y obtendremos una fila anterior y luego extenderemos la fila anterior y agregaremos la nueva al estado. Muy bien, ahora si guardo el archivo y luego presiono agregar registro y elijo datos, cambio el pegado de datos y luego el precio 100 y luego cuando esté de acuerdo con esto, cuando presione Enter, creará una nueva, bueno, creará una nueva, así que aquí se genera el ID en esta línea y se guarda en este estado. Entonces, cuando React se vuelva a renderizar, y nuestras filas contengan la nueva fila y luego se envíen a la cuadrícula de datos y luego la cuadrícula de datos se volverá a renderizar con las filas más recientes. Muy bien, ahora tenemos las acciones de creación. A continuación, vamos a realizar la operación de actualización y vamos a intentar actualizar algunas de las filas existentes. Así que cuando intentemos actualizar aquí y presionemos Enter, ¿qué sucede? Crea una nueva fila. ¿Por qué es eso? Es porque cada vez que el usuario deja de editar o termina de editar, entrará en esta función, que es processRowUpdate. Y ahora, no sabemos si es una fila nueva o una fila existente, siempre crearemos un ID único nuevo y lo agregaremos como una nueva fila, y por eso siempre tenemos una nueva fila aquí, incluso si actualizamos la fila existente, ¿de acuerdo? Muy bien. Entonces, lo que tenemos que corregir aquí es que tenemos que dividir esta condición. Y al decir eso, okay, esta parte es para la fila existente para que podamos actualizar una fila específica. Pero esta parte usaremos la adición de una nueva fila, ¿de acuerdo? Y ahora podemos verificarlo desde el ID. Entonces podemos decir que si la fila existente es igual a new row.id no debe ser igual al ID temporal. Entonces, el ID temporal es el que usamos aquí, ID temporal. Entonces, cuando hagamos clic en Agregar registro, crearemos un ID temporal aquí. Y eso significa que si new row.id no es igual al ID temporal, significa que esta fila es una fila existente. ¿De acuerdo? Y una vez que sepamos esto, entonces podemos agregar una condición aquí de que si es una fila existente, entonces estableceremos la fila en una lógica diferente. Obtendremos la fila anterior y luego actualizaremos la fila que tiene el mismo ID. Y podemos hacerlo primero fila.map y luego obtenemos la fila, ¿verdad? Y luego, si row.id es igual a new row.id, entonces lo reemplazaremos con la nueva fila. Para otras filas, las mantendremos igual, como esto. Y luego, al final, simplemente devolveremos la nueva fila para que no pase por esta condición. Ahora, si guardo el archivo y luego actualizo la fila existente, usaré esto y tal vez esto, y luego enter. Genial, debería actualizarse en la fila existente. Si agrego un registro aquí y elijo algún país y cambio a 100, 100 y luego enter, debería crear una nueva fila. O si intento actualizar esta fila y presiono enter, debería guardarse en la fila existente. Genial. Ahora tenemos Crear y Actualizar. Ahora veamos la operación final, que es la eliminación. Muy bien. Para la eliminación, generalmente puedes ver que la última columna se utiliza para realizar acciones adicionales como eliminar.

18. Agregando Acciones a la Cuadrícula de Datos

Short description:

Para agregar acciones a la cuadrícula de datos, podemos usar el campo de acciones y el componente de elemento de celda de acciones. Al proporcionar una clave, un icono y una etiqueta, podemos crear un botón de icono en la última columna. Sin embargo, la funcionalidad onclick aún no se ha agregado.

Entonces también podemos hacer esto agregando un campo de acciones y un tipo espacial, que también es acciones. Ahora, cuando usas el tipo acciones, debes proporcionar un conjunto de acciones que deseas realizar. Puedes hacerlo usando una propiedad llamada obtener acciones y parámetros. Y luego debes proporcionar una matriz de acciones que deseas crear. Y podemos usar un componente de la cuadrícula, elemento de celda de acciones. Entonces, una vez que hagas esto, tendrás que proporcionar una clave porque está dentro de una matriz para que el enlace funcione correctamente. Así que pon una clave eliminar, y luego agreguemos un icono icono de eliminar, y luego agreguemos una etiqueta también. Ahora, si guardas esto, entonces deberías ver que la última columna aparece así, como un botón de icono, y en este momento no hace nada porque no hemos agregado el onclick. Genial.

19. Agregando Acción de Eliminación y Aprendiendo Características de Joy UI

Short description:

Ahora agreguemos la acción de eliminación utilizando el evento onclick y para eliminarla directamente. Solo necesitamos establecer las filas y luego eliminar el rol que acabamos de hacer clic. La cuadrícula de datos tiene una propiedad llamada auto-height, que ajustará la altura según el contenido. Entonces, cuando se activa auto-height, la cuadrícula de datos se adaptará a la altura que cambió. Lo que hemos aprendido hasta ahora es CRUD en lo que ha cambiado, el estado que creamos y lo que hacemos aquí es la función principal processRoleUpdate que maneja la creación, creación de esta parte y actualización del rol existente. Para ELIMINAR, es directo. Ahora aprendamos algunas características de Joy UI. Así que importemos cheat de MUI Joy Sheet. Sheet es como un componente práctico, igual que Box, pero contiene una propiedad de variante y una propiedad de color que puedes elegir. Convirtamos esta barra de herramientas en un fondo llamativo utilizando una variante llamada solid variant y el color será neutral. Cuando usas la variante en Joy UI en muchas capas del grupo de componentes, puedes definir la importancia del componente utilizando variantes globales.

Muy bien. Ahora hay algunos detalles que creo que deberían funcionar. Puedes agrupar algunas acciones en el menú también. Y creo que estas son cosas bastante geniales que he visto en casos de uso comunes. Ahora, si pones 'show in menu', se agrupará en un punto vertical aquí. Entonces, cuando hagas clic, obtendrás una acción en un menú en su lugar, pero no voy a usar esto ahora. Así que agreguemos la acción de eliminación utilizando onclick y para eliminarla directamente. Solo necesitamos establecer las filas y luego eliminar el rol que acabamos de hacer clic. Entonces, ahora usaremos la misma función aquí y esta vez filtraremos la fila que no tenga el mismo ID, rms.id. ¿De acuerdo? Espero que esto funcione, ¿verdad? Si guardas el archivo, ahora filtrarás la fila que tiene el mismo ID que la fila en la que hiciste clic. Ya he guardado el archivo y si haces clic en eliminar, debería eliminar esta fila. Genial. Muy bien. Oh. Ahora, si eliminas todas las filas, se verá extraño como esto. Y acabo de descubrir que la cuadrícula de datosData tiene una propiedad llamada auto-height, que ajustará la altura según el contenido, lo cual es bastante genial. Entonces, cuando se activa auto-height, se verá así. Y si agrego un registro más, verás que la cuadrícula de datos se adaptará a la altura que cambió. Muy bien. Genial. Muy bien. Entonces, creo que esto es todo, hasta ahora hemos aprendido CRUD en lo que ha cambiado, el estado que creamos y lo que hacemos aquí es la función principal processRoleUpdate que maneja la creación, creación de esta parte y actualización del rol existente. Para ELIMINAR, es directo. Para ELIMINAR, creamos una nueva columna de acciones que filtrará el rol que acabamos de hacer clic. Muy bien. Ahora, antes de pasar al siguiente paso, aprendamos algunas características de Joy UI que realmente me gustaría mostrarte. Entonces, importemos algunos componentes de Joy UI y úsalos dentro de la barra de herramientas. Reemplazaré esto con el componente cheat. Ahora no lo he importado. Así que hagámoslo juntos. De acuerdo. Entonces, importemos cheat de MUI Joy Sheet. Muy bien. Y así, Sheet es como un componente práctico, igual que Box, pero contiene una propiedad de variante y una propiedad de color que puedes elegir. Entonces, ahora convertiré esta barra de herramientas en un fondo llamativo. Para hacer eso, usaremos una variante llamada solid variant. De acuerdo. Y el color será neutral. ¡Ups! ¡Ups! Genial. Entonces, ahora obtendrás un fondo llamativo aquí. O tal vez cambiemos a paletas primarias. Muy bien. Y ahora, para los botones, verás que tal vez también puedas cambiar a la variante solid variant. Y tal vez elimines el color. De acuerdo, oops. De acuerdo, entonces lo que quiero mostrarte aquí es que cuando usas la variante en Joy UI en muchas capas del grupo de componentes, puedo mostrarte un botón más para que quede claro. De acuerdo, tal vez el botón tenga la variante llamada menos importante y luego llamemos a esto use variant plain aquí. Y luego tal vez volvamos a hacer esto primero. De acuerdo, permíteme explicarte un poco sobre las variantes globales. Entonces, las variantes globales deberían ayudarte a definir la importancia del componente.

20. Personalizando Colores y Variantes en Joy UI

Short description:

Cuando se utiliza la variante en Joy UI, el fondo y el color del componente se pueden ajustar para atraer a los usuarios y enfatizar la importancia. La propiedad de colores invertidos garantiza una jerarquía consistente al adaptar los colores según la variante. Esta característica se utiliza comúnmente en el diseño moderno.

En este caso, verás que cuando colocas una variante sólida en la pantalla, esa acción debería ser la parte más importante de tu aplicación porque el fondo y el color atraen a los usuarios, ¿verdad? Ahora, este no es tan importante, pero este es más importante. Sin embargo, cuando utilizas variantes en muchas capas, creará inconsistencias en la información. Ahora, si cambio la variante a sólida y luego el color a primario, ahora esto no se puede ver, como si no tuviera suficiente contraste. Y si cambio a suave, ahora este se vuelve más importante porque se ve más obvio, como llamativo que el sólido. Y con esto, tenemos otra propiedad que puede hacer que todos los componentes dentro de este se adapten a los colores según su variante. Y esta propiedad se llama colores invertidos. Entonces, cuando activas esto, todos los elementos dentro de este contenedor adaptarán los colores según la variante para que la jerarquía importante se mantenga igual. Ahora verás que el botón de agregar registro es más llamativo que los otros botones, que siguen siendo los mismos que usaste aquí. Esta es una característica genial de Joy UI, y este tipo de interfaz de usuario aparece mucho en el diseño moderno. Puedes obtener más información en nuestra documentación, pero por ahora vamos a usar esto. Tal vez lo hagamos suave. Muy bien. Genial.

21. Conexión a la Base de Datos con MockServiceWorker

Short description:

Estamos utilizando MockServiceWorker para simular el backend y configurar la base de datos con un esquema. El código crea datos en la base de datos y configura cuatro controladores para la API REST: obtener productos, crear, actualizar y eliminar.

Ahora pasaremos a la última parte, que es conectar a nuestra base de datos, y luego terminaremos nuestra charla. Muy bien. De acuerdo. Como mencionó Sam al principio, estamos utilizando MockServiceWorker para simular el backend y puedo compartir contigo un poco de la configuración para que no te confundas con lo que viene. ¿De acuerdo? Ahora, toda la configuración está en browser.js. Tenemos una base de datos creada con este esquema y luego, cuando se ejecuta el código, creará algunos datos en la base de datos y estos datos son los mismos que teníamos en app.jsx. jsx y al final, crea cuatro controladores que son para la API REST. Entonces, el primero nos permite obtener los productos y el segundo es para crear. El tercero es para actualizar los productos basados en este ID y el último es para eliminar el producto.

22. Conexión al Backend con MOX Service Worker

Short description:

MOX Service Worker te permite interactuar con tu navegador sin llamar a la API real. Puedes controlar el retraso de la API y ver cambios en tiempo real. El mock service worker actúa como un backend falso, permitiéndote probar la adición y obtención de datos. Para conectarte a la interfaz de usuario, utiliza efectos para obtener datos del backend y crear un estado de carga. Establece el estado de carga inicialmente en true, obtén la API, obtén la respuesta y establecela como el estado de las filas. Finalmente, establece el estado de carga nuevamente en false. Utiliza la propiedad LoadingProp en el componente Data Grid para mostrar un spinner cuando se está cargando. Para manejar la operación de creación, actualiza la función y envía los datos al servidor.

Ahora, lo que me gusta de MOX Service Worker es que puedes interactuar con tu navegador sin llamar a la API real y también puedes controlar el retraso de la API para ver cambios en caso de que tengas una interacción compleja o se detenga la carga. Ahora está configurado en 300ms. Ahora puedes probar la API directamente en tu navegador copiando esta línea de código. Es una API de NativeFetch simple. Ahora, si pego esto y luego... Deberías ver que esto también está habilitado cuando actualices la página. Significa que el mock service worker está funcionando. Y luego, si presiono enter, verás que el mock service worker responde con el estado `ok`. Y luego obtenemos la respuesta de vuelta. Así que esto es como un backend falso. ¿De acuerdo? También puedes probar a agregar más data. Así que si presiono enter, ahora verás que se crea un nuevo producto. ¿De acuerdo? Y luego, si intentas obtenerlo de nuevo, deberías ver tres elementos. De acuerdo. El último es uno nuevo. Genial. Ahora probamos que la API funciona. Ahora conectémonos a nuestra interfaz de usuario. De acuerdo, el primer paso es eliminar los data aquí y cambiarlo por vacío porque al principio no tenemos ningún data todavía. Así que ya no necesitamos esto. Y obtendremos los data del backend en su lugar. Para hacer eso, podemos usar efectos aquí para obtener los data del backend. Y podemos crear un estado de carga. isLoading y luego establecer isLoading. Ahora state. Y de forma predeterminada, será true. De acuerdo. Esto es solo para mostrarte que es muy básico obtener data. En el futuro, puedes mejorarlo utilizando otras bibliotecas también. Entonces, al principio, estableceremos isLoading en true. Y luego obtendremos la API y slash productos, ¿verdad? Y luego obtendremos la respuesta y la llamaremos respond.json. Así es como funciona Fetch API. Solo sigo la plantilla aquí y luego obtenemos el resultado. Y finalmente, podemos establecer ese resultado en nuestro estado de filas aquí. Establecer filas y luego resultado. Y ahora estableceremos isLoading nuevamente en false. De acuerdo, ahora podemos usar LoadingState y pasarlo también a los Data Grids. Data Grid tiene LoadingProp, que mostrará el spinner si isLoading es true. Así que ahora guardemos esto y luego actualicemos nuevamente para que veas cómo se ve. Ahora, si actualizo la página verás un spinner durante 700 milisegundos. Y luego ahora los data vuelven del servidor y luego los establecemos en nuestros estados. Bastante genial. Ahora, de acuerdo esto es todo para obtener los data. A continuación, solo manejemos la operación de creación. Entonces haremos, actualizaremos esta función. Ahora, lo que me gusta de esta regla de proceso de actualización es que puedes convertir esta función en una promesa o asíncrona también y luego puedes llamar a la API directamente dentro de esta función y esperarla. Y Data Grid también esperará los resultados. De acuerdo, esto es la parte de actualización, así que primero me ocuparé de la parte de creación. Entonces, cuando tengas la fila actualizada, lo que queremos es llamar a la API. Oh, perdón, enviar los data al servidor.

23. Manejo de Errores en Data Grid

Short description:

En esta sección, aprendimos cómo manejar errores al crear nuevas filas en el Data Grid. Simulamos un error estableciendo la fecha de fabricación en nulo y mostramos cómo manejar el error utilizando la API fetch. Si la respuesta no es correcta, podemos lanzar un error dentro de la función de actualización de fila de proceso. Esto asegura que el usuario permanezca en el modo de edición y pueda actualizar los datos nuevamente. También agregamos una función de manejo de errores al Data Grid y mostramos el mensaje de error al usuario. Esto permite una mejor experiencia de usuario al tratar con errores.

Correcto, y antes de eso, vamos a establecer esta carga en true. Y luego esperemos. De acuerdo, ahora necesito copiar el código. Muy bien, así que copiaré desde la línea 47 hasta la 51. 58, y luego pegarlo aquí. Y luego, esto es el data sin procesar. Lo reemplazaré con mi data aquí, que es la fila actualizada. Muy bien, así que puedes aprender más sobre la API fetch más tarde, pero así es como llamas a la fetch. Si quieres enviar el método post a tu backend. De acuerdo, y luego, cuando esto esté hecho, ahora vamos a establecer la carga en false. De acuerdo, ahora guardemos esto, y luego intentemos crear una nueva fila. Muy bien, si presiono Enter, de acuerdo, ahora se crea el data en el backend. Ahora, para verificar que funcione, obtendré el data del backend utilizando fetch en el navegador aquí. De acuerdo, genial, aquí está el nuevo data que acabamos de crear. Así que funciona. Muy bien, ahora, antes de pasar a la parte de edición, quiero mostrarte cómo podemos manejar el error también, porque esto sucede todo el tiempo. Por ejemplo, si el usuario omite algún campo y luego presiona Enter, y esos data se envían al servidor, y luego el servidor rechaza con el error, ¿cómo manejamos ese error? Para este caso, falsificaré el data aquí. Digamos que forcé la fecha de fabricación a nulo. De acuerdo, lo hago porque quiero que el servidor arroje errores, porque en este momento, debes proporcionar todos los campos al backend. Entonces, para simular el error, puedes poner un nulo dentro de las fechas de fabricación. De acuerdo, si guardo aquí, y luego intento crear una nueva fila, de acuerdo, y luego presiono Enter. Ahora. Ahora esto es, el servidor arrojará el error aquí, ¿verdad? Pero no vemos nada en el frontend, porque aún no hemos manejado el error. Y para manejar el error con la API fetch, necesitamos obtener la respuesta. SiRespuesta, y luego tenemos que verificar si, si la Respuesta está bien o no. De acuerdo. Entonces, hagamos la parte del error. Si la Respuesta no está bien, lo que significa que no es 200, digamos 200 x, x datos, entonces significa que algo está mal. Y lo que podemos hacer aquí es arrojar ese error dentro de esta función de actualización de fila de proceso. De acuerdo, y luego te mostraré más adelante por qué necesitamos arrojarlo. De acuerdo, arrojemos, arrojemos, tal vez deba hacer esto primero. Obtendré el error de la respuesta. Entonces respond.data. Y luego arrojaré ese error desde esta función. Ahora veamos cómo se ve cuando agrego un nuevo registro, bien, luego presiono Enter. Muy bien, lo que me gusta de esto es que si algo está mal dentro de esta función, el usuario no saldrá del modo de edición. Lo cual tiene sentido porque pase lo que pase, si el usuario sale del modo de edición, significa que los data que acaban de actualizar se perderán. Así que esta es una buena experiencia. Si algo está mal, debe mostrar una advertencia y luego permitirles actualizar los data y luego guardarlo nuevamente, ¿verdad? Entonces, ahora podemos hacer lo mismo aquí. El siguiente paso es cómo puedes manejar ese error porque en este momento el Data Grid muestra un error de que no se manejó una llamada a la actualización de fila de proceso porque falta esta función. Entonces, podemos usar esto y agregarlo al Data Grid y luego nos dará el error y podemos hacer cualquier cosa con él. Y en este caso, simplemente mostraré el error en una alerta. Entonces, el error aquí es este y generalmente el error contiene una propiedad de mensaje. Entonces, si guardo el archivo y luego agrego un nuevo registro y luego lo envío. De acuerdo, entonces ahora lo que sucedió aquí es que cuando esto se envía como no está bien, arrojamos errores fuera de la actualización de fila de proceso y luego DataGrid nos permite manejar ese error en esta propiedad de error de proceso de actualización de fila y luego mostramos la alerta de ese mensaje al usuario. Entonces, si hago clic en aceptar aquí, el usuario permanecerá en el modo de edición y luego permitirá al usuario cambiar los data a otra cosa. y porque había codificado, siempre dará error cada vez. Genial, lo eliminaré y lo restableceré. Muy bien, así es como manejas el error con la actualización de fila de proceso y en la actualización de fila de proceso, bastante útil. De acuerdo, entonces, a continuación, es prácticamente lo mismo.

24. Manejo de Edición y Actualización

Short description:

Para manejar la parte de edición, establece el estado de carga, utiliza la API de Actualización con el nuevo ID y los datos de la fila, y vuelve a establecer el estado de carga en falso. La actualización se reflejará en el servidor.

Solo necesitaremos manejar la parte de edición. Así que igual que antes, estableceremos que se está cargando y luego copiaremos esta parte. Sí, es mejor copiar desde aquí, ¿de acuerdo? Esta es la API de Actualización, así que la usaré aquí y esperaré. Y luego este es el ID, así que tengo que proporcionar el nuevo row.id. Y luego los data serán la nueva fila y volveré a establecer esta carga en falso. Muy bien, y luego guardar. Te dejaré manejar el error el próximo año. Manejar el error. Quiero decir, como esta parte o hacer el manejo del error. Genial. Intentaré editar este. Y luego si presiono enter, de acuerdo, ahora se actualizará en el servidor también. Genial.

25. Finalizando la Funcionalidad de Eliminación y Conclusión

Short description:

En la parte final, abordamos la funcionalidad de eliminación. Realizamos ajustes al componente de autocompletar para asegurarnos de seleccionar la fila correcta. También nos encontramos con un problema en el backend que envía objetos vacíos y lo solucionamos en el frontend. Para eliminar datos, cambiamos la función onClick a async y utilizamos la API de eliminación. Luego volvemos a obtener los datos para actualizar la vista. Finalmente, concluimos la masterclass y respondemos cualquier pregunta restante.

Ahora, esta es la parte final, que es la parte de eliminación. Creo que te daremos cinco minutos para que hagas la parte de eliminación por ti mismo. Y después de eso, volveremos y repasaremos la parte de eliminación juntos. Muy bien. Hagamos el último paso. Acabo de encontrar algo, y si intento actualizar una fila, por ejemplo, si hago doble clic en el nombre del producto aquí, recibiré una advertencia del componente de autocompletar que puedes usar la opción ease igual a value para asegurarte de qué fila está seleccionada. Entonces, qué opción está seleccionada. Así que podemos agregarlo al componente de autocompletar. Esta propiedad te permitirá, te dará opciones y valores. Es como decirle al autocompletar cómo comparar la igualdad de las opciones y los valores. En este caso, simplemente usaríamos el código como similar al ID. Correcto. Y ahora ese debería ser, Oh, no todas las opciones coinciden con. De acuerdo. Creo que es porque el backend nos envía esto. Nos envía el código y la etiqueta como vacíos. De acuerdo. Y por eso eligió este. Así que podemos solucionar otra cosa, que es si Params.values.code, Params.values.code, usaremos Params.values, de lo contrario puede ser No. Tal vez esto debería ser No. Muy bien. Creo que se trata del backend, el backend no debería enviarnos ese objeto vacío. De acuerdo, por eso el frontend, tenemos que lidiar con muchas cosas. Muy bien, ahora volvamos a la parte de eliminación en el último paso. Para eliminar estos data en el backend, podemos cambiar esto, en el clic a async, y luego igual que otros operadores. Simplemente estableceremos isLoading en true y luego esperaremos la eliminación. Ahora solo sería el código nuevamente. Muy bien, podemos copiar la API de Eliminación y luego ponerla aquí y luego usar param.id. Muy bien, y luego, una vez que eliminemos, podemos eliminar esto también para obtener los datos actualizados, o podemos mantener esto? Hagámoslo de otra manera. Esto depende de lo que te gustaría hacer, así que no hay una respuesta correcta o incorrecta aquí. Ahora volveré a obtener los data y luego los estableceré nuevamente. Así que copiaré esto y luego lo pondré aquí. Muy bien, guardemos el archivo y luego si elimino uno y si estamos cargando y luego, okay, eliminación exitosa y luego los data deberían quedar solo uno. De acuerdo, genial. Sí, eso es todo Sam. Creo que esto es todo para la masterclass. Todo listo para la masterclass. Increíble, maravilloso. Muchas gracias por mostrarnos todo eso, June. Fue muy informativo, si me lo permites decir. Gracias, es un placer estar aquí. Sí, pudimos ver muchas características interesantes de DataGrid y JoyUI. Y cómo funcionan bien juntos, perdón, sí, también pudimos ver cómo puedes empezar a trabajar con el backend real, gracias al mock service worker. Así que tenemos tiempo aquí al final antes de concluir todo por completo. Si alguien tiene alguna pregunta sobre cualquier cosa que hayamos cubierto hoy, ya sea JoyUI, DataGrid, cualquier cosa sobre MUI. Sí, si solo quieres hablar del clima, está bien, estamos aquí. Sí, así que estaré encantado de responder cualquier pregunta. Veo que PeterD está preguntando, ¿también hay una opción de ajuste automático en el texto de la columna? ¿No? Hmm, supongo que te refieres a algo que permita que la columna crezca para ajustarse al texto. Supongo que eso es, okay, genial. Así que en este momento, esta es una versión de la community, por lo que lo que usamos aquí es de XDatagrid.

QnA

Ancho de Columna y Compatibilidad con Joy UI

Short description:

En la versión Pro y Premium de la cuadrícula de datos, los usuarios pueden arrastrar y cambiar el ancho de las columnas. Planeamos trabajar en una función que permita ajustar automáticamente el ancho de las columnas, y ya existe la capacidad de redimensionamiento. Joy UI está en proceso de extraer Material UI de la cuadrícula de datos, por lo que en el futuro, la cuadrícula de datos contendrá 100% Joy UI sin componentes de Material UI. Estamos emocionados de lograr una compatibilidad del 100% sin tener que definir explícitamente los slots. Si tienes alguna otra pregunta o necesitas ayuda, no dudes en preguntar. Gracias por asistir a la masterclass y revisar las plantillas de Joy UI.

Y esa función es, no estoy seguro si eso es una función que permite, que se ajuste automáticamente, pero en la versión Pro y Premium de la cuadrícula de datos, permitirá a los usuarios arrastrar y cambiar las columnas por sí mismos. Puedo mostrarte aquí, déjame, no estoy seguro si lo instalo. De acuerdo, tal vez, déjame, puedo mostrarte agregando MUIXdatagridpro. Esperemos unos segundos. De acuerdo, y luego, cambiemos también a pro en este. Y luego renombrémoslo como cuadrícula de datos. Una vez que guardé esto, y luego ejecuto el servidor nuevamente, de acuerdo, ups. Use las props de ruta de la cuadrícula, de acuerdo. De acuerdo, no tenemos, así que la ruta, déjame ver. ¿De dónde viene este error, columnas de la cuadrícula aquí, allí, de acuerdo. Déjame intentar, no estoy seguro de qué está pasando aquí, pero déjame intentar eliminar los slots, de acuerdo. Ahora mismo, acabo de eliminar un slot, tal vez algo está mal con el slot, pero solo para que veas que si usas pro o la versión premium, como las funciones que permiten al usuario cambiar el ancho de la columna están ahí fuera de la caja. Puedes instalar el pro y premium y probar todas las funciones. Lo único que verás es la marca de agua aquí, así que sí, espero que eso responda tu pregunta. Tal vez Andrew pueda compartir si hay alguna función que, ya sabes, se ajuste automáticamente. Sí, ¿me puedes escuchar? Sí. Bien, genial. Sí, en realidad planeamos trabajar en la función que permite ajustar automáticamente el ancho de las columnas, especialmente con un doble toque en el controlador de redimensionamiento. Sí, planeamos implementarlo, pero como mencionó June, ya existe la capacidad de redimensionamiento. Así que espero que esto responda la pregunta. Genial, bien. No puedo esperar por esa función. Genial. Gracias por compartir eso. Tenemos otra pregunta aquí de Jory, quien pregunta si Joy UI ofrece slots para todos los componentes de MUI. Supongo que te refieres específicamente a la cuadrícula de datos. En este momento, estamos en el proceso de extraer Material UI de la cuadrícula de datos, por lo que en el futuro esta es la forma ideal. Si quieres usar Joy UI en la cuadrícula de datos. Así que planeamos, no tendrás que importar los slots, pero lo que harás es importar la cuadrícula de datos, de x cuadrícula de datos y tal vez slash joy. Y esta cuadrícula de datos contendrá un cien por ciento de Joy UI sin ningún componente de Material UI. Ese es el plan, pero en este momento estamos en el proceso de hacerlo. Por eso tienes que, en este momento tienes que importar este slot y reemplazar los componentes de Material por ahora. Genial, sí, estamos obteniendo la versión alpha temprana, un pequeño vistazo detrás de escena de lo que estamos trabajando actualmente. Pero sí, estoy muy emocionado de ver una compatibilidad del 100% sin tener que definir explícitamente los slots allí. Pero muy bien. Bien, ¿tenemos alguna otra pregunta? ¿Hay algo más en lo que podamos ayudarlos mientras estamos aquí? Está bien si la respuesta es no. Sí, gracias a todos por asistir. Sí, muchas gracias por quedarse con nosotros. Genial. Y si quieres, puedes echar un vistazo a... Así que JoyUI, tenemos muchas plantillas con las que puedes comenzar. Siéntete libre de revisarlas. Dejaré el enlace en el chat. ¿Dónde está mi chat? Ahí está. Este es un ejemplo, como la página de marketing. Puedes copiar el código y ponerlo en tu proyecto para comenzar tu nuevo proyecto. O un panel de control. Funciona tanto en modo oscuro como en modo claro. Genial. De acuerdo. Bueno, creo que eso es todo por hoy.

Conclusion and Contact Information

Short description:

Gracias a todos por asistir. Si tienen alguna pregunta o necesitan ayuda, no duden en contactarnos por correo electrónico o Twitter. Apreciamos su apoyo y esperamos conectarnos nuevamente en el futuro.

Gracias nuevamente, nuevamente, nuevamente, a todos por estar aquí. Gracias, Jun, por guiarnos a través de esa presentación. Y una vez más, para todos, si alguien está asistiendo a la conferencia en persona, espero que nos encuentren en nuestro, tendremos un bonito y brillante stand. Estaré trabajando allí junto con algunas otras personas. Y sí, espero verte. Espero tener buenas conversaciones con la gente. Y sí, genial. Sí, muchas gracias a todos.

Me alegra que hayan encontrado esto útil y agradable. Pero sí, supongo que terminaremos aquí. Si necesitan algo, no duden en contactarme a mí o a cualquiera de aquí. Mi correo electrónico es sammui.com. También nos pueden encontrar a todos en Twitter. Tenemos Twitter slash MUI underscore HQ, donde pueden encontrar actualizaciones sobre todos nuestros productos. Sí, Twitter está un poco loco en estos días, pero estamos haciendo lo posible para mantenernos activos allí. Muy bien. Y sí, creo que eso es todo por hoy. Así que gracias nuevamente. Y hablaremos nuevamente pronto. Sí, nos vemos. Adiós.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
17 min
Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components
Top Content
There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.
React Advanced Conference 2021React Advanced Conference 2021
21 min
Building Cross-Platform Component Libraries for Web and Native with React
Top Content
Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React & React Native in combination.
React Summit 2022React Summit 2022
27 min
Walking the Line Between Flexibility and Consistency in Component Libraries
Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.
React Summit 2022React Summit 2022
20 min
Find Out If Your Design System Is Better Than Nothing
Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.