Creación de tablas de JavaScript con Tabulator

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Crear componentes de tabla dinámicas y adaptables puede ser un desafío para los desarrolladores web y, en la mayoría de los casos, las tablas HTML estándar pueden no ser suficientes para situaciones complejas. JavaScript ofrece numerosas soluciones para crear tablas dinámicas e intuitivas.

En este tutorial, exploraremos Tabulator, una biblioteca de tablas de JavaScript con un rendimiento mejorado de renderizado de tablas y numerosas funciones avanzadas. Al crear tablas con Tabulator, la integraremos en una aplicación de demostración de React, exploraremos el envío masivo de datos y la compararemos con otros paquetes de tablas de JavaScript. El código completo de esta demostración se encuentra en este repositorio de GitHub.

¿Qué es Tabulator?

Tabulator es una biblioteca de JavaScript moderna y repleta de funciones para crear tablas sin problemas. Ofrece funciones como búsqueda, paginación, ordenación, rendimiento mejorado de representación de tablas, tablas anidadas, hojas de cálculo multihoja y mucho más.

Configuración del tabulador en React

Inicializaremos nuestra aplicación con Vite para este proyecto, pero otras herramientas de compilación funcionarían bien.

En su línea de comando, navegue a la carpeta en la que desea crear su proyecto y ejecute el siguiente comando para inicializar un proyecto React:

npm crear vite@latest

Luego, siga las instrucciones y seleccione React.

A continuación, navegue a la projectcarpeta en su línea de comando y ejecute el siguiente comando para instalar los paquetes npm:

instalación de npm

Después de eso, ejecute el siguiente comando para iniciar el servidor de desarrollo:

npm ejecutar dev

A continuación, instale Tabulator. En su terminal, ejecute el siguiente comando en la carpeta raíz del proyecto:

npm install react - tabulador

Luego, reemplace el contenido del archivo con lo siguiente:App.jsx

//App.jsximportar "react-tabulator/css/tabulator.min.css"; importar { ReactTabulator } desde "react-tabulator"; exportar función predeterminada App () { const columnas = [ { título : "Nombre" , campo : "nombre" }, { título : "Edad" , campo : "edad" }, { título : "País" , campo : "país" }, ]; let data = [ { id : 1 , nombre : "Adewale Kunle" , edad : "31" , país : "Nigeria" }, { id : 2 , nombre : "Mary Smith" , edad : "1" , país : "Perú" }, { id : 3 , nombre : "Leopold Vicktor" , edad : "24" , país : "Rumania" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , },{ id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país: "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , Nombre :"Margret Marmajuke" , edad : "22" ,país : "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , }, { id : 4 , nombre : "Brendon Philips" , edad : "81" , país : "Suecia" , }, { id : 5 , nombre : "Margret Marmajuke" , edad : "22" , país : "Francia" , }, ]; return ( h1 Demostración del tabulador / h1 ReactTabulator datos = { datos } columnas = { columnas } // ); }  

En el código anterior, importamos el archivo CSS del Tabulador para el estilo y el ReactTabulatorcomponente del componente que instalamos hace un momento.react-tabulator

Para que el Tabulador funcione, necesita recibir los siguientes accesorios:

• Columns:Describe cómo quieres que se vea tu tabla
• Data:Los datos que desea que muestren el Tabulador
• Options:Contiene los ajustes de visualización de la tabla.

En el código anterior, tenemos la columnsmatriz que describe el aspecto que queremos para nuestra tabla.
Nuestros datos son una matriz de objetos que contienen un ID, nombre, edad y país. dataTambién pueden provenir de una fuente externa, como una API.

El tabulador necesita una pieza más para funcionar en nuestro proyecto. En el retorno, llamamos al ReactTabulatorcomponente que importamos para que funcione, pasando datos y columnas como propiedades:

//App.jsx ReactTabulator datos ={ datos } columnas ={ columnas } /

Si no ha iniciado su servidor de desarrollo antes, ejecute lo siguiente en su terminal:

npm ejecutar dev

¡Listo! Nuestro tabulador básico de React está listo.

Hasta ahora, hemos configurado correctamente un componente básico de React Tabulator. Vamos a ir un paso más allá y añadir funciones de paginación y búsqueda.

Añadiendo paginación

