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

Summary

In this practical video, the presenter showcases the React Data Table component, a lightweight library that allows for easy creation and customization of tables in React applications. The video covers importing and setting up the component, displaying data rows, implementing sorting, row selection, pagination, fixed headers, filtering, and loading state management. The presenter also demonstrates how to integrate custom functionality, like a search input field, and mentions additional features available in the library's documentation, such as expandable rows and theming. Overall, the video serves as a comprehensive guide for developers looking to quickly incorporate tables with various functionalities into their React projects.

Takeaways

• 👍 react-data-table-component is a small React component that allows you to create customizable tables with features like sorting, row selection, fixed headers, pagination, and more.
• 🔑 It is useful for small projects that don't require extensive table customization, helping you get a functional table quickly.
• 🚀 The video demonstrates how to set up a React project, install the library, and use it to create a basic table with columns and data.
• 🔄 You can enable sorting on columns by adding the `sortable` prop to the desired columns.
• ✅ The `selectable-rows` prop allows you to select individual rows or all rows with checkboxes.
• 📃 Pagination can be added using the `pagination` prop, controlling the number of rows per page.
• 🔒 The `fixed-header` prop keeps the table header fixed while scrolling through data.
• 🔍 You can implement filtering by managing state and filtering the data based on user input.
• ⚙️ Other features include displaying a title, showing a loading spinner while data fetches, and more.
• 📚 The library's documentation provides examples and guides for additional functionality like expandable rows, conditional styling, and exporting data.

Q & A

What is the purpose of the React Data Table component discussed in the video?

The React Data Table component is a small library that allows you to create tables that are easy to customize. It enables features like listing data, selectable elements, fixed headers, pagination, and loading spinners, making it a simple solution for quickly adding a table to your application.

How do you install the React Data Table component in your project?

You can install the React Data Table component by running the command `npm install react-data-table-component` in your project's terminal.

What are the two main properties required to use the Data Table component?

The two main properties required for the Data Table component are `columns`, which define the column headers, and `data`, which contains the row data to be displayed in the table.

How do you enable sorting functionality for a column in the Data Table?

To enable sorting functionality for a column, you need to add the `sortable` property and set it to `true` for the desired column(s) in the `columns` array.

How can you select rows in the Data Table and access the selected data?

To enable row selection, you need to set the `selectableRows` property to `true` on the Data Table component. You can then access the selected row data through the `onSelectedRowsChange` event, which provides an array of the selected rows.

How do you enable pagination in the Data Table component?

To enable pagination, you need to add the `pagination` property to the Data Table component. You can also specify the number of rows per page using the `pagination.perPage` property.

How can you keep the table header fixed while scrolling?

To keep the table header fixed while scrolling, you need to set the `fixedHeader` property to `true` on the Data Table component.

How do you display a loading spinner while the data is being fetched?

You can display a loading spinner by using the `progressPending` property on the Data Table component and setting it to a boolean value based on the loading state. Additionally, you can provide a custom component to be displayed as the loading spinner using the `progressComponent` property.

How do you filter the table data based on user input?

To filter the table data based on user input, you need to handle the input change event, filter the data using the input value, and update the state with the filtered data. This can be done by creating a state for the data and filtering it using array methods like `filter`.

What are some other features provided by the React Data Table component?

Some other features provided by the React Data Table component include conditional row styling, expandable rows, theme customization, CSV/Excel export, and more. You can refer to the documentation for a complete list of features and examples.

Outlines

00:00

🚀 Introduction to React Data Table Component

This paragraph introduces the React Data Table component, which is a small and easy-to-customize library for creating tables with features like data listing, selectable elements, fixed headers, pagination, and loading spinners. The speaker explains that it is a simple and fast way to have a table in an application, making it suitable for small projects that do not require extensive customization. The paragraph then walks through setting up a new React project and installing the required dependencies.

05:00

🔍 Exploring React Data Table Features

