React Tanstack Table - Crea tablas en React en Minutos

Подписаться 261 тыс.

Просмотров 27 тыс.

50% 1

Aprende a crear tablas en React utilizando React tanstack table, una biblioteca headless que te permita crear tablas rapidamente y con las funcionalidades más comunes como son el ordenamiento, las busquedas o filtros, la paginacion de tablas, la personalizacion de columnas y filas, y mucho más. En este tutorial vamos a aprender desde instalarlo hasta llegar a crear un componente de React reutilizable.
Sitio Oficial de React tanstack table:
tanstack.com/t...
Curso Recomendados
Curso de React: • Curso de Reactjs desde...
Curso de Nextjs: • Curso de Nextjs desde ...
🛒 Fazt Web
Tienda Online: store.faztweb....
⭐ Cursos Recomendados
Curso de Nodejs ⮕ fazt.dev/nodejs
Curso de Python⮕ faztweb.com/py...
Curso de React ⮕ • Curso de Reactjs desde...
Curso de Javascript para React ⮕ • Javascript para Aprend...
🗣 Redes Sociales
Github ⮕ github.com/fazt
Twitter ⮕ / fazttech
Whatsapp ⮕ www.whatsapp.c...
🎒 Servicios Recomendados
DigitalOcean ⮕ m.do.co/c/8ef2...
Namecheap ⮕ namecheap.pxf....
Ledger ⮕ (Hardware Wallet) bit.ly/3ijsVNW
SiteGround ⮕ bit.ly/31u9ZEk
Cloudinary ⮕ bit.ly/3ohNlJ7
Notion ⮕ affiliate.noti...
Codecrafters ⮕ app.codecrafte...
Puedes encontrar la lista de tutoriales de React en:
faztweb.com/react
#reactjs #javascript #frontend

Опубликовано:

24 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 68

@omarchanelalifuertes910 10 месяцев назад

Siempre tan conveniente Fazt, estoy desarrollando una aplicación para calculo de tuberias para un ingeniero civil, lo estoy haciendo en React y Node, necesitaba esto para listar las tablas de la base de datos

@genaroloyadour4324 10 месяцев назад

Concuerdo, es como el chapulin colorado

@DarlinMunoz-rd6gf 10 месяцев назад

Muchas gracias por el contenido amigo, justo estaba viendo tu curso del CRUD con React y NodeJS + MongoDB, me he acostumbrado mucho a tus enseñanzas, eres un excelente maestro, (el mejor) en mi opinión.

@4mser 10 месяцев назад

Fazt nunca para... Aprendo más acá en 40 minutos que en 2 semanas de universidad jaja, gracias por tu tiempo y dedicación

@FaztCode 10 месяцев назад

Gracias @Amser por el apoyo

@admoises 10 месяцев назад

Excelente video, al fin un canal wue habla de esta librería, esta biblioteca la uso en mi trabajo, sería genial una 2da parte en donde expliques la paginacion controlada y los filtros por columna

@cerocodigo 7 месяцев назад

lo segui y a la perfección funciona con mi base de datos, gracias

@luislavayen9495 6 месяцев назад

gracias Fazt, siempre tan puntual con lo q necesito en el momento.

@rcomayo 10 месяцев назад

Estoy haciendo un proyecto de universidad y justo mañana empezaría a realizar las tablas. Viene como anillo al dedo el video.

@coxato 3 месяца назад

muchas gracias Fazt, justo estaba leyendo la documentacion pero se me hacia un poco rara, con este video queda todo mejor explicado y mucho mas rapido.

@SonGoku-pc7jl 6 месяцев назад

uau! genial explicado! i increible como al final lo consigues super reutilizable! muchas gracias Fazt! Eres el mejor!

@pythonbrothersandfamily 10 месяцев назад

Veo este canal hace muchos años y siempre viene con buen contenido 👌, muchas gracias

@ozzolim 10 месяцев назад

Perfecto el rey de los get started.

@leonardosoto6045 10 месяцев назад

Me salvaste la vida Fazt, estaba buscando por dias...

@raibooms 7 месяцев назад

Eres el mejor!!! Siempre muy útiles tus grandiosos videos

@seanmeissimilly 6 месяцев назад

Buen video, me ayudó, saludos desde Cuba.

@paracomentar2703 10 месяцев назад

