La parrilla de Web Components más rápida

Ignite UI for Web Components proporciona una biblioteca completa de componentes de interfaz de usuario Web Components nativos y basados en Material, incluida la cuadrícula de datos de Web Components virtualizada más rápida del mundo.

Web Components Grid Example

En este ejemplo de cuadrícula Web Components, puede ver cómo los usuarios pueden personalizar su vista de datos aprovechando las diversas funciones integradas en la cuadrícula, como la búsqueda y el filtrado de datos, la clasificación de columnas, el cambio de tamaño, el anclaje y la ocultación, la selección de filas, la exportación a Excel y csv, el desplazamiento horizontal y vertical. Hemos proporcionado ejemplos de plantillas de celdas que incluyen componentes como el indicador de barra de progreso lineal y el minigráfico. Vea más características aquí.

import 'igniteui-webcomponents-grids/grids/combined';
import { IgcGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import NwindData from './NwindData.json';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";



export class Sample {

    private grid: IgcGridComponent
    private column1: IgcColumnComponent
    private _bind: () => void;

    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
        var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;

        this._bind = () => {
            grid.data = this.nwindData;
            column1.bodyTemplate = this.webGridBooleanCellTemplate;
        }
        this._bind();
    }

    private _nwindData: any[] = NwindData;
    public get nwindData(): any[] {
        return this._nwindData;
    }

        public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
            if (ctx.cell.value) {
                return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
            } else {
                return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
            }
    }

}

new Sample();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample ig-typography">

    <div class="container fill">
        <igc-grid
        auto-generate="false"
        id="grid"
        name="grid"
        id="grid"
        primary-key="ProductID"
        allow-filtering="true"
        filter-mode="excelStyleFilter">
            <igc-paginator
            per-page="10">
            </igc-paginator>
            <igc-column
            field="ProductName"
            header="Product Name"
            data-type="string"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="UnitPrice"
            header="Unit Price"
            data-type="number"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="UnitsInStock"
            header="Units in Stock"
            data-type="number"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="OrderDate"
            header="Order Date"
            data-type="date"
            sortable="true"
            has-summary="true"
            editable="true"
            resizable="true">
            </igc-column>
            <igc-column
            field="Discontinued"
            header="Discontinued"
            data-type="boolean"
            sortable="true"
            has-summary="true"
            editable="true"
            name="column1"
            id="column1">
            </igc-column>
            <igc-column
            field="ReorderLevel"
            header="Reorder Level"
            data-type="number"
            sortable="true"
            has-summary="true"
            editable="true"
            filterable="true">
            </igc-column>
        </igc-grid>
    </div>
</div>

    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

    #grid {
        --ig-size: var(--ig-size-medium);
    }

css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

What is a Web Components Grid?

La cuadrícula de datos Web Components es un componente que se utiliza para mostrar datos tabulares en una serie de filas y columnas. Las cuadrículas de datos, también conocidas como tablas, son bien conocidas en el mundo de escritorio con software popular como Microsoft Excel. Si bien las cuadrículas han estado disponibles en plataformas de escritorio durante mucho tiempo, recientemente se han convertido en parte de las interfaces de usuario de aplicaciones web, como Web Components UI. Las cuadrículas modernas pueden ser complejas y pueden incluir una serie de funcionalidades, como el enlace de datos, la edición, el filtrado similar a Excel, la clasificación personalizada, la agrupación, el reordenamiento de filas, la inmovilización de filas y columnas, la agregación de filas y la exportación a formatos de Excel, CSV y pdf.

Why Use a Web Components Grid?

Web Components las cuadrículas de datos son esenciales en casos de uso en los que se deben almacenar y clasificar muchos datos rápidamente. Esto puede incluir industrias como la financiera o la de seguros que utilizan datos de gran volumen y alta velocidad con frecuencia. A menudo, el éxito de estas empresas depende de la funcionalidad y el rendimiento de estas redes de datos. Cuando las decisiones sobre acciones deben tomarse en microsegundos, por ejemplo, es imperativo que la cuadrícula de datos funcione sin retrasos ni parpadeos.

Key Features

El Ignite UI for Web Components Data Grid no es solo para datos de gran volumen y en tiempo real. Es una cuadrícula de Web Components rica en funciones que le brinda capacidades que nunca podría lograr con tan poco código por su cuenta.

Estas son algunas de las características clave de la cuadrícula de datos:

[**Filas y columnas virtualizadas**](grid/virtualization.md) para que puedas cargar millones de registros
[**Edición en línea**](grid/editing.md) con [**Celda**](grid/cell-editing.md) y [**Fila**](grid/row-editing.md) Opciones de actualización
[**Filtrado estilo Excel**](grid/excel-style-filtering.md) y capacidad completa de [**Navegación con teclado Excel**](grid/keyboard-navigation.md)
Interactivo [**Agrupación estilo Outlook**](grid/groupby.md)
[**Resúmenes de columnas**](grid/summaries.md) basado en cualquier dato en una celda o columna de la cuadrícula
[**Tamaño**] (grid/size.md) para ajustar la altura y el tamaño de las filas

