Tenga en cuenta que este control ha quedado obsoleto y reemplazado por Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.

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.

Ejemplo de cuadrícula de datos de Web Components

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.

EXAMPLE

DATA

TS

HTML

CSS

export class DataGridSharedData {

    public static getEmployees(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const employees: any[] = [];
        let maleCount: number = 0;
        let femaleCount: number = 0;
        for (let i = 0; i < count; i++) {
            const age: number = Math.round(this.getRandomNumber(20, 40));
            const gender: string = this.getRandomGender();
            const firstName: string = this.getRandomNameFirst(gender);
            const lastName: string = this.getRandomNameLast();
            const street: string = this.getRandomStreet();
            const country: string = this.getRandomItem(this.countries);
            const city: string = this.getRandomCity(country);
            const generation = Math.floor(age / 10) * 10 + "s";
            const email: string = firstName.toLowerCase() + "@" + this.getRandomItem(this.emails);
            const website: string = firstName.toLowerCase() + "-" + this.getRandomItem(this.websites);
            let photoPath: any;

            if (gender === "male") {
                maleCount++;
                if (maleCount > 26) {
                    maleCount = 1;
                }
                photoPath = this.getPhotoMale(maleCount);
            }
            else {
                femaleCount++;
                if (femaleCount > 24) {
                    femaleCount = 1;
                }
                photoPath = this.getPhotoFemale(femaleCount);
            }

            let person: any = {};
            person.Address = street + "," + city;
            person.Age = age;
            person.Birthday = this.getBirthday(age);
            person.City = city;
            person.Country = country;
            person.CountryFlag = this.getCountryFlag(country);
            person.Email = email;
            person.FirstName = firstName;
            person.Gender = this.getGenderPhoto(gender);
            person.Generation = generation;
            person.ID = this.pad(i + 1, 5);
            person.LastName = lastName;
            person.Name = firstName + " " + lastName;
            person.Phone = this.getRandomPhone();
            person.Photo = photoPath;
            person.Street = street;
            person.Salary = this.getRandomNumber(40, 200) * 1000;
            person.Sales = this.getRandomNumber(200, 980) * 1000;
            person.Website = website;
            person.Productivity = this.getProductivity();

            if (person.Salary < 50000) {
                person.Income = "Low";
            } else if (person.Salary < 100000) {
                person.Income = "Average";
            } else {
                person.Income = "High";
            }

            employees.push(person);
        }
        return employees;
    }

    public static getProductivity(weekCount?: number): any[] {
        if (weekCount === undefined) {
            weekCount = 52;
        }
        const productivity: any[] = [];
        for (let w = 0; w < weekCount; w++) {
            const value = this.getRandomNumber(-50, 50);
            productivity.push({Value: value, Week: w});
        }
        return productivity;
    }

    public static getSales(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const names: string[] = [
            "Intel CPU", "AMD CPU",
            "Intel Motherboard", "AMD Motherboard", "NVIDIA Motherboard",
            "NVIDIA GPU", "GIGABYTE GPU", "Asus GPU", "AMD GPU", "MSI GPU",
            "Corsair Memory", "Patriot Memory", "Skill Memory",
            "Samsung HDD", "WD HDD", "Seagate HDD", "Intel HDD",
            "Samsung SSD", "WD SSD", "Seagate SSD", "Intel SSD",
            "Samsung Monitor", "Asus Monitor", "LG Monitor", "HP Monitor" ];
        const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", "Japan", "Germany"];
        const status: string[] = ["Packing", "Shipped", "Delivered"];
        const sales: any[] = [];

        for (let i = 0; i < count; i++) {
            const price = this.getRandomNumber(100, 900);
            const items = this.getRandomNumber(10, 80);
            const value = price * items;
            const margin = this.getRandomNumber(3, 10);
            const profit = Math.round((price * margin / 100) * items);
            const country = this.getRandomItem(countries);
            sales.push({
                BundlePrice: price,
                ProductPrice: price,
                Margin: margin,
                OrderDate: this.getRandomDate(new Date(2012, 0, 1), new Date()),
                OrderItems: items,
                OrderValue: value, //  Math.round(value / 1000) + "," + Math.round(value % 1000),
                ProductID: 1001 + i,
                ProductName: this.getRandomItem(names),
                Profit: profit,
                Countries: country,
                CountryFlag: this.getCountryFlag(country),
                Status: this.getRandomItem(status)
            });
        }
        return sales;
    }

