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

Entonces, empecemos sin más preámbulos. Bien. Gracias a todos por estar aquí. Esta es una Masterclass de MUI. Hoy vamos a demostrar cómo puedes construir una aplicación CRUD limpia y sofisticada. Eso es crear, leer, actualizar, eliminar. Una aplicación CRUD muy sofisticada que puede manejar grandes cantidades de data con características como el filtrado y la clasificación directamente de la caja. Utilizando la cuadrícula de data MUI X en conjunto con Joy UI, que es nuestra última biblioteca de componentes React UI y una biblioteca hermana de nuestro producto estrella, Material UI. Espero que algunos de ustedes estén familiarizados con él.

Ahora, si fueras a 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 los casos extremos que, créeme, definitivamente surgirán en el camino. En contraste, estaremos en marcha 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 fundamental que puedes expandir a tu gusto. Si construyes algo genial con el código de la masterclass de hoy o simplemente con cualquier cosa que aprendamos hoy, la masterclass, espero que nos lo hagas saber. Nos encantaría verlo y si es genial, podríamos compartirlo en nuestro escaparate de proyectos, que está en mui.com.

Antes de entrar en la codificación, me gustaría tomarme un minuto para presentarme a mí y a mis co-conspiradores que están liderando la masterclass aquí conmigo hoy. Entonces, hola, soy Sam Sycamore. Soy un defensor del desarrollador en MUI. Mi experiencia está en la escritura técnica y el desarrollo de front-end, principalmente JavaScript, React y Next.js. He estado con MUI durante aproximadamente un año y medio. 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 los desarrolladores de la comunidad 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 minuto. Así que no te preocupes si eres nuevo en nuestro ecosistema.

Hoy me acompaña mi colega Jun, que es un ingeniero de nuestro equipo principal y el principal desarrollador detrás de la biblioteca de componentes Joy UI con la que estamos trabajando hoy. Así que estoy realmente contento de que esté aquí con nosotros para responder cualquier pregunta y mostrarnos todas las cosas geniales que ha estado construyendo. Jun ha estado con MUI durante aproximadamente dos años y es muy apasionado de todo lo relacionado con la experiencia del desarrollador, lo cual creo que realmente se refleja en Joy UI. Y creo que estarás de acuerdo una vez que lo veas. Así que Jun será el que dirija la codificación en vivo con nosotros en unos momentos. Y también nos acompaña hoy Andrew, que es nuestro líder técnico en el equipo de DataGrid. Así que está aquí en la 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 súper 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 ya sabes un poco sobre quiénes somos. Hablemos de a quién representamos en esta conferencia. Así que tal vez estoy predicando al coro para aquellos de ustedes que eligieron asistir a esta masterclass. Tal vez ya sabes todo lo que hay que saber sobre nosotros. Pero asegurémonos de que todos estamos en la misma página. Así que MUI como empresa comenzó con Material UI, que es la implementación de código abierto de el diseño de Material de Google en React. A pesar de las concepciones erróneas populares, MUI de hecho no está afiliado con Google. Sin faltar al respeto. Amamos a la familia Google. Pero somos una entidad independiente con un recuento de personal de poco más de 30 en estos días. Y las ofertas de productos de MUI ahora se extienden mucho más allá del ámbito del diseño de Material. Así que puedes ver aquí que en nuestro equipo principal, nuestros productos incluyen Base UI, que es para componentes sin cabeza y ganchos de bajo nivel. Tenemos Joy UI, que implementa nuestro propio sistema de diseño interno y algunas ideas nuevas y frescas en la experiencia del desarrollador. Y luego también tenemos MaterialUI, como bien sabes, y Material, o lo siento, MUI system, que es nuestro sistema de estilo interno. Y eso es solo en el lado del núcleo. En el lado X, es decir, MUIX, tenemos nuestros componentes avanzados como la cuadrícula de datos, que estaremos utilizando 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 también. Y luego tenemos MUI-Toolpad. Todavía estamos en las primeras etapas de esta aplicación, pero es nuestro constructor de administración de bajo código donde esencialmente puedes tomar todos los componentes de MUI que conoces y amas y empezar a construir una aplicación de pila completa simplemente arrastrando y soltando. Así que estamos muy emocionados por eso. Y si tienes alguna pregunta sobre cualquiera de esos productos, por favor no dudes en contactar con nosotros. Estaré encantado de guiarte a través de todos ellos.

Así que con eso, creo que estamos listos para seguir adelante y discutir el stack con el que estaremos trabajando hoy. Por supuesto, estamos operando en el mundo de React, y hoy estaremos codificando en JavaScript. Sé que eso podría 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 estos días. Pero no queríamos asumir que todos aquí tienen experiencia previa con TypeScript, y no queríamos quedarnos demasiado atrapados en los detalles de TS.

Estamos aquí para hablar principalmente sobre MUI. Así que solo ten en cuenta que aunque hoy usaremos JavaScript 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 todo esto en TypeScript. Así que después de la masterclass, si prefieres estar en el mundo de TypeScript, solo ten en cuenta que eso está disponible.

Empaquetaremos nuestra aplicación con Vite, que parece que rápidamente se está convirtiendo en el estándar de la industria para construir una aplicación de React que no usa next.js. Si no lo has usado antes, lo recomiendo mucho, es genial, aunque estaría un poco más allá del alcance de esta 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 de hoy, se construirá utilizando Joy UI, como mencioné, conectado a la cuadrícula de datos MUI X. Así que Joy UI fue creado por MUI para servir 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 a usar Joy UI también. Pero dado que Joy UI presenta nuestro propio sistema de diseño interno, como mencioné, esto nos da mucha más libertad y flexibilidad para experimentar con nuevos tipos de 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 es decir que los componentes de Joy UI, gracias principalmente a la magia de las variables CSS, son esencialmente 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 algo de eso.

A continuación, tenemos MUIX. Y específicamente, como he mencionado, estamos trabajando con la cuadrícula de datos de MUIX data hoy. Ahora, MUIX surgió de las necesidades de la comunidad de Material UI cuando se observó que simplemente no era factible que los aficionados de fines de semana y noches mantuvieran componentes con una funcionalidad tan avanzada. Entonces, construimos un equipo de ingenieros, digo nosotros como si yo tuviera algo que ver con eso. Solo estoy aquí para contar la historia. El equipo de MUI construyó 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 hay una versión de community que es completamente de código abierto y gratuita para usar. Así que eso es con lo que estamos trabajando hoy. Más recientemente, gracias al trabajo de June en colaboración con el equipo de MUIX, hemos comenzado el proceso de, puedes decir, desacoplar los componentes de MUIX de Material UI para que se lleven bien con Joy UI. Eso en efecto es por qué estamos aquí hoy. Que es para mostrarte cómo es posible construir una tabla de data utilizando Joy UI conectado a la cuadrícula de datos de MUIX. Y finalmente, último pero no menos importante, estamos trabajando con un paquete llamado mock service worker. Y no necesitas preocuparte demasiado por lo que está pasando con este chico malo. Solo debes saber que lo estamos utilizando para básicamente simular una API rest con la que interactuar. Así que podemos fingir que nuestra aplicación realmente está hablando con un servidor sin pasar por todo el problema de configurarlo de verdad. Entonces, no necesitas saber mucho sobre esto. Tenemos toda la caldera