Data Virtualization and Performance

Desplácese sin problemas por filas y columnas ilimitadas en su cuadrícula de Web Components, con la virtualización de nivel de columna y fila de la cuadrícula de datos. Gracias a la compatibilidad con fuentes de datos locales o remotas, obtiene el mejor rendimiento independientemente de dónde residan sus datos. Sus usuarios experimentarán un desplazamiento similar al de Excel, con una velocidad empresarial (sin retrasos, parpadeos en la pantalla ni retrasos visuales), lo que le brindará la mejor experiencia de usuario (UX) sin comprometer el rendimiento.

Rápido y fácil de personalizar, construir e implementar

La cuadrícula de datos de Ignite UI Web Components puede manejar filas y columnas de datos ilimitadas, al tiempo que proporciona acceso a plantillas personalizadas y actualizaciones de datos en tiempo real. Con una API intuitiva para facilitar la creación de temas y la marca, puede vincular rápidamente a los datos con un código mínimo.

ver muestras

Web Components Grid Paging, Sorting, Filtering, & Searching

Animación de las capacidades de filtrado dentro de Web Components cuadrícula de datos

Permita que los usuarios naveguen por su conjunto de datos con nuestro [buscapersonas] predeterminado (grid/paging.md) o cree su propia plantilla para brindar su propia experiencia de paginación. Con soporte completo para clasificación de una o varias columnas, [búsqueda] de texto completo (grid/search.md) en la cuadrícula y varias opciones de [filtrado avanzado](grid/advanced-filtering.md), incluidas las basadas en tipos de datos. [Filtrado estilo Microsoft Excel] (grid/excel-style-filtering.md).

Inline Web Components Grid Editing