    public static getHouses(count?: number): any[] {
        if (count === undefined) {
            count = 250;
        }

        const houses: any[] = [];
        const property: string[] = [ "Townhouse", "Single", "Condo", "Villa"];
        const emails: string[] = [ "estates.com", "remax.com", "zillow.com", "realtor.com", "coldwell.com"];
        const countries: string[] = ["USA", "UK", "France", "Canada", "Poland", "Japan", "Germany"];

        for (let i = 0; i < count; i++) {
            const year: number = this.getRandomNumber(1950, 2015);
            const age: number = 2020 - year;

            const gender: string = this.getRandomGender();
            const firstName: string = this.getRandomNameFirst(gender);
            const lastName: string = this.getRandomNameLast();
            const initials = firstName.substr(0, 1).toLowerCase();
            const email: string = initials + lastName.toLowerCase() + "@" + this.getRandomItem(emails);

            const street: string = this.getRandomStreet();
            const country: string = this.getRandomItem(countries);
            const city: string = this.getRandomCity(country);

            houses.push({
                Address: street + "," + city,
                Age: age,
                Agent: firstName + " " + lastName,
                Area: this.getRandomNumber(50, 300),
                Baths: this.getRandomNumber(1, 3),
                Built: year,
                City: city,
                Country: country,
                CountryFlag: this.getCountryFlag(country),
                Email: email,
                ID: this.pad(i + 1, 5),
                Phone: this.getRandomPhone(),
                Price: this.getRandomNumber(210, 900) * 1000,
                Property: this.getRandomItem(property),
                Rooms: this.getRandomNumber(2, 5),
                SaleDate: this.getRandomDate(new Date(2015, 0, 1), new Date()),
                Street: street,
            });
        }
        return houses;
    }

    private static websites: string[] = [ ".com", ".gov", ".edu", ".org"];
    private static emails: string[] = [ "gmail.com", "yahoo.com", "twitter.com"];
    private static genders: string[] = ["male", "female"];
    private static maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Mike", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"];
    private static femaleNames: string[] = ["Gina", "Irene", "Katie", "Brenda", "Casey", "Fiona", "Holly", "Kate", "Liz", "Pamela", "Nelly", "Marisa", "Monica", "Anna", "Jessica", "Sofia", "Isabella", "Margo", "Jane", "Audrey", "Sally", "Melanie", "Greta", "Aurora", "Sally"];
    private static lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "MOrgan", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Berry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adams", "Power", "Tesla"];
    private static countries: string[] = ["USA", "UK", "France", "Canada", "Poland"];
    private static citiesUS: string[] = ["New York", "Los Angeles", "Miami", "San Francisco", "San Diego", "Las Vegas"];
    private static citiesUK: string[] = ["London", "Liverpool", "Manchester"];
    private static citiesFR: string[] = ["Paris", "Marseille", "Lyon"];
    private static citiesCA: string[] = ["Toronto", "Vancouver", "Montreal"];
    private static citiesPL: string[] = ["Krakow", "Warsaw", "Wroclaw", "Gdansk"];
    private static citiesJP: string[] = ["Tokyo", "Osaka", "Kyoto", "Yokohama"];
    private static citiesGR: string[] = ["Berlin", "Bonn", "Cologne", "Munich", "Hamburg"];
    private static roadSuffixes: string[] = ["Road", "Street", "Way"];
    private static roadNames: string[] = ["Main", "Garden", "Broad", "Oak", "Cedar", "Park", "Pine", "Elm", "Market", "Hill"];

    private static getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }

    private static getRandomItem(array: any[]): any {
        const index = Math.round(this.getRandomNumber(0, array.length - 1));
        return array[index];
    }

    private static getRandomDate(start: Date, end: Date) {
        return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
    }

    private static getRandomPhone(): string {
        const phoneCode = this.getRandomNumber(100, 900);
        const phoneNum1 = this.getRandomNumber(100, 900);
        const phoneNum2 = this.getRandomNumber(1000, 9000);
        const phone = phoneCode + "-" + phoneNum1 + "-" + phoneNum2;
        return phone;
    }

    private static getRandomGender(): string {
        return this.getRandomItem(this.genders);
    }

    private static getRandomNameLast(): string {
        return this.getRandomItem(this.lastNames);
    }

    private static getRandomNameFirst(gender: string): string {
        if (gender === "male") {
            return this.getRandomItem(this.maleNames);
        }
        else {
            return this.getRandomItem(this.femaleNames);
        }
    }

    private static getRandomCity(country: string): string {
        if (country === "Canada") {
            return this.getRandomItem(this.citiesCA);
        } else if (country === "France") {
            return this.getRandomItem(this.citiesFR);
        } else if (country === "Poland") {
            return this.getRandomItem(this.citiesPL);
        } else if (country === "USA") {
            return this.getRandomItem(this.citiesUS);
        } else if (country === "Japan") {
            return this.getRandomItem(this.citiesJP);
        } else if (country === "Germany") {
            return this.getRandomItem(this.citiesGR);
        } else { // if (country === "United Kingdom") {
            return this.getRandomItem(this.citiesUK);
        }
    }

    private static getRandomStreet(): string {
        const num = Math.round(this.getRandomNumber(100, 300)).toString();
        const road = this.getRandomItem(this.roadNames);
        const suffix = this.getRandomItem(this.roadSuffixes);
        return num + " " + road + " " + suffix;
    }

    private static getBirthday(age: number): Date {
        const today: Date = new Date();
        const year: number = today.getFullYear() - age;
        const month: number = this.getRandomNumber(0, 8);
        const day: number = this.getRandomNumber(10, 27);
        return new Date(year, month, day);
    }

    private static getPhotoMale(id: number): string {
        return 'https://static.infragistics.com/xplatform/images/people//GUY' + this.pad(id, 2) + '.png';
    }

    private static getPhotoFemale(id: number): string {
        return 'https://static.infragistics.com/xplatform/images/people/GIRL' + this.pad(id, 2) + '.png';
    }

    private static getGenderPhoto(gender: string): string {
        return 'https://static.infragistics.com/xplatform/images/genders/' + gender + '.png';
    }

    private static getCountryFlag(country: string): string {
        return 'https://static.infragistics.com/xplatform/images/flags/' + country + '.png';
    }

    private static pad(num: number, size: number) {
        let s = num + "";
        while (s.length < size) {
            s = "0" + s;
        }
        return s;
    }

}
tsコピー

