React Data Table Componente - Crea Tablas en Minutos en React y Nextjs

Cuando desarrollamos aplicaciones web Frontend tipicamente es necesario hacer uso de Tablas que nos permitan listar datos, o nos permitan poder tener elemento interactivos para ordenar, para filtrar o para seleccionar multiples filas o columnas en una tabla, bueno todo esto puede ser mas facil si usamos un componente de npm llamado react-data-table-componente el cual permite tener todas estas caracteristicas al instante, ademas que es un componente que tambien permite personalizarse usando CSS para que coincida con el tema de tu aplicación.

⭐ Cursos Recomendados

🎒 Servicios Recomendados

🎒 Otros Servicios

🗣 Redes Sociales

Puedes encontrar la lista de tutoriales de React en:

#reactjs #desarrolloweb #frontend #javascript #nextjs #reactjstutorial

[juanmamani]

Los mejores 13 minutos invertidos de esta semana! gracias Fazt

[phonevelarde]

Me parefe que esta bastabte completo.. yo casualmente hice uno para mis proyectos.. y pues diria que esta muy similar .. esta bien chulo .. graxias por compartir esta información

[sandralopez]

Fazt OMG, luego de tu video de introduccion a React me he puesto a realizar ejercicios y justo ayer andaba toda truste porque no me quedaba una tablita y hoy como si leyeras mentes me apareces con esto, jaja ILY <3 Cuando rinda frutos vendré a dejarte par aun juguito. Gracias por tanto contenido MAGNIFICO.

[xsthrmw]

Genial, me hizo recuerdo a vuetify, ese componente de datatable me gusta mucho y pude replicarlo con tailwind y vue3 en shadcn, pero para react no pude porque no hay slots, aunq me di una idea de cómo hacerlo ahora, genial, gracias Fazt

[hgmarquezp]

Fazt, yo utilizo el datagrid de material, es muy completa la versión gratuita, tiene para hacer filtro, editar celdas, check box para elegir líneas, también tiene para personalizar caja de acciones, yo siempre lo utilizo en mis proyectos .

[israelgonzalez]

brutal, es lo que necesito para mi backoffice. ❤

[SonGoku-pcjl]

Increible, parece más facil que el react table de los de react query :) gracias!

[lisandrogonzalez]

excelente, nos puedes hacer un ejemplo como implementar material-react-table v2.

[lgxxxx]

Se podrian personalizar <th>, <tr>, <td>?... es decir pornerle estilos con tailwind, bootstrap etc ?... gracias que buen video !

[oscarclaros]

Que excelente, Gracias Fazt por enseñarnos este tipo de contenido util

[xk]

Excelente video! Podrías comentar Fazt OMG que extensiones usas para programar con React dentro de VSC?

[christianjaviercedillopala]

Uno con Material React Table, la estoy implementando, pero si tiene su nivel de complejidad jaja.

[bonnickstewar]

Esta muy cool ... Pero tengo una pregunta como seria para cuando la.tabla tiene por ejemplo más de 100mil registros. Como se comportará la.funcion de ordenar o buscar

[Jerez-Jostin]

como hago entonces para que en vez de agregar los datos en el codigo, se puedan agregar directamente en la tabla? osea en la pagina.

[richardcarmonaestrada]

Genial..! Pero tengo una duda, como manejo este componente si debo mostrar miles y miles de datos? Veo que la paginacion o el ordenamiento lo hace en base a los datos ya cargados, pero en miles de registros no se cargará toda la data, como manejo la paginacion por ejemplo? Gracias Fazt

[EdgardoRuotolo]

Podrias hacer el mismo ejemplo consumiendo una api ?

[jhonsebastiandiazcaicedo]

En esta parte si yo quiero enviar datos por ejemplo debun sensor, como podria hacer para que cada datos aparezca ordenadamente en una tabla y que a medida que se envien valores, la tabla no sea estatica, sino que se vaya actualizando la informacion???

[LuisSilva-fchp]

como le puedo añadir una imagen a la tabla y personalizarla, asi como las que salen en la miniatura?

[diegofernandez]

buen video fast, oye quiero hacerte una petición, podrias hacer un un vídeo de cómo mejorar el rendimiento en next js ya que ahora estoy aprendiendo Next js y la verdad lo encuentro demasiado lento, hice un modo oscuro para una sidebar guardando el estado en local storage y al recargar la página tarda al menos 4 segundos en volver al color que yo la tenía, esto no me pasa cuando trabajo con react con vite, espero puedas, un saludo 😎

[pedrofigueroa]

Si yo quieto que el buscador me filtre por cualquier columna y no solo del nombre como seria ?