This paragraph delves into the various features of the React Data Table component. It covers sorting columns alphabetically, enabling selectable rows and capturing selected data, implementing pagination, fixing table headers for better readability when scrolling, and filtering data using an input field. The speaker demonstrates how to use these features by modifying the project code and showcasing the visual changes in the application.

10:01

🛠️ Advanced React Data Table Customization

The final paragraph explores additional customization options offered by the React Data Table component. It discusses adding a title to the table, displaying a loading spinner while fetching data from a server, and rendering a custom loading component. The speaker also mentions other features like conditional rows, expandable rows, changing the default theme, and exporting data as a CSV file. Finally, the speaker provides resources for further learning, such as joining the community Discord server, following social media channels, and accessing personalized consultations on the speaker's website.

Keywords

💡React

React is a popular JavaScript library for building user interfaces. In the video, React is being used to create a data table component. The speaker mentions that they are creating a React project and importing the 'react-data-table-component' library to build a customizable table within a React application.

💡Data Table

A data table is a way to display and organize data in a tabular format, with rows and columns. In the context of the video, the speaker is introducing a React component called 'react-data-table-component' that allows developers to easily create and customize data tables within their React applications. This component provides features such as sorting, pagination, row selection, and more.

💡Component

In React, a component is a reusable piece of code that represents a part of the user interface. Components can be combined to build complex UIs. The video focuses on the 'react-data-table-component', which is a React component designed specifically for creating data tables. The speaker highlights the benefits of using this component, such as its simplicity and customization options.

💡Columns

Columns are the vertical sections of a data table, representing the different attributes or properties of the data being displayed. In the video, the speaker demonstrates how to define the columns for the data table by creating an array of column objects, each with a 'name' property specifying the column header.

💡Data

In the context of data tables, 'data' refers to the information or records that will be displayed within the table's rows. The speaker shows how to provide data to the 'react-data-table-component' by creating an array of objects, where each object represents a row in the table, and the keys correspond to the defined column names.

💡Sorting

Sorting is the ability to rearrange the rows of a data table based on the values in a particular column, either in ascending or descending order. The video demonstrates how to enable sorting for columns in the 'react-data-table-component' by setting the 'sortable' property to true for the desired columns.

💡Row Selection

Row selection refers to the ability to select one or multiple rows within a data table. In the video, the speaker showcases how to enable row selection in the 'react-data-table-component' by setting the 'selectableRows' property to true. This feature allows users to select rows and perform actions on the selected data.

💡Pagination

Pagination is the process of dividing a large set of data into smaller, more manageable chunks or pages. The video illustrates how to enable pagination in the 'react-data-table-component' by setting the 'pagination' property, which allows users to navigate through different pages of the data table.

💡Fixed Header

A fixed header is a feature in data tables where the column headers remain visible and fixed at the top of the table, even when scrolling through the rows. The speaker demonstrates how to enable this feature in the 'react-data-table-component' by setting the 'fixedHeader' property to true, ensuring that the column headers remain visible while scrolling through large datasets.

💡Filtering

Filtering is the process of showing only the data rows that match certain criteria or conditions. In the video, the speaker implements a filtering functionality for the data table by creating an input field and a function that filters the data based on the input value. This allows users to quickly find and display only the relevant data within the table.

Highlights

This video is a practical guide about a React component called 'react Data Table', which is a small component that allows us to create easy-to-customize tables.

With this component, we can list data, have selectable elements, fix the header of the table, add pagination, and display a default component while data is loading.

This component aims to be simple and allows us to have a table quickly in our application, which can be helpful for small projects that don't require extensive customization or a giant table component.

The video covers the installation of the 'react-data-table-component' package and setting up a basic React project.

The instructor demonstrates how to import and use the DataTable component, passing in column definitions and data as properties.

The video showcases how to enable sortable columns by adding the 'sortable' property to the column definitions.

The instructor explains how to enable row selection by adding the 'selectableRows' property, and how to handle the selected row data using the 'onSelectedRowsChange' event.

The video demonstrates how to enable pagination by adding the 'pagination' property and customize the number of rows per page.

The instructor shows how to fix the table header by adding the 'fixedHeader' property, preventing the header from scrolling out of view.