Muy bien Sam, gracias por la gran introducción. Entonces, primero, asegurémonos de que todos tienen este repo configurado. Ahora estoy compartiendo mi pantalla, así que no pude encontrar mi chat. Vale, lo encontré. Vale. Así que usaremos este repo para construir nuestro tablero con Delibri Enjoy UI. Siéntete libre de clonarlo, daré unos minutos para esperar a todos. Y una vez que clones esto y abras el proyecto, verás una plantilla de trigo con nuestro archivo principal aquí que usaremos hoy, que es el app.jsx. Y explicaré otras configuraciones en el camino, pero ahora, podemos centrarnos solo en el app.jsx. Y entonces, una vez que lo abras, notarás muchas errores de enlace, lo cual está bien por ahora. Preparé la importación para que no tengamos que, ya sabes, subir y bajar en esta masterclass todo el tiempo para que podamos centrarnos en la UI en su mayoría. Muy bien. Así que una vez que clones el repo, elige el paquete que te guste. En mi caso, utilicé Yarn, así que ejecutaré Yarn install, y ahora con mi súper rápido internet, y una vez que hagas esto, ejecuta Yarn dev. Esto iniciará el servidor de desarrollo. Y luego puedes hacer clic, comando clic o control clic 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 simple cuadrícula de data aquí. Muy bien. Ahora, demos un minuto para que la gente clone e intente instalar la dependencia y ejecutar el servidor dev. Mientras tanto, si alguien ya lo ha hecho ya, empezaré a explicar lo que tenemos en esta página. Así que ahora, en esta página, estamos importando componentes de joy UI. Así que el primero es el contenedor. Es bastante común en el web development. Así que crea un límite para cada vista de puerto para que tu contenido no se desborde del límite del ancho. Y el siguiente, el CSS baseline, este es nuestro reset de CSS interno. Puede 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 creó para usar con texto. Bueno, explicaré las probs en el camino. Ahora mismo está usando el nivel H3 que se sincronizará con el mismo predeterminado. Así que esto es como la tipografía tamaño. Y tenemos la SxProp si has usado Material antes es lo mismo. Así que estas props nos permiten escribir CSS dentro de esta prop. Así que es una prop muy poderosa. Y luego en esta masterclass, lo haremos juntos en algunos componentes y nuestras estrellas aquí. Así que la cuadrícula de data. Así que las props más importantes, que son fila y columna, moveré la fila arriba. Así que puedes pensar en ello como una hoja de cálculo en la que tienes una fila de data y un conjunto de columnas. Así que 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. Así que cada uno de estos se definirá como una columna. Y cada elemento de estos array será una fila. ¿Verdad? Y para las props de columna, esta es una prop que podemos definir cómo queremos, cómo la cuadrícula de data tratará este conjunto de data. Así que ahora tenemos el campo id que renderizará el id de la data, del conjunto de data que tenemos. Y otro es el nombre del encabezado. Se usa para configurar lo que aparece en el encabezado. ¿Verdad? Supongo que todos han instalado las dependencias y tienen esta página en su

Muy bien, entonces lo que voy a hacer a continuación es agregar más columnas a nuestra tabla aquí. Y la primera columna que agregaré es, pondré la columna de nombre como segunda columna. Para hacer eso, escribes field y apuntas al campo que quieres. En este caso, es la clave de nombre aquí. Entonces, escribes nombre. Y luego puedes agregar el nombre del encabezado. Con el nombre que te guste, puede ser nombre o puede ser nombre de producto. Y luego voy a 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 acercar un poco. Muy bien. Avísame si no puedes ver el code.

Muy bien. Y una propiedad poderosa que DataGrid proporciona de serie es esta. Así que puedes convertir una celda de la columna en editable. Entonces, ahora mismo, no puedes hacer nada con este DataGrid. Solo renderiza las cosas. Pero puedes agregar editable como verdadero. Y esto hará que la celda pueda ser editada. Entonces, los usuarios pueden editar la celda de esta columna con un doble clic. Entonces, cuando haces doble clic, verás una entrada de texto en la que los usuarios pueden escribir algo más. Y luego pueden guardarlo con desenfoque o con enter. Ahora los data cambiarán y se guardarán en el estado de Datagrid. Así que esto es bastante ordenado. Solo una línea de code, y luego obtienes una característica muy difícil de implementar de serie.

Muy bien, umm ahora vamos a agregar la siguiente columna. Así que lo mismo aquí. Solo comienza con el campo. Y empezaré con el precio primero. Mantendré el otro campo como el último. Y luego agrego el nombre del encabezado como precio. Y luego lo mismo aquí, agregaré editable como verdadero. Entonces, ahora, cuando lo guardes, deberías tener la tercera columna. Que puede ser editada. Pero una cosa que noto es que, dado que el precio es un número, Pero ahora no puedo usar el teclado o la flecha para aumentar o disminuir los valores. Porque por defecto, si no proporcionas ningún tipo a la definición de la columna. Así que esto se llama la definición de la columna. Obtendrás una entrada de texto plano. Y esto no es lo que queremos porque el tipo de data afectará cómo funciona el filtro y cómo funciona la clasificación también. Así que deberíamos proporcionar un tipo si no es un texto. Así que en este caso, lo proporcionaré como número. Muy bien. Y luego guardaría el archivo. Y ahora, si haces clic en esto, haces doble clic en esto para entrar en el modo de índice, verás que la entrada cambia de texto plano a tipo de entrada número. Y entonces esto es mejor para la accessibility porque los usuarios ahora pueden usar su teclado Ahora usan su teclado para interactuar con esta entrada, o pueden escribir el número que quieren sin equivocarse en todos los caracteres. Correcto. Y luego presiona enter para guardar data aquí. Ahora, esto funcionará con un filtro también.

Así que estas salen de la caja del data grid, te da por defecto para filtrar cosas como un filtro muy complejo, y obtendrás la ordenación por defecto. Así que con el tipo correcto, y esto se ordenará en el orden correcto.

Ahora, la siguiente, la última columna que tenemos del conjunto de data aquí es la fecha de fabricación. Así que voy a añadir a la última columna aquí. Igual que antes, escribamos fecha de fabricación. Y luego escribamos el nombre del encabezado fechas de fabricación. Vale, y luego añadiré también la tabla editable verdadera, y ahora porque sabemos que este será el tipo de esto es fecha ¿verdad? Así que añadamos el tipo fecha. Oops. Vale, y luego si guardo el archivo entonces, boom, así que esto no es una característica, pero se estrelló. Vale, ¿qué pasó? Dice que el tipo de columna de fecha sólo acepta objetos de fecha como valores. ¿Qué está mal? Si echamos un vistazo a nuestro tipo de data, verás que nuestra data es una cadena. Y esto sucede todo el tiempo porque normalmente la data viene del servidor, y la data no puede ser tipada desde el servidor. La mayoría de las veces será una cadena. Y porque definimos el tipo fecha para el Data Grid, pero nuestra data que enviamos al Data Grid es una cadena por eso es que Data Grid lanza un error. Lo que tenemos que hacer es que tenemos que convertir ese tipo de data de cadena a fecha y enviarlo a Data Grid. Y Data Grid tiene una propiedad llamada value getter para permitirnos cambiar el tipo al Data Grid Así que podemos hacer eso añadiendo una función aquí. Y los valores estarán dentro de los valores. Así que param.value es una cadena de este. Así que tenemos que convertir esto en un objeto de fecha. Así que podemos simplemente envolver esto con nuevas fechas. Vale, así que esta línea es como, convertir la data entrante en un objeto de fecha para que coincida con el tipo que definimos aquí. Y guardemos el archivo. Vale. Y ahora está de vuelta. Vale. Así que ahora la fecha es bastante estrecha. Así que también podemos definir con como número. En este caso, probemos con 200. Vale. Es mucho mejor. Y ahora te encontrarás con esto este caso de uso donde quieres convertir esto en un formato diferente. Así que ahora está usando mes, fecha y año. Así que quiero cambiar esto a otro formato. Así que para hacer eso, puedes añadir valor para el asunto. Y será también una función. Y te enviará los valores. Y luego puedes añadir params.values. Y estos valores tienes que ser consciente de. Así que estos valores vienen del resultado de value getter. Estos valores no son los valores brutos porque tenemos que encontrar el value getter, así que será el resultado, que es el objeto de fecha. Así que como el valor es un objeto de fecha, entonces podemos añadir a la cadena de fecha. Porque a la cadena de fecha es un método de un objeto de fecha. Así que podemos usarlo directamente aquí. Ahora si guardo, debería ver un formato diferente aquí. Vale, así es como tú conviertes el tipo de data, y así es como puedes formatear lo que se muestra en la pantalla. Vale, genial. Así que a continuación, echemos un vistazo al defecto, lo que datagrid proporciona de serie. Así que tenemos el, tenemos como columnas gestionadas que puedes, si tienes como un montón de columnas, así que ahora sólo tenemos cuatro, pero si tienes como 20 columnas, 30 columnas, esta característica es bastante útil para filtrar las columnas que el usuario no quiere ver. Y puedes, pueden buscar en alto mostrar todo esto es lo que obtienes de serie y filtrar basado en el tipo de la definición de la columna y filtrar, que es bastante complejo aquí. Así que si proporcionas un tipo, entonces los valores del filtro para esa columna serán correspondientes al tipo que proporcionas también.