Para que la paginación funcione, pasaremos la optionspropiedad al ReactTabulatorcomponente. En el archivo, agregue el siguiente código:App.jsx

//App.jsx const options = { pagination : 'remote' , // o 'local' paginationSize : 10 , // número de filas por página };        

A continuación, en su ReactTabulatorretorno, pásele el optionsobjeto como propiedad de la siguiente manera:

opciones ={ opciones }

Te quedará un código que se parece a esto:

//App.jsx ReactTabulator datos ={ datos } columnas ={ columnas } opciones ={ opciones } /

Compruébelo en su navegador y su tabla ahora debería tener paginación como la que se muestra a continuación:

Añadiendo búsqueda

El tabulador también permite buscar en el contenido o los datos de una tabla. En primer lugar, existe una búsqueda por columnas que, como su nombre indica, busca en los datos de una columna específica y devuelve resultados.

Para habilitar esta búsqueda, actualice la columnsmatriz de la siguiente manera:

[ { title: "Nombre", campo: "nombre", headerFilter: "entrada", headerFilterPlaceholder: "Buscar nombre", headerFilterFunc: "me gusta", headerFilterLiveFilter: verdadero, }, { title: "Edad", campo: "edad", headerFilter: "entrada", headerFilterPlaceholder: "Buscar edad", headerFilterFunc: "me gusta", headerFilterLiveFilter: verdadero, }, { title: "País", campo: "país", headerFilter: "entrada", headerFilterPlaceholder: "Buscar país", headerFilterFunc: "me gusta", headerFilterLiveFilter: verdadero, }, ];

El código anterior le dice a Tabulator que necesitamos:

1. headerFilteraporte
2. headerFilterPlaceholderdeSearch by Name
3. headerFilterFuncempezar alike
4. headerFilterLiveFilterempezar atrue
5. Lo mismo para los objetos AgeyCountry

Ahora, veamos cómo funciona en el navegador. Hemos añadido correctamente una búsqueda de columnas a nuestro proyecto:

Si bien la búsqueda en columnas puede ser suficiente en algunas situaciones, a veces es necesario buscar en toda la tabla.

En el App.jsxarchivo, copie y pegue el siguiente código:

//App.jsximport { useState, useMemo } de 'react';

Usaremos useStateHook para realizar un seguimiento del estado de los datos de nuestra tabla cuando buscamos y useMemopara almacenar en caché el resultado de la búsqueda de modo que no sea necesario volver a calcularlo.

A continuación, configure useStatepara realizar un seguimiento de los cambios de datos:

//App.jsxconst [consulta de búsqueda, establecerconsulta de búsqueda] = useState('');

Luego, crea la handleSearchfunción para actualizar el searchQueryvalor:

//App.jsxconst handleSearch = (e) = { setSearchQuery(e.target.value);};

Ahora, crearemos la filteredDatafunción para almacenar en caché el resultado de la búsqueda para que no sea necesario volver a calcularlo cuando el componente se vuelva a renderizar:

