Column Types

The Ignite UI for Web Components Data Table / Data Grid supports 4 column types, plus a Templated Column Type, giving you complete flexibility over the way your data is displayed in the Web Components data grid. Column types supported are Text, Numeric, DateTime, Image and Template.

Each column binds to data by setting the propertyPath property to the name of the corresponding property on the items of your underlying dataSource bound to the Web Components data grid.

Demo

Text Column

The Web Components grid is used for displaying formatted text in its associated cells. This is the default column type used to display data of the string type.

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.

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

The following demonstrates the implementation of each of the columns described in this topic:

<igc-live-grid id="grid"
    width="100%"
    height="500px"
    auto-generate-columns="false">
    <igc-text-column property-path="FirstName"></igc-text-column>
    <igc-text-column property-path="LastName"></igc-text-column>
    <igc-template-column id="Address" property-path="Address"></igc-template-column>
    <igc-image-column property-path="Photo"></igc-text-column>
    <igc-numeric-column property-path="Age"></igc-numeric-column>
    <igc-date-time-column property-path="Birthday"></igc-date-time-column>
</igc-live-grid>
import { IgcTemplateColumnComponent } from 'igniteui-webcomponents-grids/ES2015/igc-template-column-component';
import { TemplateCellInfo } from "igniteui-webcomponents-grids/ES2015/igc-template-cell-info";

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

let TemplateColumn = (document.getElementById("Address") as IgcTemplateColumnComponent);
TemplateColumn.cellUpdating = onCellUpdating;

onCellUpdating(s: IgcTemplateColumnComponent, e: TemplateCellUpdatingEventArgs): void {
 // alert("onAddressCellUpdating");
 const content = e.content as HTMLDivElement;
 let span1: HTMLSpanElement | null = null;
 let span2: HTMLSpanElement | null = null;
 const info = e.cellInfo as TemplateCellInfo ;
 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;
  }
}

The following is a sample data source to use with the above columns.

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", "Juliett", "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];
}