Algo así, así que no tenemos esta fecha y podemos cancelarla. Muy bien, entonces otra de las poderosas características del data grid es que te permite reemplazar todos estos espacios que ves en el data grid como el icono, el botón, la entrada de texto con el concepto de espacios. Así que tiene una propiedad de espacios, déjame ponerla aquí, propiedad de espacios, y puedes reemplazar todos estos con tu componente personalizado. Y hoy, lo que vamos a reemplazar, reemplazaremos estos espacios, no todos pero casi todos con componentes de Joy UI. Y, ya lo hemos importado aquí, que son los espacios de alegría de MUI x-databricks-joy. Así que es una API experimental en este momento, pero planeamos hacerla estable en el futuro. Así que, probémosla primero. Genial. Tal vez podamos registrar también lo que hay dentro del espacio de alegría. Echemos un vistazo primero. Muy bien, así que si guardo aquí, deberías ver un objeto, que es por ejemplo el botón. Este es el componente react, y la casilla de verificación también es un componente react. Así que, estas claves coincidirán con los espacios que DataGrid te permite reemplazar. Muy bien, entonces pongámoslo en el DataGrid. 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. Déjame abrir esto, ¿verdad? Si recuerdas el icono cambiará. Y veamos, filtro. Vale, ahora cambió a la entrada de texto de JoyUI. ¿Y qué más? Echemos un vistazo a la gestión de columnas. Vale, el interruptor estará usando 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 añadiendo más. Y al final, no tendrás que importar los espacios, pero estarás usando el data grid de Joy al final. Vale, genial.

Así que ahora hemos aprendido los conceptos básicos de la definición de columnas. El siguiente será un poco más avanzado. 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.

Así que ahora, lo que obtienes del data grid es una entrada de texto simple basada 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 de la entrada. Y ahí es cuando entra en juego el autocompletado.

Así que voy a crear una nueva columna como siempre. Así que la llamaré país de fabricación. Y luego añadamos un nombre de encabezado, país de fabricación. País, OK. Y añadamos editable como verdadero. Y luego, cuando quieras crear tu propio componente de edición y data grid nos permite hacerlo usando render edit cell. Y render edit cell será una función que es la misma, usará los mismos parámetros. Entonces puedes renderizar cualquier elemento react que te guste. Ahora hagámoslo con prueba. Y guardaré el archivo, y luego tendremos nuestra nueva columna aquí. Muy bien, creo que quitemos el ancho aquí, quizás cien. Creo que quizás 64. Ok. Y luego añadamos este ancho como 200. Muy bien, ahora si haces doble clic en esto para entrar en el modo de edición, verás tu componente aquí, que es un simple div con una prueba como texto. ¿Verdad? Ahora cambiaremos esto al componente de autocompletado, que ya importé en la parte superior, en algún lugar aquí. ¿Verdad? Ok, así que escribamos autocompletado. Y lo que tienes que proporcionar al autocompletado son opciones como un array. Así que ahora, proporcionémoslo como un array vacío para ver cómo se ve y luego cerremos. Ahora si guardo el archivo, deberías ver una entrada aquí. Y si haces clic en la entrada, verás la opción no. Porque aún no hemos proporcionado ninguna opción. Hagamos un poco más como marcador de posición. Porque ahora 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 adentro. Ahora el país, el json es solo un array de elementos aquí con code y etiqueta. Así que nada más que esto. Así que volvamos al code, y reemplacemos este array vacío con país y luego guardaré el archivo y deberías ver algunos cambios. Vale, ahora tenemos opciones aquí, y lo bueno del autocompletado es que obtenemos accessibility de serie. Así que ahora, estoy usando mi teclado. Así que tengo un indicador aquí que detectará mi teclado, así que estoy usando una tecla aquí y si presionas enter, seleccionará la opción. Pero ahora cuando entras, se guardó en data grid, pero aún no aparece nada porque aún no hemos enviado esos data que seleccionamos al data grid, lo que haremos a continuación. Muy bien, así que antes de guardar esos data, 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 que tengo que hacer clic de nuevo, y es bastante molesto. Así que lo que podemos mejorar aquí es añadir una propiedad llamada auto focus para que, ya sabes, una vez que aparezca el autocompletado, se enfoque automáticamente en la entrada. Cuando lo guardo, vale, cerremos y hagamos doble clic de nuevo. Ahora se enfocará en el autocompletado para que los usuarios puedan empezar a escribir de inmediato.

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

Genial. Ahora hay algo de estilo que quiero mostrarles cómo JoyUI les da variables para personalizar. Porque ahora mismo, si haces doble clic, verás que un borde es bastante repetitivo. Así que tenemos un borde de enfoque desde DataGridCell, y también tenemos el borde de la entrada. Así que vamos a eliminar, queremos, quiero eliminar el borde de la entrada para que parezca una misma entrada 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 sobrescribir. Ahora, cuando te enfocas en esta entrada, el enfoque se va. ¿Verdad? Y es bastante difícil de debug lo que está pasando. Un truco que puedes hacer es presionar command shift y luego P. Supongo que en Window será control shift P. Se abrirá el comando de herramientas de profundidad. Luego puedes buscar por enfoque. Y haz clic en la página de enfoque de emulación. Cuando haces clic en esto, se enfocará en la página. Y si te desplazas e interactúas con la herramienta de profundidad, el enfoque se mantendrá como está en la página. Bien. Así que volvamos a nuestra entrada aquí. Ahora, disfruta de lo que es diferente de TUI ya que experimentamos con CSS variable. Así que cambiamos CSS variable que pensamos que sería útil para los desarrolladores para personalizar el componente. Y verás que ahora el enfoque viene de estas variables, viene de la caja estática. Si lo quitas, entonces se va. Pero en este caso, está en el selector antes. Y si tienes que escribir un CSS con este selector, sería demasiado largo, ¿verdad? Es más fácil si personalizas o sobrescribes las variables CSS. Así que en este caso, el color es este. Así que si cambio el color, bien, es este, estas variables. Oh, ahora se ha ido. Así que hagamos clic en esto. Ahora verás que puedes copiar este y luego puedes personalizar estas variables usando SXprop. Así que 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. Así que 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 un transparente es el que estamos buscando. Muy bien, y ahora si guardas, el color se ha ido, ¿verdad? Y el siguiente, todavía verás el borde inicial, el gris, este, el gris aquí, que aparece inicialmente debido a la varianza. Así que aquí es donde quieres cambiar la varianza y en Joy UI, todos los componentes tienen la misma varianza. Así que tiene el mismo conjunto de varianzas, lo siento. Llamamos a esta característica como varianza global donde puedes elegir una de las varianzas de las cuatro varianzas predeterminadas en cualquier componente, y probémoslo. Así que ahora mismo, por defecto, la entrada está en varianza de contorno, así que cambiemos a varianza plana para ver cómo se ve. Genial, así que parece que esto es lo que queremos, pero tal vez probemos otras varianzas. Así que suave creará un fondo sutil y ¿qué tal sólido aquí? Así que sólido creará un fondo llamativo con un texto blanco. Y mientras también puedes cambiar el color porque la variante siempre viene con colores, y tenemos seis colores de los que puedes elegir, y por defecto, este color es neutral, así que puedes cambiar a algo como primario y o tal vez como, ¿qué más? Advertencia, por ejemplo. Bien, así que en JoyUI, una variante y colores vienen juntos. Y ahora verás que no se ve bien en absoluto porque tenemos dos componentes dentro.

