JavaScript Data Grid – Control potente y completo
- Carga millones en segundos.
- Diseño móvil adaptable.
- Edición flexible e intuitiva.
- Filtrado y agrupación tipo Excel.
- Personalización de columnas y resúmenes.
- Exportación a PDF, CSV y Excel.
Quick Overview Video
Trusted by the world’s leading companies
Resumen
JavaScript Data Grid, también conocido como JavaScript DataGrid, es un control rico en funciones para mostrar datos en formato tabular. Su amplia gama de funcionalidades incluye enlace de datos, edición, filtrado tipo Excel, ordenación personalizada, agregación de filas, selección y soporte para formatos Excel, CSV y PDF.
¿Por qué elegir Syncfusion JavaScript DataGrid?
Alto rendimiento
Esfuerzos bien pensados, centrados principalmente en el rendimiento rápido para cargar millones de registros en solo un segundo.
Vinculación de datos sin interrupciones
Vincula datos sin problemas con varias fuentes de datos locales y remotas como JSON, OData, WCF y servicios web RESTful con la ayuda del administrador de datos.
Se adapta a cualquier resolución
DataGrid tiene un diseño altamente responsivo y optimizado para escritorios, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows OS.
Edición flexible
El JavaScript Grid realiza operaciones crear, leer, actualizar y eliminar (CRUD) más fácilmente con una lista de objetos de negocio o servicio de datos remoto con la ayuda de un administrador de datos.
Crea tus propios diseños de plantilla
Permite a los usuarios crear experiencias personalizadas en el JavaScript Grid según las necesidades de su aplicación utilizando una amplia gama de opciones de plantilla.
Temas personalizables atractivos
Diseño de vanguardia con más de 5 temas integrados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utiliza la herramienta en línea Theme Studio para personalizar temas fácilmente.
Exportación e impresión fácil
Exporta el Data Grid en varios formatos de archivo, incluyendo Excel, PDF y CSV. Imprime todas las filas, independientemente del número de páginas, así como la página actualmente vista.
Globalización y localización
Permite a los usuarios de diferentes regiones utilizarlos formateando fechas, moneda y numeración según sus preferencias.
Ejemplo de código de JavaScript DataGrid
Comienza fácilmente con JavaScript DataGrid usando solo unas pocas líneas de código HTML y TS como se muestra a continuación. También explora nuestro Ejemplo de JavaScript DataGrid, que muestra cómo renderizar y configurar un DataGrid en JavaScript.
<div class="control-section">
<div class="content-wrapper">
<div id="Grid">
</div>
</div>
</div>import { loadCultureFiles } from '../common/culture-loader';
import { Grid, Selection } from '@syncfusion/ej2-grids';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { orderData } from './data-source';
Grid.Inject(Selection);
/**
* Default Grid sample
*/
loadCultureFiles();
let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15));
let grid: Grid = new Grid(
{
dataSource: data,
columns: [
{ field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
{ field: 'CustomerName', headerText: 'Customer Name', width: 150 },
{ field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
{ field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
{ field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },
{ field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
]
});
grid.appendTo('#Grid');
Indicador de carga de esqueleto
El Data Grid muestra el efecto Shimmer como indicador de carga mientras se obtienen datos y se enlazan a la cuadrícula durante el renderizado inicial, la actualización o después de realizar acciones como ordenar, filtrar, agrupar, etc. El Data Grid ofrece dos tipos de indicadores de carga: spinner y shimmer.
Diseño de UI adaptable
La interfaz de usuario de Data Grid está personalizada y rediseñada para ofrecer una excelente visualización y usabilidad en pantallas pequeñas. Sus funciones incluyen filtro, ordenación, búsqueda, selector de columnas, menú de columnas, desplegable de paginación y cuadros de diálogo de edición que se adaptan al tamaño de la pantalla y muestran los elementos de fila en dirección vertical.
Columna
Las columnas definen el esquema de la fuente de datos en el JavaScript DataGrid. Admite formato, generación automática de columnas, definiciones de columnas, congelación de filas y columnas, extensión de columnas, ajuste de texto, selector de columnas, menú de columnas y otras funciones.
Paginación
La paginación se utiliza para ver un segmento de datos de la fuente de datos asignada. El JavaScript DataGrid ofrece una interfaz de paginación integrada con opciones para personalizar toda su interfaz. También cuenta con un modo de paginación bajo demanda para una recuperación eficaz de datos desde servicios web remotos.
Ordenación
Ordene las filas en orden ascendente o descendente en una columna simplemente haciendo clic en el encabezado. Ordene los datos de varias columnas manteniendo presionada la tecla Ctrl y haciendo clic en el encabezado. Además, puede definir su propia lógica de ordenación personalizada según las necesidades de la aplicación.
Filtrado
El filtrado ayuda a visualizar registros específicos o relacionados que cumplen con un criterio determinado en el data grid. El JavaScript DataGrid admite varios tipos de filtros, incluidos los potentes filtros similares a Excel. Elija el tipo de filtro adecuado, defina su propia lógica de filtrado personalizada y personalice la interfaz de filtrado según las necesidades de la aplicación. También se pueden filtrar caracteres diacríticos.
Selección
Seleccione filas o celdas usando una casilla de verificación o simplemente haciendo clic en ellas. Seleccione más de una fila o celda manteniendo presionada la tecla Ctrl, Shift o Command, o de forma programática.
Edición
El JavaScript DataGrid admite operaciones de creación, lectura, actualización y eliminación (CRUD). Además de los componentes de edición integrados para modificar el valor de una columna específica, se pueden crear componentes de edición personalizados utilizando plantillas según las necesidades de la aplicación. Con la ayuda de un administrador de datos, puede realizar operaciones de edición con una colección de arrays de JavaScript o un servicio de datos remoto.
Agrupación
Agrupe filas para mostrar los datos en una estructura jerárquica organizada en orden ascendente o descendente, lo que facilita la expansión y contracción de los registros. Existe una opción para agrupar registros de la columna deseada mediante arrastrar y soltar esa columna en un área interactiva.
Agregación
Los valores agregados de las columnas pueden mostrarse fácilmente utilizando la función de agregación. Los agregados pueden personalizarse para mostrar su valor en filas de resumen individuales, filas de resumen de grupo o filas de encabezado de grupo.
Filas y columnas congeladas
Las filas y columnas congeladas son visibles en la parte superior y en la izquierda, derecha, ambas o en una posición fija, lo que permite que el resto del contenido del grid sea desplazable. Esta función se utiliza principalmente para comparar valores de celdas en el componente JavaScript DataGrid.
Encabezado fijo
El encabezado del JavaScript DataGrid debe mantenerse en una posición fija al desplazarse verticalmente por el documento para visualizar el contenido del grid junto con el encabezado de columna.
Arrastrar y soltar filas
El JavaScript Grid permite a los usuarios arrastrar y soltar filas a otro DataGrid o componente personalizado. Los usuarios también pueden arrastrar y soltar filas dentro del mismo DataGrid utilizando el ícono de arrastre y transferir filas entre diferentes grupos.
Grid maestro-detalle
El JavaScript Master Detail Grid es un caso de uso en el que los detalles de un registro se visualizan en un DataGrid separado al hacer clic en una fila específica.
Gestión de estado
La gestión de estado en el componente JavaScript DataGrid permite mantener el estado del grid incluso después de actualizar el navegador o al navegar a otra página dentro de la misma sesión del navegador. Esta función es especialmente útil para conservar la configuración y los datos del grid tras recargar la página.
Actualización en vivo
El DataGrid actualiza datos en vivo en sus celdas a intervalos de tiempo específicos. Estas actualizaciones se realizan sin causar retrasos ni ralentizaciones, lo que garantiza que el sistema se mantenga altamente receptivo y eficiente.
Gráficos integrados con DataGrid
El componente de cuadrícula de datos se integra con el componente de gráficos, transformando los datos seleccionados en visualizaciones dinámicas e interactivas. Esta combinación de tablas y gráficos permite a los usuarios obtener una visión más clara de un vistazo. Los usuarios pueden personalizar los tipos de gráficos, los ejes y los elementos visuales.
Características adicionales
Altura de fila
La altura de las filas es un factor importante al mostrar el número de registros en la ventana de visualización, y se puede personalizar fácilmente según los requisitos de la interfaz de usuario de la aplicación. También es posible establecer la altura de las filas de forma condicional.
Copiar al portapapeles
El portapapeles permite a los usuarios copiar los datos de filas o celdas seleccionadas. Use las combinaciones de teclas Ctrl+C y Ctrl+Shift+H para copiar datos con y sin encabezados, respectivamente.
Menú contextual
Realiza varias acciones en el JavaScript DataGrid utilizando el menú emergente que aparece al hacer clic derecho en una celda, encabezado o paginador. Además de los elementos de menú predeterminados integrados, se pueden agregar elementos de menú contextual personalizados.
Ancho y alto
Establezca las propiedades de ancho y alto para cambiar el tamaño del DataGrid. Cuando el contenido excede el elemento del grid, aparecerán barras de desplazamiento horizontales y verticales. Para llenar el contenedor padre del DataGrid, simplemente establezca el alto y el ancho en 100 %.
Encabezados apilados
encabezados apilados permiten agrupar y visualizar los encabezados de columna de forma apilada. El número de columnas que se pueden apilar es ilimitado. Todas las acciones del DataGrid se pueden realizar incluso cuando las columnas están apiladas.
Accesibilidad
Navegación por teclado
El componente JavaScript DataGrid garantiza que cada celda sea accesible mediante el teclado. Funciones principales como ordenar, seleccionar y editar pueden realizarse únicamente con comandos de teclado; no se requiere interacción con el ratón. Esto ayuda a crear aplicaciones altamente accesibles utilizando este componente.
Lector de pantalla
La vista de JavaScript DataGrid tiene soporte completo para la accesibilidad WAI-ARIA. La interfaz de usuario del Data Grid incluye elementos visuales de alto contraste que ayudan a las personas con discapacidad visual a tener la mejor experiencia de visualización. Además, las descripciones válidas de la interfaz son fácilmente accesibles mediante tecnologías de asistencia como los lectores de pantalla.
De derecha a izquierda (RTL)
La representación de derecha a izquierda permite mostrar el texto y el diseño del JS DataGrid de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para los idiomas RTL.
Optimizado para móviles y fácil de usar
El componente DataGrid mejora la usabilidad y proporciona un diseño optimizado y responsivo para escritorios, pantallas táctiles y teléfonos en todos los sistemas operativos, incluidos iOS, Android y Windows.
Soporte táctil
Los gestos táctiles intuitivos y un diseño de interfaz interactivo ofrecen la mejor experiencia de usuario. Todas las funciones del HTML5 DataGrid funcionan en dispositivos táctiles sin necesidad de configuración.
Paginador adaptable
El paginador del DataGrid actúa de forma inteligente y adapta toda su interfaz de usuario de manera responsiva según las dimensiones. Su diseño optimizado proporciona la mejor interacción de usuario en diferentes dispositivos.
Otros frameworks compatibles
El DataGrid está disponible para los frameworks Blazor, React, Angular y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El HTML5 DataGrid funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No está seguro de cómo crear su primer JavaScript DataGrid? Nuestra documentación puede ayudar.
Me encantaría leerlo ahoraMás de 145+ controles de interfaz de usuario de JavaScript
TODOS LOS CONTROLES
COMPONENTES INTELIGENTES
CUADRÍCULAS
MENÚS DESPLEGABLES
ENTRADAS DE DATOS
VISUALIZACIÓN DE DATOS
NAVEGACIÓN
BOTONES
CHAT INTERACTIVO
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
W¿Por qué elegir Syncfusion JavaScript DataGrid?
El Syncfusion JavaScript DataGrid admite las siguientes funciones:
Carga millones de registros en solo un segundo.
- Diseño enfocado en dispositivos móviles que se adapta a cualquier resolución.
Flexible vinculación de datos con soporte para usar fuentes de datos locales y remotas como JSON, servicios RESTful, servicios OData y servicios WCF.
Flexible edición y modos intuitivos de selección de registros.
Opciones integradas de filtrado tipo Excel y agrupación.
Innumerables personalizaciones de columnas y resúmenes de datos.
Opciones de exportación de datos sin interrupciones como PDF, CSV y Excel.
- Uno de los mejores JavaScript DataGrid del mercado que ofrece una interfaz rica en funciones para interactuar con el software.
Configuración simple y API.
- Compatible con todos los navegadores modernos.
Recursos de aprendizaje extensos como demos y documentación para aprender rápidamente y comenzar con JavaScript DataGrid.
¿Cuál es el precio del Syncfusion JavaScript DataGrid?
No vendemos el JavaScript DataGrid por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion. Esta incluye más de 1,600 componentes y frameworks, incluido el JavaScript DataGrid. El precio de la licencia de equipo comienza en 395 USD por mes para 5 desarrolladores e incluye soporte y actualizaciones hasta que expire la suscripción. Además, podríamos ofrecer descuentos según las promociones activas actualmente. Por favor, contacte hoy mismo con nuestros especialistas de producto para ver si califica para algún descuento adicional.
¿Dónde puedo encontrar la demo del Syncfusion JavaScript DataGrid?
Puede encontrar nuestra demostración de JavaScript DataGrid, que muestra cómo renderizar y configurar el DataGrid.
¿Puedo comprar el componente Syncfusion JavaScript DataGrid por separado?
No, nuestros 1,600+ componentes y frameworks para web, móvil y escritorio, incluido nuestro JavaScript DataGrid, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos fijado un precio competitivo para el producto, por lo que cuesta solo un poco más que lo que algunos otros proveedores cobran solo por su control DataGrid. También hemos observado que, según nuestra experiencia, nuestros clientes suelen comenzar utilizando uno de nuestros productos y luego se expanden rápidamente a varios productos, por lo que consideramos que lo mejor era ofrecer todos los 1,600+ componentes y frameworks por una tarifa de suscripción que comienza en 395 USD por mes para un equipo de 5 desarrolladores. Además, podríamos ofrecer descuentos según las promociones activas actualmente. Por favor, contacte hoy mismo con nuestros especialistas de producto para ver si califica para algún descuento adicional.
¿Puedo descargar y utilizar el Syncfusion JavaScript DataGrid de forma gratuita?
No, este es un producto comercial y requiere una licencia de pago. Sin embargo, también está disponible una licencia comunitaria gratuita para empresas e individuos cuyas organizaciones tengan menos de 1 millón de USD en ingresos brutos anuales y cinco o menos desarrolladores.
¿Cómo empiezo con el Syncfusion JavaScript DataGrid?
Un buen lugar para comenzar es nuestra completa documentación de inicio.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
The best tool to operate grid-like data out there
Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.
Ivan G,
Business Application Developer
Superior components:any day anytime
Essential Studio is one of a kind. The fact that they give us the community developer license has always shown how much they value the small teams creating their own startups. Essential Studio has helped a lot in my almost ready business intelligence platform for the healthcare industry. The grid and the kanban components are what made us fall in love with all the other components.
Kelvin M.
Software Development Engineer
Ver historias de éxito reales
Desarrolladores de todo el mundo confían en Essential Studio de Syncfusion para simplificar proyectos complejos y acelerar la entrega. Con una amplia biblioteca de controles de interfaz de usuario, potentes SDK y soporte confiable, Essential Studio ayuda a los equipos a crear aplicaciones de nivel empresarial con confianza.
Explorar estudios de casoIndustria
Desarrollo de software
75% Reducción de costos
50% Desarrollo más rápido
Industria
Servicios públicos (petróleo y gas)
450+ horas ahorradas
Procesos optimizados y horas de esfuerzo de desarrollo ahorradas.
Funciones avanzadas y flexibles
Usuarios potenciados mediante una funcionalidad sólida y versátil.
Industria
Software y tecnología
1000+ horas ahorradas
Desarrollo acelerado con componentes de interfaz de usuario listos para empresa.
Gestión eficiente de archivos
Flujos de trabajo optimizados con bibliotecas de documentos sin crearlas desde cero.
Industria
Software y tecnología
2 años de retraso evitado
Se evitaron dos años de retrasos gracias a la planificación proactiva.
Entrega punctual
Proyectos entregados a tiempo utilizando controles de confianza.
Industria
Servicios de TI y consultoría de TI
Rendimiento Mejorado
Grandes conjuntos de datos gestionados con fácil personalización y depuración rápida.
Altamente personalizable
Controles plug-and-play con integración rápida de plantillas.
Industria
Servicios profesionales
Acceso instantáneo
Disponibilidad rápida de funciones y recursos.
Dependencias reducidas
Menos dependencias para un desarrollo más rápido.
Calificado por usuarios de todo el mundo
Recursos de Syncfusion JavaScript DataGrid
Kits de interfaz de usuario
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
Actividades recientes en los blogs de JavaScript DataGrid
Las publicaciones del blog sobre JavaScript Data Grid te guiarán en la creación de tu primera aplicación con controles de JavaScript. Proporcionan estrategias para resolver problemas, describen características y funcionalidades, anuncian nuevos lanzamientos de funciones, explican buenas prácticas y muestran escenarios de ejemplo. Explora nuestras publicaciones más recientes en nuestros canales de blog para obtener actualizaciones sobre JavaScript Data Grid.