Le proporcionamos [plantillas de celda para columnas editables] predeterminadas (data-grid.md#cell-editing-template) que se basan en el tipo de datos de la columna. Puede definir sus propias plantillas personalizadas para columnas editables y anular el comportamiento predeterminado para confirmar y descartar cambios en el valor de la celda.

Animación de la funcionalidad de navegación del teclado dentro de Web Components cuadrícula de datos

Garantice el cumplimiento de la accesibilidad y mejore la usabilidad, habilitando la [navegación con teclado] similar a Excel (grid/keyboard-navigation.md) en la cuadrícula de datos de Web Components, utilizando las teclas arriba, abajo, derecha, izquierda, tabulación y Entrar. Puede alternar la selección de una o varias filas en la cuadrícula de Web Components con el mouse o el teclado para seleccionar o anular la selección de filas completas, o usar la casilla de verificación integrada seleccionar todo / anular selección de todo en la barra de herramientas de la cuadrícula para trabajar con la selección de filas. Obtenga información sobre las mejoras más recientes de esta función.

Web Components Grid Accessibility & ARIA Support

Representación de iconos para la compatibilidad con ARIA en el componente de cuadrícula de datos de Angular

Cada uno de nuestros componentes Web Components en Ignite UI for Web Components se ha implementado de acuerdo con las últimas pautas y especificaciones de accesibilidad. Nuestros componentes Web Components han sido probados utilizando el sistema operativo o la tecnología de accesibilidad proporcionada por el navegador: lectores de pantalla. Nuestro equipo se asegura no solo de que se implementen las directrices, sino también de que el contenido real entregado a las personas ciegas o con discapacidad visual sea realmente consumible y fácil de usar para ellas. La cuadrícula de datos de Ignite UI for Web Components es totalmente accesible con accesibilidad de teclado a11y, ARIA y paleta de colores accesible. Más información.

Column Grouping, Pinning, Summaries

Cuadrícula de datos con funciones de agrupación de columnas, anclaje y resumen habilitadas para Web Components componente Cuadrícula de datos

Agrupe columnas o grupos de columnas preestablecidos mediante la interacción del mouse, el tacto o nuestra API, con soporte para [resúmenes] de columnas integrados (grid/summaries.md) o plantillas de resumen personalizadas. Permita a los usuarios [ocultar](grid/column-hiding.md) o [mover columnas](grid/column-moving.md) de forma interactiva, con soporte completo para [fijar columnas](grid/column-pinning.md) interactivo, durante las operaciones de mover, arrastrar y reordenar.

Encabezados de varias columnas

Habilite [encabezados de varias columnas] (grid/multi-column-headers.md), lo que le permitirá agrupar columnas bajo un encabezado común. Cada grupo de columnas podría ser una representación de combinaciones entre otros grupos o columnas, con soporte completo para fijar columnas, mover columnas interactivas dentro de grupos, ordenar y ocultar grupos.

Web Components Grid Features

[Inline Editing](grid/editing.md)
[Filtrado de filas y columnas](grid/filtering.md)
[Grid Sorting](grid/sorting.md)
[Agrupación de columnas](grid/groupby.md)
[Column Summaries](grid/summaries.md)
[Columnas fijas/fijadas](grid/column-pinning.md)

[Columna en movimiento](grid/column-moving.md)
[Estilo de celda](grid/condicional-cell-styling.md)
[Paginación de cuadrícula](grid/paging.md)
[Selección de fila](grid/selection.md)
[Selección de celda](grid/cell-selection.md)

[Búsqueda a nivel de cuadrícula](grid/search.md)
[Multi-Column Headers](grid/multi-column-headers.md)
[Virtualization and Performance](grid/virtualization.md)
[Columnas redimensionables](grid/column-resizing.md)
[Column Hiding](grid/column-hiding.md)

¡Descargue la cuadrícula de Web Components más rápida hoy!

Descargar ahora
Prueba gratuita de 30 días. No se requiere tarjeta de crédito.

Ignite UI for Web Components Supported Browsers

La cuadrícula de datos Web Components es compatible con todos los navegadores web modernos, incluidos:

Cromo
Borde / Borde Cromo
Firefox
Safari
Internet Explorer 11 con polirellenos

Ignite UI for Web Components Support Options

Hay múltiples opciones para obtener acceso a nuestro galardonado soporte en Infragistics para el producto Web Components.

Comience en la página de inicio de Soporte de Web Components
Lea el Web Components [Documentación](.. /general-getting-started.md) y experimente con muestras Web Components
Lee los blogs de Web Components para estar al día
Enviar un caso de soporte
Aprenda de las aplicaciones de referencia Web Components

Ignite UI for Web Components Trial License and Commercial

Ignite UI for Web Components es un producto con licencia comercial disponible a través de un modelo de suscripción. Puede probar el producto Ignite UI for Web Components de forma gratuita cuando se registra para una prueba de 30 días. Cuando haya terminado con su período de prueba, puede comprar una licencia en nuestro sitio web o llamando al departamento de ventas de su región.

Frequently Asked Questions

¿Por qué debería elegir el Infragistics Ignite UI for Web Components Data Grid?

[Filas y columnas virtualizadas](grid/virtualization.md) para que puedas cargar millones de registros
[Filtrado estilo Excel](grid/excel-style-filtering.md) y capacidad completa de [Navegación por teclado Excel](grid/keyboard-navigation.md)
Interactivo [Agrupación estilo Outlook](grid/groupby.md)
[Resúmenes de columnas](grid/summaries.md) basado en cualquier dato en una celda o columna de la cuadrícula
[Tamaño] (grid/size.md) para ajustar la altura y el tamaño de las filas

¿Cuál es el precio de Infragistics Ignite UI for Web Components Data Grid?

Nuestros componentes Web Components están incluidos como parte de nuestro paquete de Ignite UI. Una sola licencia de desarrollador comienza en $ 1,295 USD por una suscripción de un año, que incluye un año de soporte y actualizaciones estándar. También ofrecemos descuentos para licencias de varios años. Consulte nuestra página de precios para obtener más información sobre los precios.

Si está desarrollando aplicaciones en varias plataformas, considere nuestro paquete completo de desarrollo de aplicaciones, Infragistics Ultimate, que incluye plataformas de escritorio como WPF y Windows Forms, además de todos los conjuntos de herramientas web modernos para Web Components, Web Components, ASP.NET MVC y ASP.NET Core.

¿Puedo comprar el control Infragistics Ignite UI for Web Components Data Grid por separado?

No, no puede comprar el Web Components Data Grid por separado. Es parte de un producto de Ignite UI for Web Components, que incluye docenas de controles y componentes de interfaz de usuario, además de más de 60 gráficos, incluido Web Components Financial Charting. Si está interesado en otras plataformas web modernas como Angular, ASP.NET MVC, Web Components o ASP.NET Blazor, consulte nuestro paquete de productos Ignite UI, que le brinda todas las plataformas web por solo $ 100 más en su suscripción. Es decir, cientos de controles, componentes y visualizaciones de datos por un precio muy bajo.

¿Cómo instalo Web Components y el control de cuadrícula de datos Infragistics Ignite UI for Web Components?

Para comenzar a usar la cuadrícula de datos de Web Components, siga los pasos de la [guía de introducción](.. /general-getting-started.md). También mantenemos una biblioteca de aplicaciones de muestra, que están diseñadas no solo para inspirar, sino también para ser guías de mejores prácticas para el desarrollo Web Components.