Este es otro componente, que es el botón de icono, pero te mostraré una característica bastante interesante de JoyUI más tarde. Así que ahora simplemente volveré a usar variantes simples. Genial, esto es lo que quiero. Y... Vale, así que esto se hace para estilizar nuestro autocompletado.

A continuación, voy a guardar los data que selecciono de vuelta en la data grid. ¿Cómo hacer eso? Ahora lo que tengo que hacer es tengo que escribir la función onChange para escuchar la opción que el usuario selecciona. Y dentro de ella habrá un evento y los valores que el usuario selecciona. Vamos a consol.log los valores para ver cómo se ven. Ahora guardo el archivo y luego cambio a console y luego elijo una opción aquí. Vale, así que estos son los valores que obtenemos del manejador de cambios. Así que es el mismo objeto aquí que tenemos dentro de countries.json. Muy bien, así que lo que queremos hacer es queremos usar estos valores que el usuario selecciona. Y enviarlos de vuelta a la data grid y podemos hacer eso usando params.api.setedcell. Muy bien, así que esta API es de la data grid. Y data grid proporciona este método. Así que ahora si abro. Hay tres cosas que tenemos que especificar, que son el campo, el ID y los valores. Así que el campo será este campo, que viene de los parámetros. Y el ID será el mismo, será el ID de la celda. Y. Los valores serán los que el usuario selecciona, que es este. Ahora déjame quitar 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 DataGrid, pero verás el objeto objeto es porque enviamos un objeto a DataGrid, por defecto DataGrid simplemente lo renderizará como una cadena. Así que viene de, porque enviamos un objeto, y entonces DataGrid siempre lo convertirá en una cadena. Así que si lo intentas en tu navegador, obtendrás el mismo resultado. Así que objeto punto dos cadenas, obtendrás esto, que es lo mismo que ves aquí. Así que puedes hacer lo mismo que hemos aprendido antes, que es el valor para la materia, y luego será un parámetro, y luego un parámetro punto valor, así que ahora, parámetro punto valores es el objeto, y luego tendremos que. Así que pongo la sombra 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 entro. Ahora debería ver la etiqueta en la celda. Una vez que guardas, o una vez que dejas el modo de edición. ¿De acuerdo?

Ahora, vamos a hacer algo un poco más sofisticado aquí porque nuestra opción es bastante aburrida. Es solo un texto plano. Así que lo que podemos hacer aquí es copiar algo de code y robar algo de Joy UI, documentation, ahora. Vale. Así que, vamos a mui.com y luego abrimos, déjame aumentar esto. Y luego ve a docs y ve a JoyUI. Y luego, para Matt, presiona command k para buscar los componentes o, en Windows, puedes usar control k. Muy bien, ahora puedes escribir autocompletar y luego presionar enter. Irá a la documentation de autocompletado y tenemos muchas demos aquí. Y la que queremos es la apariencia de la opción. Así que ahora ves que esto se ve mucho mejor para las opciones y vamos a robar esto. Y así, en todas las demos, puedes mostrar el código fuente code o puedes abrirlo y probarlo en el code sandbox también. Y ahora mostraré el código fuente code y luego copiaré la opción de renderizado aquí. Así que solo copia el code y volvamos a nuestro código fuente code 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, entonces deberías tener una opción bastante bonita aquí, ¿verdad? Así que puedes quitar algo si no quieres, eso está bien, así que al menos tenemos la bandera, ¿verdad? Y se ve mucho más fácil. Genial, ¿qué más? Ah, vale, así que lo último para la parte uno, así que cuando guardas los data, y luego si haces clic en él de nuevo, en realidad, debería centrarse en el anterior, pero ahora, no hay valores, ¿verdad? Así que eso es porque no hemos enviado los valores que el usuario selecciona al autocompletado todavía, así que podemos hacer eso pasando params.values, o si no hay params.values, simplemente pasaríamos un null. No podemos pasar y definir, porque eso, verás algún error del componente de autocompletado, y eso es debido al control y entrada no controlada de React.

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

Vale, 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á usando render cell. Muy bien, así que render cell y value formatter son prácticamente lo mismo, pero render cell te permite controlar la UI que quieres 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. Muy bien, ahora si guardas entonces se bloqueará. ¿Por qué? Porque no puede leer la propiedad de indefinido que supongo que es este. Oh, vale. Así que esto es porque params.values puede ser indefinido así que lo que podemos hacer aquí es renderizar una condición aquí. Renderizaremos esta UI sólo cuando existan params.values. Muy bien, de lo contrario simplemente renderizaremos null. Porque, no, vale, genial. Y si elegimos, luego enter, vale, ahora tenemos la bandera. Vale, así que creo, quiero señalar una última cosa aquí que es el estilo en JoyUI en MUI, Mui ecosystem que, así que ahora si, digamos, quiero dar estilo a este div, ¿cómo lo haces? Bueno, una forma convencional es usar el nombre de la 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 MUI ecosystem, normalmente, usaremos un componente práctico con la propiedad SX, y ese componente se llama Box. Y Box es sólo 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 line item sender y añadir gap aquí. Así que si no entiendes qué es esto, esto es sólo CSS que puedes averiguar más tarde. Esto es para crear un flex box y añadir algo de espacio entre el elemento aquí. Y ahora si guardo el archivo, y luego lo elijo de nuevo, vale, ahora deberías ver un espacio aquí. Más poderoso aquí es que con SxProp, puedes escribir un selector complejo también. Ahora puedo hacer esto en SxProp. Así que 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 que, vale, vamos a añadir un radio de borde de 10 píxeles barra ocho píxeles y luego guardar. Ahora veamos cómo se ve. Vale, ahora es como un óvalo. Parece y se siente, vale, genial.

Y esto es todo para la primera parte. Resumamos lo que hemos aprendido. Sam, ¿deberíamos resumir y tal vez tomar un descanso de unos cinco minutos? Sí, sí, buena idea. Entonces, veamos, ¿qué hemos aprendido y qué hemos hecho hasta este punto? Introdujimos una nueva cuadrícula de data en nuestra aplicación. Definimos algunas filas y columnas. Vimos cómo traer los slots de Joy a la cuadrícula de data para agregar componentes de Joy UI internamente en la cuadrícula. Configuramos algunas columnas allí y vimos las definiciones de columnas, cómo hacer las cosas editables, cambiar el tamaño. Vimos cómo crear celdas de edición personalizadas e incluso cómo construir un componente de autocompletado muy agradable, así como robar algo de code directamente de la documentation de MUI. También vimos cómo tomar los valores de ese autocompletado y ponerlos en una celda renderizada personalizada en el otro lado. Y obtuvimos solo un pequeño sabor de cómo comenzar a personalizar algunos componentes de JUI utilizando la propiedad SX y también las variantes globales.

