[!Note] Please note that this control has been deprecated and replaced with the Grid, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Descripción general de Web Components Data Grid

    La tabla de datos Ignite UI for Web Components / cuadrícula de datos es un componente de cuadrícula de Web Components tabular que le permite vincular y mostrar rápidamente sus datos con poca codificación o configuración. Las características de la cuadrícula de datos de Web Components incluyen filtrado, clasificación, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas móviles. Las tablas de Web Components están optimizadas para datos de transmisión en vivo, con la capacidad de manejar un tamaño ilimitado del conjunto de datos en número de filas o columnas.

    Web Components Data Grid Example

    Esta demostración implementa algunas de las funciones que están disponibles en la cuadrícula: filtrado, agrupación, fijar/desanclar columnas, reposicionar columnas, ordenar y resúmenes.

    Empezando

    Dependencies

    Al instalar el paquete Web Components grid, también se debe instalar el paquete principal.

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-grids
npm install --save igniteui-webcomponents-inputs

    Component Modules

    Requiere IgcDataGridComponent los siguientes módulos:

    import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';

ModuleManager.register(
    IgcDataGridModule
);

    Optional Modules

    Las características opcionales IgcDataGridComponent, que se ven arriba, requieren los siguientes módulos:

    import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids';
import { IgcGridColumnOptionsComponent } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-data-grids';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcGridColumnOptionsModule,
    IgcDataGridToolbarModule,
    IgcSparklineModule
);

    Sample Data Source

    Ahora que se ha importado el módulo de cuadrícula de datos Web Components, a continuación se muestra la configuración básica de la cuadrícula de Web Components que se vincula a los datos locales.

        this.data = [{
        Discontinued: false,
        OrderDate: new Date("2012-02-12"),
        ProductID: 1,
        ProductName: "Chai",
        QuantityPerUnit: "10 boxes x 20 bags",
        ReorderLevel: 10,
        UnitPrice: 18.0000,
        UnitsInStock: 39
    }, {
        Discontinued: false,
        OrderDate: new Date("2003-03-17"),
        ProductID: 2,
        ProductName: "Chang",
        QuantityPerUnit: "24 - 12 oz bottles",
        ReorderLevel: 25,
        UnitPrice: 19.0000,
        UnitsInStock: 17
    }, {
        Discontinued: false,
        OrderDate: new Date("2006-03-17"),
        ProductID: 3,
        ProductName: "Aniseed Syrup",
        QuantityPerUnit: "12 - 550 ml bottles",
        ReorderLevel: 25,
        UnitPrice: 10.0000,
        UnitsInStock: 13
    }, {
        Discontinued: false,
        OrderDate: new Date("2016-03-17"),
        ProductID: 4,
        ProductName: "Chef Antony Cajun Seasoning",
        QuantityPerUnit: "48 - 6 oz jars",
        ReorderLevel: 0,
        UnitPrice: 22.0000,
        UnitsInStock: 53
    }, {
        Discontinued: true,
        OrderDate: new Date("2011-11-11"),
        ProductID: 5,
        ProductName: "Chef Antony Gumbo Mix",
        QuantityPerUnit: "36 boxes",
        ReorderLevel: 0,
        UnitPrice: 21.3500,
        UnitsInStock: 0
    }];

    Auto-Generate Columns

    En el código siguiente se muestra cómo enlazar la cuadrícula de datos Web Components a los datos locales anteriores.

    <igc-data-grid id="grid"
      height="100%"
      width="100%"
      auto-generate-columns="true"
      default-column-min-width="100"
      summary-scope="Root"
      is-column-options-enabled="true"
      is-group-collapsable="true"
      group-summary-display-mode="RowBottom"
      column-moving-mode="Deferred"
      column-moving-animation-mode="SlideOver"
      column-moving-separator-width="2"
      column-showing-animation-mode="slideFromRightAndFadeIn"
      column-hiding-animation-mode="slideToRightAndFadeOut"
      selection-mode="SingleRow"
      corner-radius-top-left="0"
      corner-radius-top-right="0">
</igc-data-grid>

    let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;

    Manually Define Columns

    <igc-data-grid id="grid"
    width="100%"
    height="500px"
    auto-generate-columns="false">
        <igc-numeric-column field="ProductID" header-text="Product ID"></igc-numeric-column>
        <igc-text-column field="ProductName" header-text="Product Name"></igc-text-column>
        <igc-text-column field="QuantityPerUnit" header-text="Quantity Per Unit"></igc-text-column>
        <igc-numeric-column field="UnitsInStock" header-text="Units In Stock"></igc-numeric-column>
        <igc-date-time-column field="OrderDate" header-text="Order Date"></igc-date-time-column>
</igc-data-grid>

    let grid1 = (document.getElementById("grid") as IgcDataGridComponent);
grid1.dataSource = data;

    Styling Columns

    El siguiente código demuestra cómo aplicar estilo a columnas específicas utilizando las propiedades de la columna proporcionada.

    <igc-text-column
    background="SkyBlue"
    text-style="Italic Bold 16pt Times New Roman"
></igc-text-column>

    Additional Resources

    API References