Tipos de columnas React

    La Ignite UI for React admite cinco tipos de columnas, además de un tipo de columna de plantilla, lo que le brinda total flexibilidad sobre la forma en que se muestran sus datos en la cuadrícula de datos React. Los tipos de columnas admitidos son la columna de texto, la columna numérica, la columna de fecha y hora, la columna de imagen, el cuadro combinado y la plantilla.

    Each column binds to data by setting the field property to the name of the corresponding property on the items of your underlying data source bound to the React data grid.

    React Column Types Example

    Text Column

    La cuadrícula de datos React se utiliza para mostrar texto con formato en sus celdas asociadas. Este es el tipo de columna predeterminado que se utiliza para mostrar datos de tipo cadena.

    Numeric Column

    The IgrNumericColumn is used for displaying a formatted numeric value in its associated cells and enables control of decimal place placement within cells and displaying fractional digits.

    DateTime Column

    The IgrDateTimeColumn is used for displaying Date objects in its associated cells and enables control to format the Date objects how you see fit.

    Image Column

    The IgrImageColumn is used for displaying an image within a cell and exposes options for image stretch customization for cells by using its imageStretchOption option.

    You can also choose what type of resource your image is by setting the ImageResourceType option.

    ComboBox Column

    The IgrComboBoxColumn is used for displaying a drop-down list from which your end users can select a single item.

    Data binding can be achieved using an array of complex objects via the column's DataSource property.

    The textField property determines which value is shown when users make a selection.

    The valueField property determines the bound value of the underlying data item selected. This is necessary if your list of objects have several properties.

    Template Column

    The IgrTemplateColumn is used in conjunction with a cell template. It enables you to apply a custom template to the column's cell. This is done by handling the CellUpdating event of the template column.

    The CellUpdating event's arguments expose the IgrTemplateColumn that fires the event as well as a IgrTemplateCellUpdatingEventArgs parameter. This event arguments parameter exposes a Content property that returns the HTMLDivElement that will be placed within the associated cells of the column. You can then append new elements to this div.

    The IgrTemplateCellUpdatingEventArgs also exposes a CellInfo property that you can use to get a TemplateCellInfo object. This object exposes information about the cell and the row, such as the index, underlying data item, and appearance of the cell.

    Sparkline Column

    You can embed Sparkline components in IgrTemplateColumn to show more complex data structures. Refer to the Column Sparkline topic for information on how to do this.

    Code Snippet

    A continuación se demuestra la implementación de cada una de las columnas descritas en este tema:

    <IgrDataGrid
    height="100%"
    width="100%"
    defaultColumnMinWidth="120"
    autoGenerateColumns="false"
    dataSource={this.data}>
    <IgrTextColumn field="FirstName" headerText="First Name" />
    <IgrTextColumn field="LastName" headerText="Last Name" />
    <IgrComboBoxColumn field="City" headerText="City" dataSource={this.cityList} textField="name"/>
    <IgrTemplateColumn field="Address" headerText="Address"
                       cellUpdating={this.onAddressCellUpdating} />
    <IgrImageColumn field="Photo" headerText="Photo"
                    imageResourceType="LocalAsset" />
    <IgrNumericColumn field="Age" headerText="Age"  />
    <IgrDateTimeColumn field="Birthday" headerText="Date of Birth"  />
</IgrDataGrid>

    import { IgrTemplateCellUpdatingEventArgs } from 'igniteui-react-data-grids';
import { IgrTemplateCellInfo } from 'igniteui-react-data-grids';
import { IgrTemplateColumn } from 'igniteui-react-data-grids';
import { IgrComboBoxColumn } from 'igniteui-react-data-grids';

public onAddressCellUpdating(s: IgrTemplateColumn, e: IgrTemplateCellUpdatingEventArgs) {
    const content = e.content as HTMLDivElement;
    let span1: HTMLSpanElement | null = null;
    let span2: HTMLSpanElement | null = null;
    const info = e.cellInfo as IgrTemplateCellInfo;
    const item = info.rowItem;

    if (content.childElementCount === 0) {

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

        content.style.verticalAlign = "top";
        content.style.marginTop = "15px";
        content.style.lineHeight = "normal";
        content.style.display = "inline-grid";
        content.style.fontFamily = "Verdana";
        content.style.fontSize = "13px";

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

    La siguiente es una fuente de datos de muestra para usar con las columnas anteriores.

    const maleNames: string[] = ["Kyle", "Oscar", "Ralph", "Torrey", "Bill", "Frank", "Howard", "Jack", "Larry", "Pete", "Steve", "Vince", "Mark", "Alex", "Max", "Brian", "Chris", "Andrew", "Martin", "Mike", "Steve", "Glenn", "Bruce"];
const 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"];
const lastNames: string[] = ["Adams", "Crowley", "Ellis", "Martinez", "Irvine", "Maxwell", "Clark", "Owens", "Rooney", "Lincoln", "Thomas", "Spacey", "Betts", "King", "Newton", "Fitzgerald", "Holmes", "Jefferson", "Landry", "Newberry", "Perez", "Spencer", "Starr", "Carter", "Edwards", "Stark", "Johnson", "Fitz", "Chief", "Blanc", "Perry", "Stone", "Williams", "Lane", "Jobs", "Adama", "Power", "Tesla"];
const genders: string[] = ["male", "female"];
const cities: string[] = ["New York, New York", "Columbus, Ohio", "Los Angeles, California", "Orlando, Florida", "New Orleans, Louisiana", "Las Vegas, Nevada", "Atlanta, Georgia"];
const roadSuffixes: string[] = ["Road", "Street", "Court", "Way"];
const roadNames: string[] = ["Alpha", "Beta", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Julia", "Kilo", "Lima", "Mike", "November"];

const people: any[] = [];

let maleCount: number = 0;
let femaleCount: number = 0;
for (let i = 0; i < 250; i++) {

    const age: number = Math.round(this.getRandomNumber(20, 40));
    const today: Date = new Date();
    const gender: string = this.getRandomItem(genders);

    let firstName: string;
    const lastName: string = this.getRandomItem(lastNames);

    const propertyNum: string = Math.round(this.getRandomNumber(1, 300)).toString();
    const cityState: string = this.getRandomItem(cities);
    const road: string = this.getRandomItem(roadNames) + " " + this.getRandomItem(roadSuffixes);

    let photoPath: string;

    if (gender === "male") {
        firstName = this.getRandomItem(maleNames);
        maleCount++;

        if (maleCount > 26) {
             maleCount = 0;
        }

        if (maleCount < 10) {
            photoPath = '/assets/GUY0' + maleCount.toString() + '.png';
        }
        else {
            photoPath = '/assets/GUY' + maleCount.toString() + '.png';
        }
    }
    else {
        firstName = this.getRandomItem(femaleNames);
        femaleCount++;

        if (femaleCount > 24) {
            femaleCount = 0;
        }

        if (femaleCount < 10) {
            photoPath = '/assets/GIRL0' + femaleCount.toString() + '.png';
        }
        else {
            photoPath = '/assets/GIRL' + femaleCount.toString() + '.png';
        }
    }

    const path: string = './assets/GIRL01.png';

    const birthday: Date = new Date(today.getFullYear() - age, Math.round(this.getRandomNumber(1, 12)), Math.round(this.getRandomNumber(1, 28)));

    people.push({
        Address: propertyNum + " " + road + ", " + cityState,
        Age: age,
        Birthday: birthday,
        City: cityState,
        FirstName: firstName,
        LastName: lastName,
        Photo: path,
        Street: propertyNum + " " + road + ","
    });
}

this.data = people;

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

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

    API References