Sí, y con eso, hagamos una pequeña pausa aquí. Creo que estamos en un buen punto para detenernos. Muy bien. Pregunta bastante interesante en el chat. ¿Qué deberíamos considerar al elegir entre box y stack? Bueno, creo que esto es como... Tu preferencia por experiencia. Como yo los uso indistintamente todo el tiempo. Así que depende del diseño que quieras construir. Si veo que, por ejemplo, como un botón que se queda verticalmente con algún espacio entre ellos, siempre termino con stack, pero para otros casos de uso, siempre comienzo con box porque puedo controlar todo el CSS que quiero con box. Pero siempre los cambias de todos modos, en cualquier momento. Sí, estaba tratando de pensar, ¿hay alguna característica como props que son únicas para uno pero no para el otro? Así que ahora mismo, el stack está usando, por defecto, está usando el enfoque de margen porque antes, GAP no es totalmente compatible pero ahora, está disponible en la mayoría de los navegadores y también tenemos una nueva prop, que es, déjame 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 profundidad aquí y verás que ahora el stack está usando margen y esto, funciona bien pero cuando quieres personalizar algo, crea muchos problemas porque, por ejemplo, si quiero personalizar como el margen de este ítem entonces no puede hacerlo porque es muy difícil sobrescribir estos selectores de CSS aquí pero tenemos una nueva prop que puedes cambiar la implementación de usar margen a usar un gap que es mucho mejor. Así que puedes consultar un doc, es solo una prop que puedes agregar en el stack y convertirá el componente para usar gap en lugar de margen. Y lo recomiendo porque si echas un vistazo a, puedo usar y luego flex gap. Vale, entonces el gap de flex box es casi del 93% que está bastante cerca del gap de la cuadrícula de CSS, que es del 95%. Así que si te importa mucho ese 2%, realmente recomiendo comenzar con gap en lugar del margen. Genial, sí, gracias por compartir eso. Ni siquiera sabía acerca de eso. Usa la prop de flex gap, solo muestra lo masiva que es nuestra biblioteca de productos. Eso es súper genial. Muy bien, viendo si estás listo para la siguiente parte, hagámoslo. Así que para recapitular lo que aprendimos de la última sesión, tenemos un componente de edición personalizado y aprendimos los conceptos básicos de la definición de columnas. La siguiente parte será mucho más interesante. Así que comenzaremos, 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 luego el usuario puede escribir la información y presionar enter para guardar esa nueva fila. Oops. Muy bien, para hacer eso, una cuadrícula de data nos permite insertar un slot, el slot de la barra de herramientas, así que no podemos crear nuestro propio componente, ahora podemos llamarlo barra de herramientas y luego devolver un div y agreguemos un botón aquí. Así que un botón es de Joy UI, ya lo importamos en la parte superior y ahora llamémoslo añadir registro. Muy bien y luego pongamos una barra de herramientas dentro de los slots, así que voy a extender los slots de Joy 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, vale. Y lo que mencioné en la parte anterior es sobre las variantes globales. Así que esto es una cosa que de mi experiencia que uso joy UI para construir ejemplos y todas las cosas que realmente me gustan las variantes globales que me permiten crear muchos ejemplos diferentes. Así que ahora en el botón, también puedes usar la misma variante que el autocompletado y esperarás el mismo resultado. Y ahora por ejemplo, iré con suave. 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í.

Entonces, agreguemos algo de padding. Bien, podemos empezar con esto. Y luego, si quieres interactuar con la cuadrícula de data, puedes usar este hook de React de la cuadrícula de data. Es una API muy poderosa, por lo que devolverá todos los métodos con los que puedes interactuar con la cuadrícula de data. Así que podemos llamarlo API ref y luego llamar al contexto useCrit API. Así que ahora te mostraré lo que hay dentro del API ref. Bien, así que ahora guardo el archivo y luego deberíamos ver un objeto aquí. Así que el método está dentro del objeto actual. Y verás que hay muchos métodos que puedes hacer o interactuar, cambiar data o obtener algo de la cuadrícula de data aquí. Bien, así que no voy a explicar todas las funciones aquí. Así que usaré la que queremos. Ahora en este caso, queremos crear una nueva fila, ¿verdad?, cuando hago clic en este botón. Así que esa función es, así que podemos usar aprf.parent, y luego update rows. Update rows. Así que la función updateRows nos permite proporcionar como un array de filas que queremos actualizar. Y si la nueva fila tiene como un nuevo ID, se añadirá a la tabla. Así que lo que tenemos que hacer es que tenemos que crear un nuevo ID. Así que digamos, ahora puede ser cualquier ID, pondré un ID temporal en este punto. Y entonces pasaremos este ID a este objeto. Y luego es lo mismo que lo que tenemos en nuestros conjuntos de datos. Así que podemos pasar un nombre como valores iniciales aquí para los usuarios, y luego la fecha de fabricación, puede ser no, o puede ser como una nueva fecha. Bien, y luego qué más, precio, digamos cero primero. Bien, ahora si guardo este archivo, y luego si hago clic en Añadir registro, deberías ver una nueva fila aquí. Bien, genial. Ahora lo que quiero a continuación es que cuando añadas un registro, debería pasar al modo de edición para que el usuario pueda empezar a escribir o cambiar los data de inmediato, así que no tienen que hacer doble clic todo el tiempo. Y, oh, hay una cosa que olvidé cambiar aquí. Así que en DataGrid, hay dos tipos de modo de edición. Así que ahora lo que estás viendo es que no puedes editar celda por celda, ¿verdad? Pero es bastante molesto si para como una aplicación CRUD como esta, lo que podemos cambiar es cambiar el modo de edición a una forma diferente así que podemos cambiarlo a Fila. Y luego si guardas esto, y luego si empiezas 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 data de inmediato. Así que es bastante conveniente y creo que es una característica muy poderosa también. Bien, así que ahora toda la fila estará en modo de edición y cuando termines, o cuando el usuario termine de editar la celda y luego presionen Enter, guardará todo. Bien, genial. Volvamos a lo que tenemos aquí. Bien, así que ahora podemos añadir un registro pero, lo siento, déjame refrescar esto. Um, así que lo que queremos es que cuando añadimos un registro, debería enfocarse o convertir esta fila en un modo de edición. Así que podemos añadir un siguiente paso cuando creamos una nueva fila. Podemos añadir este método. Bien, no recuerdo, rowEdit. RowEdit. Bien, así que podemos usar StartRowEditMode aquí como un siguiente paso. Y esta función necesita un ID. Así que el ID será el nuevo que acabamos de crear. Y luego podemos proporcionar un campo para enfocar. Y podemos especificar, como, el campo que queremos enfocar cuando esta fila se convierta en un modo de edición. Así que puedo enfocarme en el nombre. Ahora puedes jugar con otros campos para ver cómo se ve. Y ahora si guardo el archivo, y luego hago clic en Añadir Registro, bien, se enfocará en la columna del nombre, y luego el usuario puede empezar a cambiar los data. Vamos a elegir este. Cambiemos a 100 y presionemos Enter y luego se guardará en DataGridState, ¿genial, verdad? Genial, ¿verdad? Así que ahora aprendemos cómo crear una nueva fila, pero hay un problema.