The video covers adding a title to the table using the 'title' property.

The instructor demonstrates how to display a loading spinner or message while data is being fetched using the 'progressPending' property and a custom 'progressComponent'.

The video showcases how to add a search input field to filter the table data based on the input value using state and the 'filter' method.

The instructor mentions additional features available in the 'react-data-table-component' library, such as conditional row styling, expandable rows, theme customization, and CSV export.

The video concludes by encouraging viewers to check the documentation for more advanced features and leave any questions in the comments.

The instructor provides links to join the community discord, follow on social media, and book personalized consultations.

Transcripts

Hey cod el día de hoy Les traigo un

video práctico acerca de un componente

de react que se llama react Data Table

component que es un componente muy

pequeño que al final nos permite crear

tablas que son fáciles de personalizar

es decir nosotros podemos listar datos

podemos tener elementos seleccionables

podemos hacer que una tabla en la

cabecera se mantenga fija por ejemplo o

podemos hacer también la paginación o

que cuando cargan los datos nos muestre

algún componente por defecto este

componente tiene el objetivo al final de

ser sencillo y permitirnos tener una

tabla rápidamente en nuestra aplicación

Así que si ustedes están en un proyecto

pequeño y no requieren de tantas

personaliza opciones y no requieren de

un componente de una tabla gigante pues

esto los puede ayudar bastante para

tener el trabajo hecho en menos tiempo

así que vamos a

empezar lo primero que voy a hacer es

crear un proyecto de re vamos a abrir

una terminal vamos a ubicarnos en el

escritorio con el comando cdop Y a

partir de Aquí vamos a ejecutar El

Comando mpm create bit y vamos a crear

un proyecto en este caso que se llame

react gu Data Table example y luego

vamos a escoger react como framework y

javascript tan solamente para este

proyecto con esto se va a crear un

proyecto ya puedo cerrar la terminal

vamos a arrastrar esta carpeta que se ha

creado dentro de nuestro Editor en este

caso voy a estar utilizando visual

Studio code vamos a abrir una terminal

de visual Studio Y a partir de aquí lo

primero que vamos a hacer es instalar

las dependencias con el comando npm o en

p install listo una vez instalado vamos

a limpiar algo de código porque en

app.jsx siempre viene con código de

ejemplo de bit y vamos a crear un

componente básico de r que simplemente

diga app listo vamos a ejecutar esto

vamos a abrir una terminal vamos a

ejecutar mpn rund Esto va a ejecutar un

servidor en el 5173 Y si nosotros

intentamos abrir esto en nuestro

navegador vamos a ver un texto que dice

app está centrado porque eso también

viene con estilos por perfecto Pero

bueno vamos a enfocarnos ahora en la

biblioteca que vamos a estar utilizando

el día de hoy que se llama react Data

Table component de hecho vamos a

buscarlo de esta forma react Data Table

component y vamos a llegar aquí en este

paquete de npm para aquellos que quieran

saber de qué se trata de forma resumida

este componente este componente nos

permite crear una tabla y ya tiene

estilos y funcionalidades

preconfiguradas es una forma rápida de

tener una tabla en una aplicación quizás

no es tan personalizable al modo de

tener por ejemplo un Tank stack Table o

un Data Table de material ui pero aún

así para muchas cosas sencillas que al

final nosotros queremos tener muy común

en muchas aplicaciones como podría ser

por ejemplo ordenamiento de elementos

seleccionar filas o seleccionar

múltiples filas tener filas expandibles

y paginación pues viene bastante bien

para tenerlo preconstruido o ya

construido des el momento que instalamos

esta biblioteca Entonces vamos a

instalarlo vamos a venir aquí donde está

el comando Para instalarlo vamos a venir

a nuestra consola vamos a cancelar un

segundo vamos a pegar El Comando MP

install react gu Data gu Table gu

component y vamos a volver a ejecutar el

proyecto ahora si vemos un momento su

documentación vamos a ver que aquí no

está todo sino que hay un enlace que nos

lleva a una p página que está en netlify