Me encantan tus cursos fazt, la manera de explicar todo, que no des por echo ciertas cosas y las expliques bien, desconozco si tenes cursos de pago en alguna plataforma o solo tenes los gratuitos de acá, pero si los tuvieras invertiria en los cursos que necesitara sin dudarlo ya que soy conciente de los buen instructor y programador que eres, como sea siemple mil gracias por todo el contenido :)

@sebastianrios4433 10 месяцев назад

Genio, menos no puedo decir, gracias totales.

@nooob922 10 месяцев назад

Magnifica explicación! Muchas gracias, estamos iniciando con Next e implementacion de TankStack Table pero con solo la documentación no hubiera sido posible, al menos para mí! 👍

@albertleog.maldonado5786 10 месяцев назад

Es horrible esa docu

@phonevelarde Месяц назад

Gracias por compartir tu información

@registro_pedagogico 10 месяцев назад

Gracias, eres el mejor Fazt, Cuando saldra el curso de Sveltekit?

@michaeltorrez933 10 месяцев назад

Gracias, seria excelente si llegaras más a fondo, por ejemplo, como definir los anchos de cada columna, botones de acciones etc. mil gracias, saludos

@Deus-lo-Vuilt 10 месяцев назад

Gracias Fazt , me viene genial el vídeo 🙌🙌

@marcosrodriguez-cf3pj 10 месяцев назад

Gracias por el contenido , si algun dia puedes hacer un tutorial de next i18n estaria genial. Espero el siguiente video 💯

@KopexTrack 8 месяцев назад

Que buen video Fazt, he estado buscando uno similar pero no encontré ninguno bueno en español, podrías ampliarlo integrando funcionalidad a los rows de las tabla como botones para trabajar con la información de dicha row. Eres grande! Saludos

@FaztCode 8 месяцев назад

De hecho es una buena idea se que puede ser confuso, lo que voy a hacer es un ejemplo de Nextjs con react table y allí integro también botones y otras etiquetas

@ignaciovelazquez3684 10 месяцев назад

Excelente Fazt, Muchas gracias por los aportes de siempre, si te pediría si en algún momento puedes hacer algo de react-big-calendar.

@FaztCode 10 месяцев назад

Si es uno de los videos siguientes de esta semana de hecho

@ignaciovelazquez3684 10 месяцев назад

Genial, muchas gracias la verdad, es oro puro el canal para los que deseamos aprender@@FaztCode

@199OffsprinG 5 месяцев назад

Excelente ! Muchas Gracias !

10 месяцев назад

Excelente Fazt. 👍👍🏆🏆🤭🤭

@jersonmoreno7618 5 месяцев назад

Oye fazt genial el vídeo pero surge una duda: se puede usar react table para ejecutar los filtros y el ordenamiento haciendo peticiones al back asi como la paginscion?

@CCskatemedia 7 месяцев назад

eres el mejor

@collinzuniga5410 10 месяцев назад

Eres increible👏

@30.secondsss 10 месяцев назад

Gracias Fazt ❤

@davidgabrielcayllahuabetal2637 10 месяцев назад

Que tal @FaztCode, me eh dado cuenta que lista todo de una vez, por ejemplo si son 100 productos o usuarios en base a eso filtra la tabla etc. lo cual es muy rápido por que ya tiene la data cargada, pero que pasaría si hay como un millón de productos o usuarios, se tendría que hacer una api cierto? y si es así ya técnicamente la api haría todo eso mas lo demás que tiene React Tanstack Table ya no haría falta, o se puede integrar con eso, alguien que haya trabajado con React Tanstack Table mas "API REST" por favor me ayudaría mucho como manejaría en ese caso una solución.

@estebannc3028 4 месяца назад

si tengo varias tablas en mi app es mejor tener una componente que se le pase data y columns o es mejor usar el hook en todos los lados que necesite usar la tabla

@Leo-hl7mc 8 месяцев назад

Tengo una consulta, quisiera saber si se puede agregar botones en tanstack table, porque quiero agregar botones que realicen una acción en cada fila

@jdmasoft 10 месяцев назад

Excelente me sirvio esa tabla :D

@davidcamacho3113 Месяц назад