Si intentas crear más registros aquí, se enfocará en la misma fila. Y eso es porque cada vez que haces clic en este botón, el ID es el mismo, ¿verdad? Entonces, lo que podemos hacer aquí es que, cuando el usuario termina 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 prop que te permite manejar el evento cuando el usuario deja de editar o termina de editar. Y esa prop se llama processRowUpdate. Y el processRowUpdate te devolverá una nueva fila. Así que la nueva fila son los data que el usuario acaba de terminar de actualizar. Bien, así que primero hagamos un console.log de la nueva fila. Bien, así que si presiono aquí y luego si hago clic en cualquier cosa y luego si presiono enter, entonces entra en este processRowUpdate. Pero tenemos un error porque el processRowUpdate, tienes que devolver algo. Y normalmente tienes que devolver una fila. De lo contrario, este processUpdate lanzará un error. Bien, así que ahora quieres crear un nuevo ID cuando los usuarios dejan 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, así que este será un ID único. Y ahora crearemos un nuevo objeto, objeto en el que propagaremos la fila que los usuarios acaban de actualizar con nuestro nuevo ID, bien. Y una vez que hacemos eso, entonces, así que en este punto tendríamos que guardar estos data en algún lugar. Y podemos hacer eso creando nuestro propio estado. Así que aquí crearemos nuestro propio estado, use state y podemos establecer por defecto como data como predeterminado, y luego en este punto estamos cambiando, tomamos el control de los estados y luego enviaremos el estado al data grid. Bien, así que ahora cuando tenemos la fila actualizada, lo que queremos hacer es queremos establecer filas como si estuviéramos añadiendo nuevos data a este array. Así que establecemos filas y obtendremos una fila anterior y luego propagaremos la fila anterior y empujaremos la nueva al estado. Bien, así que ahora si guardo el archivo y luego si presiono añadir registro y elijo data, cambiando los data pegar y luego precio 100 y luego una vez que estoy de acuerdo con esto cuando presiono enter creará una nueva bien crear una nueva, así que aquí el ID se genera en esta línea ¿verdad? y eso se guarda en esta fecha. Así que cuando el React se vuelve a renderizar, y nuestras filas contienen la nueva fila y luego se envían al data grid y luego el data grid se vuelve a renderizar con las filas más recientes. Bien, así que ahora tenemos las acciones de creación. Así que a continuación vamos a hacer la operación de actualización y vamos a intentar actualizar algunas de las filas existentes. Así que cuando intentamos actualizar aquí y cuando presionamos enter, lo que pasa es que crea una nueva fila. ¿Por qué es eso? Es porque cada vez que, cada vez que el usuario deja de editar o termina de editar, va a esta función, que es process row update. Y nosotros, ahora mismo, no sabemos si es una nueva fila o una fila existente, siempre creamos un nuevo ID único y lo empujamos como una nueva fila, y por eso siempre tenemos una nueva fila aquí, aunque actualizamos la fila existente, sí. ¿Bien? Así que lo que tenemos que arreglar aquí es que tenemos que dividir la condición aquí. Y diciendo que, bien, esta parte es para la fila existente para que podamos simplemente actualizar una fila específica. Pero esta parte la usaremos para añadir una nueva fila, ¿bien? Y ahora mismo podemos comprobarlo desde el ID. Así que podemos decir que la fila existente es igual a new row dot ID no debería ser igual a ID temporal. Así que el ID temporal es de la que usamos aquí, ID temporal. Así que cuando hacemos clic en Añadir Registro, crearemos un ID temporal aquí. Y eso significa que si el new row dot ID no es ID temporal, significa que esta fila es una fila existente. ¿Bien? Y una vez que sabemos esto, entonces podemos añadir una condición aquí que si es una fila existente, entonces estableceremos la fila en una lógica diferente. Así que obtendremos la fila anterior, y luego actualizaremos la fila que tiene el mismo ID. Y así podemos hacer primero row dot map, y luego obtenemos la fila, ¿verdad? Y luego si row.id es igual a new row.id, entonces la 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 vaya a estas condiciones. Ahora, si guardo el archivo y luego refresco la página, y si actualizo la fila existente, usaré esto y tal vez esto, y luego enter. Genial, así que debería actualizar a la fila existente. Si añado un registro aquí y elijo algún país y cambio a 100, así que 100 y luego enter, debería crear una nueva fila. O si intento actualizar esta fila, y enter, debería guardar en la fila existente. Genial. Así que tenemos Crear y Actualizar. Ahora echemos un vistazo a la operación final, que es la de eliminar. Bien. Así que para la operación de eliminación, normalmente podrías ver la última columna que se utiliza para hacer acciones extra como eliminar.

Así que también podemos hacer esto añadiendo un campo de acciones y un tipo espacial, que también son acciones. Ahora, cuando usas el tipo de acciones, tienes que proporcionar un conjunto de acciones que quieras hacer. Así que puedes hacer eso usando una prop llamada get actions y parámetros. Y luego tienes que proporcionar un array de acciones que quieras crear. Y podemos usar un componente de la cuadrícula, elemento de celda de acciones. Así que una vez que hagas esto, tendrás que proporcionar una clave porque está dentro del array para hacer feliz al enlace. Así que pon una clave delete, y luego añadamos algún icono, icono de eliminar, y luego añade una etiqueta también. Ahora, si guardas esto, entonces deberías ver la última columna aparece como esta, como botón de icono, y ahora mismo no suena porque no hemos añadido el onclick. Genial.

Muy bien. Ahora hay algunos detalles que creo que deberían funcionar. Así que puedes poner, como puedes agrupar algunas acciones en el menú también. Y creo que esto es algo bastante genial que he visto en casos de uso comunes. Ahora, si pones como mostrar en menú, se agrupará en un punto vertical aquí. Así que cuando haces clic y luego obtienes una acción en un menú en su lugar, pero no voy a usar esto ahora. Así que vamos a añadir la acción de eliminar utilizando el clic y para eliminarlo de manera directa. Solo necesitamos establecer filas y luego eliminar, eliminar el rol que acabamos de hacer clic. Así que ahora usaremos la misma función aquí y luego esta vez filtraremos la fila que no tiene el mismo ID, rms.id. Bueno, espero que esto funcione, ¿verdad? Si guardas el archivo, ahora filtras la fila que tiene el mismo ID que la fila en la que hiciste clic. Así que ya guardé 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 así. Y acabo de descubrir que el Data Grid tiene una propiedad llamada auto-altura, que ajustará la altura en función del contenido, lo cual es bastante genial. Así que cuando la auto-altura está activada, entonces se verá así. Y si añado un registro más, verás que el Data Grid se adaptará a la altura que cambió. Muy bien. Genial. Muy bien. Así que creo que esto es todo para el, así que lo que hemos aprendido hasta ahora es CRUD en eso cambió, el estado que creamos, y lo que hacemos aquí es el proceso de actualización de roles que es nuestra función principal aquí que maneja la creación, crea esta parte, y actualiza el rol existente. Para ELIMINAR, es sencillo. Para ELIMINAR, creamos una nueva columna de acciones que establecerá, que filtrará el rol que acabamos de hacer clic. Muy bien. Ahora vamos, antes de pasar al siguiente paso, vamos a convertir esto en algo más tal vez vamos a aprender algunas características de Joy UI que realmente me gustaría mostrarte. Así que, vamos a importar algunos componentes de Joy UI y usarlos dentro de la barra de herramientas. Así que voy a reemplazar esto con el componente de trucos. Ahora no lo he importado. Así que hagámoslo juntos. Vale. Así que vamos a importar trucos de MUI Joy Sheet. Muy bien. Y entonces, la Hoja es como un componente práctico, igual que Box, pero contendrá una propiedad de variante y una propiedad de color que puedes elegir. Así que ahora voy a convertir esta barra de herramientas en un fondo llamativo. Así que para hacer eso, usaremos una variante llamada variante sólida. Vale. Y el color será neutro. ¡Vaya! ¡Vaya! Genial. Así que ahora tendrás un fondo llamativo aquí. O tal vez cambiemos a las paletas primarias. Muy bien. Y ahora para los botones verás que tal vez puedes cambiar a la variante sólida también. Y tal vez elimines el color. Vale, así que vaya. Vale, así que 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. Vale, así que el botón tal vez la variante llamémosla menos importante y luego llamemos a esto usar variante plana aquí. Y luego tal vez volvamos a esto, hagamos esto primero. Vale, déjame explicar un poco sobre las variantes globales. Así que las variantes globales deberían ayudarte a definir como la importancia del componente.