y Bueno aquí nosotros vamos a encontrar

la documentación aquí hay ejemplos

básicos por ejemplo de cómo iniciar con

una tabla un reordenamiento fácil una

fila seleccionables y demás pero todo

eso se lo voy a ir mostrando poco a poco

Okay cómo funciona este componente

primero tenemos que importarlo venimos

aquí arriba y le digo voy a importar

Data Table from react Data Table

component y vamos a tener que utilizar

este componente así aquí debajo voy a

llamar el componente Data Table y espera

dos propiedades muy importantes la

primera son las columnas que son

básicamente los títulos o los

encabezados que van por cada columna y

luego está la propiedad Data que son los

datos o mejor dicho las filas de la

tabla ahora estos datos yo los puedo

pasar directamente aquí como un arreglo

pero vamos a escribirlos aquí afuera

para tener mucho más orden en este caso

por ejemplo voy a crear una constante

llamada colums que va a ser un arreglo y

lo que espera Data tables es un objeto

en donde vamos a darle los nombres de

las columnas por ejemplo voy a colocarle

un name y aquí voy a decirle que quiero

colocar el nombre quizás de un usuario y

esto lo voy a copiar unas tres veces más

porque también voy a querer colocar por

ejemplo el apellido de un de un usuario

y la edad de un usuario y Bueno nada más

de momento Entonces si yo quiero pasarle

esto pues simplemente le coloco column y

aquí de momento como no hay datos vamos

a pasarle un arreglo vacío vamos a

guardarlo Y si yo vengo en la aplicación

vengo en el proyecto vamos a ver que

aquí aparece un texto que dice no hay

record a mostrar pero si ahora añado

datos de verdad por ejemplo voy a crear

aquí aparte de colum los datos vamos a

minimizar allí y voy a crear Data y Data

va a tener los siguientes Campos por

ejemplo esto tiene que coincidir con los

datos que voy a pasarle aquí por ejemplo

aquí hay nombre apellido y edad entonces

voy a colocarle aquí nombre apellido y

edad listo y tengo dos usuarios Y si

quiero pasarlos Aquí tengo que pasar en

este caso la constante de guardo y si y

vengo aquí en la aplicación pueden ver

que Aparecen las columnas pero los datos

no se muestran bien la razón es que cada

uno de estos valores puede que venga con

otro tipo de clave es decir No

necesariamente tiene que ser nombre sin

no puede venir con name o full name o

algo así entonces yo tengo que pasar

este nombre también relacionado con este

texto que yo quiero mostrar es decir

cuando se muestre la columna nombre yo

quiero que utilice el selector y el

selector viene de esta forma es una fila

y dentro de la fila quiero que muestre

el nombre este nombre que está aquí es

justamente el nombre que tiene en este

caso la columna entonces si yo quiero

mostrar esto Pues bueno aquí de hecho

sería solamente dos puntos yo quiero

Mostrar esto pues simplemente utilizo

este formato una función flecha Row con

el nombre de la clave del objeto

Entonces vamos a copiar esto y vamos a

pegarlo Aquí también en apellido y en

edad en apellido por ejemplo ya no sería

r nombre sino sería @ apellido y en edad

también sería @ edad guardo Y si vengo

ahora en el componente pueden ver que

aparecen los datos ahora vamos a Añadir

más datos de ejemplo vamos a venir aquí

en nuestro arreglo y voy a colocar

algunos datos extras por ejemplo de otro

usuario vamos a colocarle unos tres

usuarios más todos por supuesto con su

nombre apellido y edad vamos a guardarlo

Y si venimos ahí está la tabla ahora

supongamos que en esta tabla en cuanto a

los nombres yo qui quiero ordenarlos

alfabéticamente bueno no tengo que

crearlo desde cero sino que ya existe

una propiedad que yo puedo Añadir a la

columna y va a ser que todos estos filas

de esa columna van a poder ser

reordenada la propiedad de hecho se

llama sortable y solamente se viene aquí

en la parte de columns y vamos a

colocarle la propiedad sortable and true