const filteredData = useMemo(() = { if (!searchQuery.trim()) { return data; // Devuelve todos los datos si no hay una consulta de búsqueda } return data.filter((row) = Object.values(row).some( (value) = value value.toString().toLowerCase().includes(searchQuery.toLowerCase()) ) );}, [searchQuery]);

Se necesita un elemento de entrada para obtener los datos de la búsqueda. Agregue lo siguiente al JSX:

tipo de entrada="texto" nombre="búsqueda" marcador de posición="Buscar..." valor={searchQuery} onChange={handleSearch} /

Y por último, añade lo siguiente al ReactTabulatorcomponente:

//App.jsxdata={datos filtrados}

Nuestro código actualizado ahora se ve así:

//App.jsximport { useState } from "react"; // para la funcionalidad de búsquedaimport "./App.css";import "react-tabulator/css/tabulator.min.css";import { ReactTabulator } from "react-tabulator";const options = { pagination: "remote", // o 'local' paginationSize: 10, // número de filas por página }; const columnas = [ { título: "Nombre", campo: "nombre", headerFilter: "entrada", headerFilterPlaceholder: "Buscar nombre", headerFilterFunc: "me gusta", headerFilterLiveFilter: verdadero, }, { título: "Edad", campo: "edad", headerFilter: "entrada", headerFilterPlaceholder: "Buscar edad", headerFilterFunc: "me gusta", headerFilterLiveFilter: verdadero, }, { título: "País", campo: "país", headerFilter: "entrada", headerFilterPlaceholder: "Buscar país", headerFilterFunc: "me gusta", headerFilterLiveFilter: verdadero, }, ]; let data = [ { id: 1, nombre: "Adewale Kunle", edad: "31", país: "Nigeria" }, { id: 2, nombre: "Mary Smith", edad: "1", país: "Perú" }, { id: 3, nombre: "Leopold Vicktor", edad: "24", país: "Rumania", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81",País: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, { id: 4, nombre: "Brendon Philips", edad: "81", país: "Suecia", }, { id: 5, nombre: "Margret Marmajuke", edad: "22", país: "Francia", }, ]; exportar función predeterminada App() { const [searchQuery, setSearchQuery] = useState(""); const handleSearch = (e) = { setSearchQuery(e.target.value); }; const filteredData = useMemo(() = { if (!searchQuery.trim()) { return data; // Devuelve todos los datos si no hay una consulta de búsqueda } return data.filter((row) = Object.values(row).some( (value) = value value.toString().toLowerCase().includes(searchQuery.toLowerCase()) ) ); }, [searchQuery]); return ( h1 className='Demo_header'Tabulator Demo/h1 input type='text' placeholder='Search...' value={searchQuery} name="search" onChange={handleSearch} / ReactTabulator data={filteredData} column={columns} options={options} / / );}filter((fila) = Object.values(fila).some( (valor) = valor valor.toString().toLowerCase().includes(searchQuery.toLowerCase()) ) ); }, [searchQuery]); return ( h1 className='Demo_header'Tabulator Demo/h1 input type='text' placeholder='Buscar...' valor={searchQuery} name="buscar" onChange={handleSearch} / ReactTabulator datos={filteredData} columnas={columnas} opciones={opciones} / / );}filter((fila) = Object.values(fila).some( (valor) = valor valor.toString().toLowerCase().includes(searchQuery.toLowerCase()) ) ); }, [searchQuery]); return ( h1 className='Demo_header'Tabulator Demo/h1 input type='text' placeholder='Buscar...' valor={searchQuery} name="buscar" onChange={handleSearch} / ReactTabulator datos={filteredData} columnas={columnas} opciones={opciones} / / );}

Temas

React Tabulator te permite experimentar fácilmente con diferentes temas con una sola declaración de importación.

Aquí hay diferentes temas que puedes probar:

// --- Comenta el tema que quieres probar:// import "react-tabulator/css/tabulator.min.css"; // predeterminado// import "react-tabulator/css/tabulator_modern.min.css"; // predeterminado// import "react-tabulator/css/bootstrap/tabulator_bootstrap.min.css"; // bootstrap// import "react-tabulator/css/bulma/tabulator_bulma.min.css"; // bulmaimport "react-tabulator/css/semantic-ui/tabulator_semantic-ui.min.css"; // semántico// import "react-tabulator/css/materialize/tabulator_materialize.min.css"; // materializar

Envío de grandes conjuntos de datos al servidor

Actualizar manualmente grandes conjuntos de datos puede ser tedioso. Por ejemplo, si tuviéramos 100 usuarios representados en una página y necesitáramos actualizar la información de cada uno, una forma típica de gestionarlo sería realizar una solicitud de “put” al users/idendpoint por cada actualización de usuario. Esto puede llevar mucho tiempo y reducir el rendimiento, ya que tendríamos que enviar más de 100 solicitudes al servidor.

Un mejor enfoque para manejar esto sería implementar la modificación masiva de datos en el servidor mientras el cliente envía una matriz de datos modificados al servidor en una sola llamada.

Tabulator hace que sea más fácil y sencillo implementar la modificación masiva de datos en el lado del cliente:

export default function App() { const editableColumns = [ { title: "Estado", campo: "campo", editor: "entrada" }, { title: "Diseñado", campo: "diseñado", alineación: "centro", formateador: "tickCross", editor: verdadero }, { title: "Probado", campo: "probado", alineación: "centro", formateador: "tickCross", editor: verdadero }, { title: "Fabricado", campo: "fabricado", alineación: "centro", formateador: "tickCross", editor: verdadero }, { title: "Enviado", campo: "enviado", alineación: "centro", formateador: "tickCross", editor: verdadero }, { title: "Disponible", campo: "disponible", alineación: "centro", formateador: "tickCross", editor: verdadero } ]; const initialData = [ { campo: "Cerrado", diseñado: verdadero, probado: verdadero, fabricado: verdadero, enviado: verdadero, disponible: verdadero }, { campo: "Reservado", diseñado: falso, probado: verdadero, fabricado: verdadero, enviado: verdadero, disponible: verdadero }, { campo: "Comprado", diseñado: falso, probado: falso, fabricado: verdadero, enviado: verdadero, disponible: verdadero }, { campo: "Pendiente", diseñado: falso, probado: falso, fabricado: verdadero, enviado: verdadero, disponible: verdadero } ];}

Definimos editableColumnspara especificar las columnas de la tabla, incluidos sus títulos, campos de datos y editores (si hay alguno).

initialDatacontiene las entradas de datos iniciales de la tabla, donde cada entrada representa una fila y contiene valores para diferentes columnas:

export default function App() { const [dataA] = useState(initialData); const handleSetData = () = { alert("Reg Form Submittedn" + JSON.stringify(dataA)); //Solicitud HTTP para enviar datos al servidor }; return ( div style={{ paddingLeft: "16px" }} h3Mapping Table/h3 ReactTabulator column={editableColumns} data={dataA} / button onClick = { handleSetData } estilo = {{ marginTop : " 16px " , backgroundColor : " verde " }} Enviar / botón / div )}                                                   

Este componente muestra una tabla con celdas editables mediante React Tabulator, junto con un botón de envío para activar una acción con los datos de la tabla. Podemos implementar solicitudes HTTP para enviar los datos modificados en bloque al servidor:

Tabulador frente a otras bibliotecas de tablas

Si bien Tabulator es una buena opción para implementar tablas en aplicaciones React, es importante reconocer la variedad de bibliotecas de tablas disponibles. En esta sección, compararemos Tabulator con otras dos bibliotecas de tablas populares en React: material-table y DataTables.

Tabulador de React frente a tabla de materiales

material-table es una tabla de datos simple pero poderosa para React basada en Material-UI Table con características adicionales como representación de columnas personalizadas, anulación de componentes, clasificación, búsqueda y más.

En esencia, React Tabulator y material-table resuelven el mismo problema, pero algunas características los diferencian. React Tabulator ofrece funciones como ordenamiento, filtrado, paginación, selección de filas y celdas. Por otro lado, material-table incluye funciones como agrupamiento, filtrado, ordenamiento, paginación y edición. También incluye un selector de fechas listo para usar.

Tabulador de React frente a tablas de datos

DataTables es una biblioteca de mejora de tablas en JavaScript y HTML. Es una herramienta altamente flexible, basada en la mejora progresiva, que añade funciones avanzadas a cualquier tabla HTML.

DataTables, aunque originalmente era un plugin de JQuery, también funciona con React y otras bibliotecas de JavaScript. Ofrece compatibilidad con paginación, filtrado y ordenación. Además de las funciones habituales, también incluye una función de exportación de datos que permite exportar datos de tablas en JSON, CSV, PDF y Excel.

Al exportar a archivos CSV, la descarga no funciona de inmediato con React Tabulator, ya que es necesario utilizar esta solución alternativa.

Conclusión

React Tabulator ofrece soluciones confiables para la mayoría de los desafíos asociados con las tablas en aplicaciones frontend. No solo optimiza el desarrollo de componentes de tabla dinámicas y adaptables, sino que también destaca en la gestión de grandes conjuntos de datos con un rendimiento mejorado. Es una excelente opción para desarrolladores que buscan funcionalidades avanzadas de tablas y una fácil integración.

¿Estás agregando nuevas bibliotecas de JavaScript para crear nuevas funciones o mejorar el rendimiento? ¿Qué pasa si hacen lo contrario?

Sin duda, los frontends son cada vez más complejos. A medida que añadas nuevas bibliotecas de JavaScript y otras dependencias a su aplicación, necesitarán mayor visibilidad para garantizar que sus usuarios no se encuentren con problemas desconocidos.

Construya con confianza: comience a monitorear de forma gratuita.

Si quieres conocer otros artículos parecidos a Creación de tablas de JavaScript con Tabulator puedes visitar la categoría Guias.