Entonces, en este caso, verás que cuando pones 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 bien, este no es tan importante. Pero este es más importante. Sin embargo, cuando usas 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 que no tiene suficiente contraste. Y si cambio a suave, entonces ahora este se vuelve más importante porque se ve más obvio, como más llamativo que el sólido. Y con esto, tenemos otras propiedades que podemos hacer que todos los componentes dentro de este se adapten a los colores en función de su variante. Y esta propiedad se llama colores invertidos. Entonces, cuando activas esto, todo el blindaje dentro de este contenedor adaptará los colores en función de la variante para que la jerarquía de importancia se mantenga igual. Entonces, ahora verás que el registro de añadir es más llamativo que los otros botones que siguen siendo los mismos que los que usaste aquí. Así que esta es una característica genial de Joy UI, y este tipo de UI aparece mucho en el diseño moderno. Puedes aprender más en nuestros docs, pero ahora vamos a seguir con este. Tal vez hagámoslo suave. Muy bien. Genial.

Ahora pasaremos a la última parte, que es conectar a nuestra database, y luego terminaremos nuestra charla. Muy bien. Vale. Entonces, como Sam mencionó al principio, estamos utilizando MockServiceWorker para simular el backend y puedo compartir con ustedes un poco de la configuración para que no estén confundidos de dónde viene. ¿De acuerdo? Ahora, toda la configuración está en browser.js. Tenemos una database creada con este esquema y luego cuando el code se ejecuta, creará algunos data en la database y estos data son los mismos que teníamos en el app.jsx. jsx y al final, crea cuatro manejadores que es la API REST. Entonces, el primero es para permitirnos 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.

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 que veas algunos cambios en caso de que tengas una interacción compleja o paradas de carga. Ahora mismo está configurado a 300ms. Ahora puedes probar la API directamente en tu navegador copiando esta línea del code. Es una API NativeFetch sencilla. Ahora si pego esto y luego... Deberías ver esto habilitado también cuando refrescas 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 de ok. Y luego obtenemos la respuesta. Así que esto es como un backend falso. ¿Verdad? Puedes intentar añadir más data también. Así que si presiono enter, entonces ahora ves que se ha creado el nuevo producto. ¿Verdad? Y luego si intentas obtenerlo de nuevo, deberías ver tres elementos. Vale. Así que el último es el nuevo. Genial. Ahora probamos que la API funciona. Ahora vamos a conectar con nuestra UI. Vale, así que el primer paso voy a eliminar los data aquí y cambiar a vacío porque al principio no tenemos ningún data todavía. Así que no necesitamos esto ya. Y obtendremos los data del backend en su lugar. Así que para hacer eso, podemos usar efectos aquí para obtener los data del backend. Y podemos crear un estado de carga. ¿Está cargando y luego establece está cargando? Ahora estado. Y por defecto, será verdadero. Vale. Así que esto es solo para mostrarte que es super, super básico en la obtención de data o en el futuro puedes mejorar esto utilizando otras bibliotecas también. Entonces, al principio, simplemente estableceremos que está cargando en verdadero. Y luego obtendremos la API y productos slash, correcto. Y luego obtendremos la respuesta y luego la llamaremos respond.json. Así es como funciona la API Fetch. Solo sigo la plantilla aquí y luego obtendremos el resultado. Y finalmente, podemos establecer ese resultado en nuestro estado de filas aquí. Establecer filas y luego resultado. Y ahora estableceremos que está cargando de nuevo en ambos. Vale, ahora podemos usar el estado de carga y pasarlo a las rejillas de Data también. Data Grid tiene LoadingProp, que mostrará el spinner si está cargando es verdadero. Así que ahora guardemos esto y luego refresquemos de nuevo para que veas cómo se ve. Ahora, si refresco la página entonces ves un spinner durante 700 milisegundos. Y luego ahora los data vuelven del servidor y luego lo establecemos en nuestros estados. Muy guay. Ahora, vale así que esto es para obtener los data. Así que a continuación vamos a manejar la operación de creación. Así que lo que 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 async también y luego puedes llamar a la API directamente dentro de esta función y esperar por ella. Y data grid también esperará los resultados. Ahora, vale, esta es la parte de actualización, así que me ocuparé de la parte de creación primero. Así que cuando tienes la fila actualizada, lo que queremos es llamar a la API. Oh, lo siento, enviar los data al servidor.

Bien, y antes de eso, pongamos esto en verdadero. Y luego esperemos. Bien, ahora necesito copiar el code. Muy bien, así que copiaré de la línea 47 a la 51. 58, y luego lo pego aquí. Y luego, estos son los data brutos. Lo reemplazaré con mis data aquí, que es la fila actualizada. Muy bien, 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. Muy bien, y luego, cuando esto esté hecho, ahora pongamos is loading en falso. Bien, ahora guardemos esto, y luego intentemos crear una nueva fila. Muy bien, si presiono Enter, bien, ahora está creando data en el backend. Ahora, para verificar que funciona, buscaré los data desde el backend y usando fetch en el navegador aquí. Bien, genial, así que aquí, estos son los nuevos data aquí que acabamos de crear. Así que funciona. Muy bien, así que a continuación, vamos, lo siento, antes de pasar a la parte de edición, quiero mostrarte cómo también podemos manejar el error, porque esto sucede todo el tiempo. Entonces, por ejemplo, si el usuario se olvida de algún campo y luego presionan Enter, y esos data se envían al servidor, y luego el servidor rechaza con el error, ¿cómo manejamos ese error? Entonces, en este caso, falsificaré los data aquí. Digamos que forcé la fecha de fabricación a null. Bien, hago esto porque quiero que el servidor lance errores, porque ahora mismo, tienes que proporcionar todos los campos al backend. Entonces, para simular el error, puedes poner un null dentro de las fechas de fabricación. Muy bien, así que si guardo aquí, y luego intento crear una nueva fila, bien, y luego presiono Enter. Ahora. Ahora este es un, el servidor lanzará 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. IfResponse, y luego tenemos que verificar si, si IfResponse está bien o no. Muy bien. Entonces, hagamos solo la, la parte del error. Si IfResponse no está bien, lo que significa que si no es 200, digamos 200 x, x datas, entonces significa que algo está mal. Y lo que podemos hacer aquí es lanzar ese error dentro de este proceso de actualización de filas. Bien, y luego te mostraré más tarde por qué necesitamos lanzarlo. Bien, entonces lancemos, lancemos, tal vez tenga que hacer esto primero. Obtendré el error de la respuesta. Entonces respond.data. Y luego lanzaré ese error desde esta función. Ahora veamos cómo se ve cuando agrego un nuevo registro a, bien, luego presiono Enter. Bien, lo que me gusta de esto es que si algo está mal dentro de esta función, el usuario no abandonará el Modo de Edición. Lo cual tiene sentido porque pase lo que pase, si el usuario abandona el Modo de Edición, significa que los data que acaban de actualizar se perderán. Así que esta es una buena experiencia. Si algo sale mal, entonces debería mostrar alguna advertencia y luego dejar que actualicen los data y luego lo guarden de nuevo, ¿verdad? Entonces, ahora podemos hacer lo mismo aquí. El siguiente paso es cómo puedes manejar ese error porque ahora el data grid muestra un error que una llamada a procesar la actualización de roles no fue manejada porque esta función falta. 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, solo voy a alertar el error. Entonces, el error aquí es este y usualmente el error contiene una propiedad de mensaje. Entonces, si guardo el archivo y luego agrego un nuevo registro y luego lo envío. Bien, entonces ahora lo que pasó aquí es que cuando este envía de vuelta como no está bien, lanzamos errores fuera del procesador de actualización y luego DataGrid nos permite manejar ese error en esta propiedad on process will update error y luego mostramos la alerta de ese mensaje al usuario. Entonces, si hago clic en okay aquí, el usuario permanecerá en modo de edición y luego dejará que el usuario cambie los data a algo más. y porque lo codifiqué, siempre dará error cada vez. Genial, bien, eliminaré este y lo volveré a poner. Muy bien, así es como manejas el error con el proceso de actualización de roles y en el proceso de actualización de roles, bastante útil. Bien, lo siguiente es prácticamente lo mismo.