ziano Y si yo guardo y vengo aquí en el

componente pueden ver que no ha cambiado

pero si doy un hover aquí en la columna

aparece una flecha y yo puedo ordenar

alfabéticamente ya sea en orden inverso

o desde la letra a a la z y claro esto

funciona para cualquier columna es decir

que si ustedes copian esto y lo pegan

tambén bien en las otras columnas

significa que las otras también pueden

poder ser reorden adas yo también puedo

hacer lo mismo con apellido y edad luego

lo siguiente que también podemos hacer

con esta tabla es tener muchas filas que

puedan ser seleccionables es decir poder

seleccionar una y aplicar quizás alguna

acción a todas esas Por lo general para

hacerlo en una tabla normal tendríamos

que empezar a recorrerlos o empezar a

Añadir una un botón allí pero aquí es

tan fácil como venir aquí en la

propiedad de Data Table y colocarle la

propiedad selectable rows que sería lo

mismo que selector RS and true y ya con

esto si yo guardo y vengo aquí en la

aplicación pueden ver que aparecen unos

botones en donde yo puedo seleccionar

todos o puedo seleccionar algunos

cuantos ahora si ustedes se preguntan

Cómo puedo ver estos datos que estoy

seleccionando también tiene un evento un

change que puede capturar esos cambios

de hecho el evento se llama on selected

Road change y esto lo que va a dar es un

arreglo o unos datos de hecho vamos a

ver estos datos y vamos a ver por

consola estos datos Entonces yo guardo

esto y abro la consola vamos a ver que

aquí si yo selecciono algunos por

ejemplo selecciono uno o dos lo que me

está devolviendo es un objeto pero una

propiedad selectable rows con los datos

que he escogido por ejemplo aquí en

selected Row me está mostrando que tengo

tres elementos esto aquí está extraño

porque por lo general solamente tengo

dos por ejemplo pueden ver que ahí tengo

dos okay Entonces vamos a ver Ahí están

los dos si yo selecciono un tercero

aparecería un tercero y si yo quito

algún elemento por ejemplo quito este

elemento Carlos vamos a ver que solo me

quedan los dos listo entonces de esta

forma Pues nosotros ya también podemos

guardar luego enviar una petición o algo

a un backend para que guarde estos dos

datos que han sido seleccionados o

aplicar algún tipo de lógica de backend

ahora muy aparte de tan solo seleccionar

elementos otra cosa que podemos hacer es

también tener paginación incluida esto

quiere decir que si yo añado aquí en dat

Table una propiedad que se llama

pagination y guardamos esto

inmediatamente lo que va a hacer es

darnos paginaciones por todos los datos

en este caso por ejemplo pueden ver que

me dice que puedo seleccionar 10 por

página pero yo también puedo cambiar ese

números que yo le digo Aquí en

pagination le digo pagination per page y

aquí le puedo colocar Cuántos quiero por

página le digo que quiero cuatro por

página Entonces si vengo ahora en la

interfaz y refresco van a ver que tan

solo tengo cuatro y tengo otra página

más y aquí continuaría el elemento cinco

ya que solo me muestra cuatro por página

y bueno esto ya lo tiene incluido los

botones ya están estilizados ya

simplemente es activar esa opción ahora

en caso nosotros tengamos muchos por

ejemplo no t solamente tengo cuatro y

demás Hay veces en las que nosotros

queremos eh tener una tabla que se quede

la cabecera fija vamos a hacer esto voy

a Añadir unos cuantos datos extras Okay

voy a guardarlo y claro Aquí está

paginado vamos a comentar la paginación

de momento esta paginación de cuatro

vamos a tener aquí todos los datos

listados y supongamos que yo al

scrollear quiero que la cabecera se

quede fija porque como pueden ver aquí

cuando yo hago un scroll la cabecera al

final se queda atrás Bueno lo que yo

puedo hacer también es Añadir un estilo

o una propiedad que se llama fixet

header Y si yo guardo que un scroll

pueden ver que la cabecera se queda allí

pegada arriba Entonces no hay necesidad