import { DataGridSharedData } from './DataGridSharedData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbarModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridToolbarComponent } from 'igniteui-webcomponents-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids';
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellInfo } from 'igniteui-webcomponents-grids';
import { IgcTemplateCellUpdatingEventArgs } from 'igniteui-webcomponents-grids';
import { IgcImageColumnComponent } from 'igniteui-webcomponents-grids';
import { IgcColumnGroupDescription } from 'igniteui-webcomponents-grids';
import { IgcColumnSummaryDescription } from 'igniteui-webcomponents-grids'
import { DataSourceSummaryOperand } from 'igniteui-webcomponents-core';
import { IgcSparklineModule } from 'igniteui-webcomponents-charts';
import { IgcSparklineComponent } from 'igniteui-webcomponents-charts';
import { SparklineDisplayType } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcDataGridModule,
    IgcDataGridToolbarModule,
    IgcGridColumnOptionsModule,
    IgcSparklineModule
);

export class DataGridOverview {

    private grid: IgcDataGridComponent;
    public toolbar: IgcDataGridToolbarComponent;

    constructor() {

        this.onUpdatingAddressColumn = this.onUpdatingAddressColumn.bind(this);
        this.onUpdatingSalesColumn = this.onUpdatingSalesColumn.bind(this);
        this.onUpdatingProductivityColumn = this.onUpdatingProductivityColumn.bind(this);

        const salesColumn = document.getElementById('salesColumn') as IgcTemplateColumnComponent;
        if (salesColumn)
            salesColumn.cellUpdating = this.onUpdatingSalesColumn;

        const addressColumn = document.getElementById('addressColumn') as IgcTemplateColumnComponent;
        if (addressColumn)
            addressColumn.cellUpdating = this.onUpdatingAddressColumn;

        const productivityColumn = document.getElementById('productivityColumn') as IgcTemplateColumnComponent;
        if (productivityColumn)
            productivityColumn.cellUpdating = this.onUpdatingProductivityColumn;

        this.grid = document.getElementById('grid') as IgcDataGridComponent;
        this.grid.dataSource = DataGridSharedData.getEmployees(100);

        this.toolbar = document.getElementById('toolbar') as IgcDataGridToolbarComponent;
        this.toolbar.targetGrid = this.grid;

        const peopleGroup = new IgcColumnGroupDescription();
        peopleGroup.field = 'Country';
        peopleGroup.displayName = 'Country';
        this.grid.groupDescriptions.add(peopleGroup);

        const incomeGroup = new IgcColumnGroupDescription();
        incomeGroup.field = 'Income';
        incomeGroup.displayName = 'Income';
        this.grid.groupDescriptions.add(incomeGroup);

        const peopleCount = new IgcColumnSummaryDescription();
        peopleCount.field = 'Photo';
        peopleCount.operand = DataSourceSummaryOperand.Count;
        this.grid.summaryDescriptions.add(peopleCount);

        const sales = new IgcColumnSummaryDescription();
        sales.field = 'Sales';
        sales.operand = DataSourceSummaryOperand.Max;
        sales.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
        this.grid.summaryDescriptions.add(sales);

        const salary = new IgcColumnSummaryDescription();
        salary.field = 'Salary';
        salary.operand = DataSourceSummaryOperand.Average;
        salary.formatOverride = new Intl.NumberFormat('en-EN', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0 });
        this.grid.summaryDescriptions.add(salary);
    }

    public onUpdatingAddressColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) {
        const content = e.content as HTMLDivElement;
        let span1: HTMLSpanElement | null = null;
        let span2: HTMLSpanElement | null = null;
        const info = e.cellInfo as IgcTemplateCellInfo;
        const item = info.rowItem;

        if (content.childElementCount === 0) {

            span1 = document.createElement('span');
            span2 = document.createElement('span');

            content.style.fontFamily = 'Verdana';
            content.style.fontSize = '13px';
            content.style.verticalAlign = 'center';
            content.style.lineHeight = 'normal';
            content.style.display = 'flex';
            content.style.flexDirection = 'column';
            content.style.justifyContent = 'center';
            // content.style.alignItems = 'center';
            content.style.height = '100%';
            content.style.width = '100%';

            content.appendChild(span1);
            content.appendChild(span2);
        }
        else {
            span1 = content.children[0] as HTMLSpanElement;
            span2 = content.children[1] as HTMLSpanElement;
        }

        if (span1 && span2) {
            span1.textContent = item.Street;
            span2.textContent = item.City + ', ' + item.Country;
        }
    }

    public onUpdatingSalesColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) {
        const content = e.content as HTMLDivElement;
        const info = e.cellInfo as IgcTemplateCellInfo;
        const sales = info.rowItem.Sales;
        let gaugeValue: HTMLSpanElement | null = null;
        let gaugeBar: HTMLDivElement | null = null;

        if (content.childElementCount === 0) {
            gaugeValue = document.createElement('span');
            gaugeValue.style.margin = '0px';
            gaugeValue.style.marginTop = '2px';
            gaugeValue.style.padding = '0px';
            gaugeValue.style.fontFamily = 'Verdana';
            gaugeValue.style.fontSize = '13px';
            gaugeValue.style.textAlign = 'center';

            gaugeBar = document.createElement('div');
            gaugeBar.style.background = '#7f7f7f';
            gaugeBar.style.padding = '0px';
            gaugeBar.style.margin = '0px';
            gaugeBar.style.height = '6px';
            gaugeBar.style.left = '0px';
            gaugeBar.style.top = '0px';
            gaugeBar.style.position = 'relative';

            const gauge = document.createElement('div');
            gauge.style.background = '#dddddd';
            gauge.style.padding = '0px';
            gauge.style.margin = '0px';
            gauge.style.height = '6px';
            gauge.style.marginTop = '8px';
            gauge.style.width = '100%';
            gauge.appendChild(gaugeBar);

            content.style.verticalAlign = 'center';
            content.style.lineHeight = 'normal';
            content.style.display = 'flex';
            content.style.flexDirection = 'column';
            content.style.justifyContent = 'center';
            content.style.height = '100%';
            content.style.width = 'calc(100% - 2rem)';
            content.style.marginRight = '1rem';
            content.style.marginLeft = '1rem';

            content.appendChild(gauge);
            content.appendChild(gaugeValue);
        } else {
            const gauge = content.children[0];
            gaugeBar = gauge.children[0] as HTMLDivElement;
            gaugeValue = content.children[1] as HTMLSpanElement;
        }

        // conditional formatting:
        if (sales < 400000) {
            gaugeValue.style.color = 'rgb(211, 17, 3)';
            gaugeBar.style.background = 'rgb(211, 17, 3)';
        }
        else if (sales < 650000) {
            gaugeValue.style.color = 'Orange';
            gaugeBar.style.background = 'Orange';
        }
        else {
            gaugeValue.style.color = 'rgb(21, 190, 6)';
            gaugeBar.style.background = 'rgb(21, 190, 6)';
        }
        let gaugeWidth = (sales / 990000) * 100;
        gaugeWidth = Math.min(100, gaugeWidth);
        gaugeBar.style.width = gaugeWidth + '%';

        gaugeValue.textContent = '$' + sales / 1000 + ',000';
    }

    public onUpdatingProductivityColumn(s: IgcTemplateColumnComponent, e: IgcTemplateCellUpdatingEventArgs) {
        const content = e.content as HTMLDivElement;
        let chart: IgcSparklineComponent | null = null;
        let info = e.cellInfo as IgcTemplateCellInfo;

        if (content.childElementCount === 0) {
            chart = new IgcSparklineComponent();
            chart.valueMemberPath = 'Value';
            chart.labelMemberPath = 'Week';
            chart.displayType = SparklineDisplayType.Column;
            chart.lineThickness = 2;
            chart.brush = 'rgb(21, 190, 6)';
            chart.negativeBrush = 'rgb(211, 17, 3)';
            chart.width = '100%';
            chart.height = '100%';

            content.style.width = '100%';
            content.style.height = 'calc(100% - 0.5rem)';
            content.style.margin = '0px';
            content.style.marginTop = '0.25rem';
            content.appendChild(chart);
        }
        else {
            chart = content.children[0] as IgcSparklineComponent;
        }

        if (chart) {
            chart.dataSource = info.rowItem.Productivity;
        }
    }
}