Solo necesitaremos manejar la parte de edición. Entonces, igual que antes, estableceremos que está cargando y luego copiaremos esta parte. Sí, es mejor simplemente copiar desde aquí, ¿verdad? Así que 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 este estado de 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 para manejar el error. Genial. Así que intentaré editar este. Y luego si presiono enter, está bien, así que ahora, se actualizará en el servidor también. Genial.

Ahora, esta es la parte final, que es la parte de eliminación. Creo que les daré cinco minutos para hacer la parte de eliminación por ustedes mismos. Y después de eso volveremos y repasaremos la parte de eliminación juntos. Muy bien. Hagamos el paso final. 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 de que puedes usarlo ease option equal to value para asegurar qué fila está seleccionada. Así como qué opción está seleccionada. Así que podemos agregarlo al componente de autocompletar. Así que esta prop te permitirá, te dará opciones y valores. Así que es como decirle al autocompletar cómo comparar la igualdad de las opciones y los valores. Así que en este caso, simplemente usaríamos el code de manera similar al ID. Correcto. Y ahora eso debería ser, Oh, no todas las opciones coinciden con. Vale. Así que creo que es por el backend que nos envía esto. Nos envía un code y una etiqueta vacía. Vale. Y es por eso que eligió este. Así que no podemos arreglar otras cosas, 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. Así que creo que esto es sobre el backend, el backend no debería enviarnos ese objeto vacío. Vale, es por eso que frontend, tenemos que lidiar con muchas cosas. Muy bien, ahora volvamos a la parte de eliminación en el paso final. Así que para eliminar estos data en el backend, podemos cambiar esto, al hacer clic en async, y luego igual que otros operadores. Simplemente estableceremos is loading en true y luego esperaremos la eliminación. Ahora sería solo el code de nuevo. Muy bien, podemos copiar la API de Eliminación y luego ponerla aquí y luego usar el param.id. Muy bien, y entonces, una vez que eliminamos, también podemos eliminar esto para obtener los data frescos, ¿o podemos mantener esto? Hagámoslo de otra manera. Así que esto depende de lo que te guste hacer, así que no hay una respuesta correcta o incorrecta aquí. Ahora buscaré los data de nuevo y luego los devolveré. Así que copiaré esto y luego lo pondré aquí. Muy bien, así que solo guardemos el archivo y luego si elimino uno y si estamos cargando y luego, está bien, así que la eliminación fue exitosa y luego los data deberían ser solo uno los que quedan. Vale, genial. Así que sí, eso es todo Sam. Creo que ya hemos terminado con la masterclass. Todo terminado para la masterclass. Genial, hermoso. Muchas gracias por mostrarnos todo eso, June. Fue muy informativo, si puedo decirlo yo mismo. Gracias, estoy feliz de estar aquí. Sí, pudimos ver muchas características interesantes del DataGrid y de JoyUI. Y cómo funcionan bien juntos, disculpa, y, sí, también pudimos ver cómo puedes empezar a trabajar con el verdadero backend, gracias al mock service worker. Así que tenemos algo de tiempo aquí al final antes de concluir definitivamente. Si la gente tiene alguna pregunta sobre cualquier cosa que hemos cubierto hoy, ya sea JoyUI, DataGrid, cualquier cosa sobre MUI. Sí, si solo quieres hablar sobre el clima, está bien, estamos aquí. Sí, 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, vale, genial. Así que ahora, esta es una versión de community, lo que usamos aquí es de XDatagrid.

Y esa característica es, no estoy realmente seguro si es una característica que te permite, que ajustará automáticamente, pero en la versión pro y premium de la cuadrícula de data, permitirá a los usuarios arrastrar y cambiar la columna por sí mismos. Puedo decirte aquí, vamos, no estoy seguro si instalo. Bueno, tal vez vamos, puedo mostrarte añadiendo MUIXdatagridpro. Esperemos unos segundos. Bueno, y luego, cambiemos a pro en este también. Y luego renómbralo como cuadrícula de data. Así que una vez que guardé esto, y luego ejecuto el servidor de nuevo, bueno, vaya. Use grid route props, okay. Bueno, no tenemos, entonces ruta, déjame ver. ¿De dónde viene este error, columnas de cuadrícula aquí, allí, okay. Déjame intentar, no estoy seguro de qué está pasando aquí, pero déjame intentar eliminar los slots, okay. 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 versión premium, como las características que permiten al usuario cambiar el ancho de la columna está allí de la caja. Puedes instalar la pro y premium y probar con todas las características. Lo único que verás es la marca de agua aquí, así que sí, espero que eso responda a tu pregunta. Tal vez Andrew puede compartir si hay alguna característica que, ya sabes, simplemente se ajusta. Sí, ¿puedes oírme? Sí. Muy bien, genial. Sí, en realidad planeamos trabajar en la característica que permite ajustar automáticamente el ancho de la columna, especialmente con un doble toque en el doble clic en el controlador de redimensionamiento. Sí, así que planeamos entregar eso, pero como mencionó June, ya hay redimensionamiento disponible. Así que sí, espero que esto responda a la pregunta. Genial, agradable. No puedo esperar a que llegue esa característica. Genial. Gracias por compartir eso. Tenemos otra pregunta aquí de Jory, que pregunta, ¿ofrece Joy UI slots para todos los componentes MUI? Así que supongo que te refieres a la cuadrícula de data para ser específico. Así que ahora estamos en el proceso de extraer Material UI en la cuadrícula de data, por lo que en el futuro esta es la forma ideal en el futuro. Si quieres usar Joy UI en la cuadrícula de data. Así que planeamos, no tienes que importar los slots, pero lo que harás es que importarás la cuadrícula de data, de x cuadrícula de data y tal vez barra joy. Y esta cuadrícula de data contendrá un cien por ciento de Joy UI sin ningún componente de Material UI. Así que este es el plan, pero ahora mismo estamos en el proceso de hacer eso. Por eso tienes que, ahora mismo tienes que importar este slot y reemplazar los componentes de Material por ahora. Genial, sí, estamos obteniendo la alfa temprana, un pequeño vistazo detrás de las escenas 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 genial. Bien, ¿tenemos alguna otra pregunta? ¿Hay algo más con lo que podamos ayudarles a todos 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 te gusta, puedes echar un vistazo como... Así que JoyUI, tenemos muchas plantillas con las que puedes empezar. Así que no dudes en echarle un vistazo. Dejaré el enlace en el chat. ¿Dónde está mi chat? Bien. Así que este es un ejemplo, como la página de marketing. Puedes copiar el code y ponerlo en tu proyecto para iniciar tu nuevo proyecto. O un panel de control. Así que funciona con el modo dock y el modo luz también. Así que, genial. Bien. Bueno, creo que eso es todo por hoy.

Gracias de nuevo, de nuevo, de nuevo, 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 grande stand brillante. Estaré trabajando allí junto con algunas otras personas. Y sí, espero verlos. Espero tener algunas 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, por favor no duden en contactarme o a cualquiera de nosotros aquí. Mi correo electrónico es sammui.com. También pueden encontrarnos a todos en Twitter. Tenemos Twitter slash MUI underscore HQ, donde pueden encontrar actualizaciones sobre todos nuestros productos. Sí, Twitter está un poco loco estos días, pero estamos haciendo lo que podemos para mantenernos activos allí. Muy bien. Y sí, creo que eso va a ser todo por nosotros. Así que gracias de nuevo. Y hablaremos con ustedes pronto. Sí, nos vemos. Adiós.