de que yo tenga que estilizarlo

manualmente y bueno Además de eso

también lo que podríamos hacer es unirlo

con nuestras propias funciones por

ejemplo supongamos que yo quiero un

campo que permita filtrar la tabla

también podría hacerlo que yo aquí creo

un input en este caso este input va a

tener un tipo texto y aquí nosotros

podemos colocarle en change para que

cuando se cambie un valor haga algo lo

que voy a hacer es crear una función que

maneje el cambio de función que se llame

handle change y en handle change voy a

recibir ese valor vamos a pasarlo aquí

en el input Solo que lo que voy a hacer

aquí es no solamente recibir ese valor

sino que vamos a reordenar para

reordenar datos nosotros tenemos que

alterar un estado Entonces estos datos

que yo tengo aquí estos datos del

arreglo lo que voy a hacer es guardarlos

primero en un State ent vamos a importar

por acá voy a decirle vamos a importar

de react un Us State vamos a crear aquí

un estado que se llame registros record

inicialmente Esto va a tener los datos

que vamos a estar definiendo incluso

esto puede ir debajo porque aquí está

definido el arreglo entonces debajo voy

a crear el estado cces los datos que

tengo aquí van a ir dentro del Estado Y

utilizando este enfoque de hecho aquí me

he equivocado con una constante vamos a

empezar a filtrarlos vamos a decirle que

de los datos vamos vamos a utilizar una

función filter y por cada registro que

se empiece a recorrer lo que voy a hacer

es empezar a compararlo por ejemplo voy

a decir the record en su propiedad name

convertido a minúscula vamos a colocarlo

si esto incluye uno de los textos que

voy tipeando en el input que vendría

desde etarget punto value y también lo

vamos a convertir al lowercase es decir

a minúscula si coinciden ambos pues

significa que hay elementos que estoy

escribiendo en el input que al final

estén en la tabla entonces voy a

retornar todos estos elementos que

coincidan y luego Esto me va a retornar

un nuevo arreglo vamos a llamarle filter

record y Esto va a ser establecido como

un nuevo estado Entonces le digo estos

son los nuevos récords que van a

mostrarse Entonces al momento de

recorrer la tabla ya no voy a mostrar

los datos directamente sino Mostrar los

Records ya que estos van a estar siendo

filtrados si yo guardo y vengo ahora en

la tabla aquí tengo un input Y si yo

escribo un dato de algún nombre por

ejemplo Lucía esto debería cambiar

Entonces vamos a ver aquí probablemente

sea por el handle change de hecho en mi

caso los datos no lo he colocado en

inglés sino en español es por eso que

aquí me da un error entonces voy a

colocarle record punto nombre y aquí en

este caso el V Sí estaría bien Entonces

vamos a verlo De hecho aquí sería

include con s Okay vamos a guardarlo Y

sí si refresco y escribo algún nombre

esbo Lucía pueden ver que se filtra o

escribo Carlos se filtra o Ana por

ejemplo y se va filtrando los datos

ahora otra propiedades que también tiene

esa tabla es colocarle un título si yo

vengo aquí en dat Table y coloco una

propiedad title puedo colocarle aquí

datos de usuarios Y si yo guardo y vengo

aquí en el componente pueden ver que

aparece dentro de la tabla el título

otra cosa también es cuando nosotros

intentamos cargar datos que no vienen

desde aquí sino desde el servidor y

queremos que la tabla muestre algún

spinner o algo lo que podemos hacer es

también colocarle esa propiedad

supongamos que los datos no están

asignados aquí sino que vienen desde un

Back Entonces inicialmente estos récords

van a estar vacíos Okay si yo guardo

esto de aquí y vengo aquí en la tabla me

dice no hay datos que Mostrar pero lo

que puedo hacer es colocar un use effect

Aquí voy a decirle Cuando cargue la

aplicación vamos a colocar un Time out

para que simule esa petición le digo set

Time out esto lo que va a hacer Es que

después de determinado tiempo va a

ejecutar el código que yo coloque aquí

dentro de esta función en este caso el