1:01 Creación del proyecto 2:58 Generar datos de tabla - mockaroo 4:55 Instalando Tanstack 5:45 Creando componente tabla 7:32 hook useReactTable 10:28 thead 12:12 tbody 13:22 [Solución ERROR no se muestra tabla] getCoreRowModel 13:54 [Solución ERROR se muestran headers no datos] flexRender 15:24 tfoot 17:33 Estilizando tabla css 19:20 Procesando datos 19:53 Day.js 21:14 [Solucion ERROR fecha incorrecta] getValue() 22:27 Modificar varias columnas - accessorFn concatenando nombre y apellido 23:43 Encabezados sobre encabezados 25:50 Funcionalidades 26:00 Paginación - getPaginationRowModel 28:49 Ordenar tabla - getSortedRowModel 33:58 Filtrado - getFilteredRowModel 37:16 Preparando tabla para reutilizar 38:08 [Solución ERROR importación] 39:00 Adaptando tabla para datos nuevos/diferentes

@droid-jr9940 10 месяцев назад

esta super good !!

@MonSster-jf7ex 10 месяцев назад

Fazt ya me da miedo, siempre leía comentarios de que adivinaba lo que quieren, y ahora me pasó a mi, justo ando viendo como hacer tablas dinámicas con react 😮

@sr.bolita2332 10 месяцев назад

Pregunta de un noon, porque comienzas con vite para elegir React? O usar el comando para crear un proyecto React directamente a mi no me aparece el archivo vite

@albertleog.maldonado5786 10 месяцев назад

Como seria con datos del backed para la ordenacion, paginacion, filtrado, ..., ya no seria todo local supongo, y entonces las funciones que trae la libreria no tendria el mismo efecto?, por ejemplo la paginacion no seria desde el backend?

@francocaporaletti3246 10 месяцев назад

hay una tabla que esta basada en tanstack y material ui, se llama material-react-table es muy buena, pero costosa y de difícil customización

@chrisxnhn 10 месяцев назад

Sos dios

@joshmany4689 10 месяцев назад

Entonces es posible combinar TanStack table con, por ejemplo, el componente de tabla de NextUI?

@FaztCode 10 месяцев назад

Si puedes combinarlo con cualquier otra biblioteca de componentes

@irvingaguas229 6 месяцев назад

me podrían ayudar con el Warning: Each child in a list should have a unique "key" prop. se puede ver el error en el minuto 14:08 Y no me muestra los datos de la tabla

@juanjara5086 10 месяцев назад

Excelente!!!, que tema es el que estas utilizando en vs code ?

@juanignaciobogado1258 10 месяцев назад

Creo que se llama tokyo night bro, saludos desde 🇦🇷

@the-ezekiel-2227 9 месяцев назад

Hola! Muchas gracías por el vídeo está genial. Tengo un poqueño problemita y quizá me lo puedas responer aquí. Estoy usando un React Redux y tengo almacenado todo en un estado global. Para traer LOS DATOS uso lo siguiente: const { items } = useSelector((state) => state.products) Luego hago un const data = items.map ... para iterar, y el const columns = []... lo hago igual como tú. Los datos aparecen en tabla pero al aplicar la paginación o el buscador se me congela la página y en consola no deja de hacer request, me trae los datos sin parar mi pregunta es ¿¿¿COMO DETENGO EL REQUEST????? Así la paginación o filter me funcionan... gracias!

@LizardoPerez-cl7le 5 месяцев назад

tengo una consulta si uno usa el filtrado de datos, el buscador, de esa manera no piede rendimiento la aplicacion? o se necesita alguna optimizacion?

@FaztCode 5 месяцев назад

El tema es que este trae todos los datos y añade una paginación, pero sería mejor que solo cargue datos parciales y los vaya pidiendo a medida que se de click en la aplicación

@Nefasque 10 месяцев назад

NICE !!!

@jacksondestima 10 месяцев назад

Necesito una libreria que maneja tabla en react como jQuery lo maneja con datatable

@fernandopoveda9861 10 месяцев назад

Realmente vale la pena!?

@Unknown-so7qv 10 месяцев назад

Que hay de MUI-Datatables

@angelosgd4502 10 месяцев назад

hola fazt, podrias ayudarme con esta duda? podria ser algo mensa o rara jaja, quiero hacer mi primer portafolio web, pero no se con que stack hacerlo, tenia pensado usar el mevn o mern stack, pero no tengo muy claro, podrias recomendarme algunas tecnologias? no tengas miedo en cuales tengo un amplio conocimiento en basicos y poco mas, express, react, vue, nodejs, nextjs, y quiero hacer esto en un plazo de 2-3 años asi que aprendere mas a lo largo del camino jaja, espero lo leas gracias :D

@MsSoldadoRaso 10 месяцев назад

Si es un portafolio solo necesitarias tener cosas dinámicas ahí en el cliente , no vería la razón de usar un backend ni base de datos, porque no usas Astro?