new DataGridOverview();
tsコピー

<!DOCTYPE html>
<html>
  <head>
    <title>DataGridOverview</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" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <igc-data-grid-toolbar
    id="toolbar"
    toolbar-title="Sales Team"
    column-chooser="true"
    column-pinning="true">
    </igc-data-grid-toolbar>

    <igc-data-grid
        id="grid"
        height="calc(100% - 2.75rem)"
        width="100%"
        row-height="50"
        auto-generate-columns="false"
        is-column-options-enabled="true"
        default-column-min-width="100"
        summary-scope="Root"
        is-group-collapsable="true"
        group-header-display-mode="Combined"
        group-summary-display-mode="RowTop"
        selection-mode="SingleRow"
        corner-radius-top-left="0"
        corner-radius-top-right="0">

        <igc-image-column field="Photo" header-text="Photo"
        content-opacity="1" horizontal-alignment="center" width="110"></igc-image-column>

        <igc-text-column field="Name" width="*>130"></igc-text-column>

        <igc-template-column id="salesColumn"
        field="Sales" header-text="Sales" horizontal-alignment="center"
        width="*>160" width="*>160"></igc-template-column>

        <igc-numeric-column field="Salary" positive-prefix="$"
        show-grouping-separator="true" width="*>160"></igc-numeric-column>

        <igc-template-column id="addressColumn"
        field="Address" header-text="Address" horizontal-alignment="left"
        width="*>160" ></igc-template-column>

        <igc-image-column field="CountryFlag" header-text="Country"
        content-opacity="1" horizontalAlignment="stretch" width="130"
        padding-top="7.5" padding-bottom="7.5" ></igc-image-column>

        <igc-date-time-column field="Birthday" header-text="Date of Birth"
        horizontal-alignment="right" width="*>160"></igc-date-time-column>

        <igc-text-column field="Income" width="*>120"horizontal-alignment="center"></igc-text-column>

        <igc-template-column id="productivityColumn"
        field="Productivity" header-text="Productivity"
        horizontal-alignment="stretch" width="*>150" ><igc-template-column>

        <igc-text-column field="Age" width="*>110"></igc-text-column>

    </igc-data-grid>
</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 */cssコピー

Edit in: Codesandbox

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Empezando

dependencias

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
cmd

Módulos de componentes

El IgcGridComponent requiere los siguientes módulos:

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

ModuleManager.register(
    IgcDataGridModule
);
ts

Módulos opcionales

Las características opcionales IgcGridComponent, vistas arriba, requieren los siguientes módulos:

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

ModuleManager.register(
    IgcGridColumnOptionsModule,
    IgcDataGridToolbarModule,
    IgcSparklineModule
);
ts

Fuente de datos de muestra

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
    }];
ts

Generar columnas automáticamente

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>
html

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

Definir columnas manualmente

<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>
html

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

Estilo de columnas

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>
html

Recursos adicionales

• Cumplimiento de Accesibilidad
• Activación celular
• Edición de cuadrícula
• Selección de celda
• Animación de columna
• Selector de columnas
• Filtrado de columnas
• Columna en movimiento
• Opciones de columna
• Cambio de tamaño de columna
• Clasificación de columnas
• Tipos de columna
• Actuación
• Fijación de filas
• Agrupación de filas
• Resaltado de filas

Referencias de API

• IgcGridComponent