Time out lo que Espera es un tiempo voy

a colocar después de 2 segundos y voy a

decirle que después de 2 segundos va a

establecer en Records lo que está en

Data el tema sería aquí Okay después de

2 segund segundo va a aparecer los datos

vamos a guardarlo y de hecho para que

esto también no me dé ningún error vamos

a guardar este Time out en una constante

que se llame Time out y solo para que

react funcione bien Aquí vamos a

retornar al final antes de que finalice

el use effect un Clear Time out para que

en caso el componente sea desmontado

también quite el Time out buen Eso lo

único que va a hacer es que si yo veng

aquí en la tabla y yo refresco pueden

ver que me dic no hay record a mostrar y

después de 2 segundos aparece pero yo

podría mostrar un spinner entonces lo

que podría hacer es colocarle un estado

que se llame pending por ejemplo o

loading también podría llamarlo set

loading inicialmente va a estar en true

y Cuando cargue los datos vamos a

cambiarlo a lo adding en false Y quién

va a utilizar este valor bueno vo a

utilizar en este caso el Data Table

Entonces yo le puedo decir progress

pending y le coloco el valor de loading

yo guardo y vengo ahora en la aplicación

pueden ver que dice texto lo adding si

yo refresco después de 2 segundos recién

carga en este caso los elementos ahora

en este caso siempre muestra texto aden

si ustedes quieren colocar un spinner

pueden venir en el componente y pueden

colocarle progress component y aquí

pueden colocarle un componente que

quieran por ejemplo en este caso voy a

colocar un h1 que diga cargando y si yo

refresco aquí me dice cargando o pueden

crear un componente por Aparte también

podrían cortar esto y crear una función

por acá que se llame loader o algo así y

aquí pueden retornar el elemento que

quieran puede ser un div aquí un h1 que

diga cargando y debajo un spinner vamos

a colocar de momento un h3 simplemente

que diga spinner ya luego ustedes pueden

colocar un icono allí con animaciones y

demás momento coloco lo ad De hecho aquí

iría como jsx pad de esta forma guardo y

ahora s si refresco la página pueden ver

que está cargando y spinner y bueno a

partir de aquí el componente lo que hace

es ofrecerle otras funcionalidades como

permitir que se expandan elementos y

demás eso requiere requerir más

componentes o también permite estilizar

algunas cosas de forma básica si quieren

conocer todo esto pueden entrar en la

documentación de react Data Table

component y aquí ustedes van a ver una

lista de todo lo que puede hacer en este

caso yo les he mostrado las básicas como

podría ser el ordenamiento el

seleccionar datos el tener la paginación

las cabeceras el wer pero también hay

otras opciones como un conditional rous

Es decir para que algunas tablas

apliquen una lógica u otra esto lo que

hace es que pueden colocar colores en

algunas tablas o el expandable como les

dije que también lo que hace es que si

ustedes dan un click expande datos de

debajo de esa fila y ya luego hay otros

ejemplos que están relacionados con el

cambiar el tema por defecto que trae la

tabla para colocar los elementos de una

forma más compacta Quizás o exportarlo

como un csv por ejemplo como un Excel y

así de momento al menos con esto ya les

doy una idea para que puedan iniciar con

este componente Y si tienen una duda

pueden dejar en los comentarios nos

vemos en un siguiente ejemplo eso ha

sido todo por el video del día de hoy si

tienes dudas puedes dejarla en los

comentarios o en la descripción deja un

enlace para que te puedas unir a la

comunidad de discord en donde

encontrarás a otros desarrolladores o si

en caso el enlace está acaí puedes ir a

fastd discord para acceder más

rápidamente dejo mi Twitter donde

típicamente comparto algunos recursos

interesantes de desarrollo y

programación en general mi Instagram

donde comparto algunas noticias cortas

todos los días el tiktok donde comparto

videos cortos e informativos y mi canal

principal en donde comparto opiniones y

noticias de tendencias nuevas además

también dejo mi web en donde puedes

reservar asesorías personalizadas

Gracias por ver y nos vemos en un

próximo video