Please note that this control has been deprecated and replaced with the Grid component, 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.

Web Components Grid Column Animations

The Ignite UI for Web Components Data Table / Data Grid supports Column Animation during events like Column Hiding or Column Moving. When Column Animation on the Web Components data grid is set, the corresponding animation will fire for all of the cells in that column.

Web Components Grid Column Animations Example

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

}
tsCOPY CODE

import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { DataGridSharedData } from './DataGridSharedData';
import { ColumnShowingAnimationMode } from 'igniteui-webcomponents-grids';
import { ColumnExchangingAnimationMode } from 'igniteui-webcomponents-grids';
import { ColumnHidingAnimationMode } from 'igniteui-webcomponents-grids';
import { ColumnPropertyUpdatingAnimationMode } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

ModuleManager.register(
    IgcDataGridModule,
    IgcGridColumnOptionsModule
);

export class DataGridColumnAnimation {

    private grid: IgcDataGridComponent;

    constructor() {

        this.onHideColumnBtnClick = this.onHideColumnBtnClick.bind(this);
        this.onShowColumnBtnClick = this.onShowColumnBtnClick.bind(this);
        this.onReloadGridBtnClick = this.onReloadGridBtnClick.bind(this);

        this.onMovingAnimationDropDownValueChanged = this.onMovingAnimationDropDownValueChanged.bind(this);
        this.onUpdatingAnimationDropDownValueChanged = this.onUpdatingAnimationDropDownValueChanged.bind(this);
        this.onHidingAnimationDropDownValueChanged = this.onHidingAnimationDropDownValueChanged.bind(this);
        this.onExchangeAnimationDropDownValueChanged = this.onExchangeAnimationDropDownValueChanged.bind(this);
        this.onAddAnimationDropDownValueChanged = this.onAddAnimationDropDownValueChanged.bind(this);

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

        document.getElementById('hideColumnBtnClick')!.addEventListener('click', this.onHideColumnBtnClick);
        document.getElementById('showColumnBtnClick')!.addEventListener('click', this.onShowColumnBtnClick);
        document.getElementById('reloadGridBtnClick')!.addEventListener('click', this.onReloadGridBtnClick);

        document.getElementById('movingAnimationDropDown')!.addEventListener('change', this.onMovingAnimationDropDownValueChanged);
        document.getElementById('updatingAnimationDropDown')!.addEventListener('change', this.onUpdatingAnimationDropDownValueChanged);
        document.getElementById('hidingAnimationDropDown')!.addEventListener('change', this.onHidingAnimationDropDownValueChanged);
        document.getElementById('exchangeAnimationDropDown')!.addEventListener('change', this.onExchangeAnimationDropDownValueChanged);
        document.getElementById('addAnimationDropDown')!.addEventListener('change', this.onAddAnimationDropDownValueChanged);
    }

    onHideColumnBtnClick() {
        for (const col of this.grid.combinedColumns) {
            if (!col.isHidden) {
                col.isHidden = true;
                break;
            }
        }
    }

    onShowColumnBtnClick() {

        const columns = this.grid.combinedColumns.reverse();

        for (const col of columns) {
            if (col.isHidden) {
                col.isHidden = false;
                break;
            }
        }
    }

    onReloadGridBtnClick() {
        const newData = DataGridSharedData.getEmployees();

        for (let i = 0; i < this.grid.dataSource.length; i++) {
            const oldItem = this.grid.dataSource[i];
            oldItem.Salary = newData[i].Salary;
            this.grid.notifySetItem(i, oldItem, newData[i]);
        }
    }

    onMovingAnimationDropDownValueChanged() {
        let dropDown = document.getElementById('movingAnimationDropDown') as any;

        switch (dropDown.value) {
            case 'Auto': {
                this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.Auto;
                break;
            }
            case 'None': {
                this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.None;
                break;
            }
            case 'SlideOver': {
                this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
                break;
            }
        }
    }

    onUpdatingAnimationDropDownValueChanged() {
        let dropDown = document.getElementById('updatingAnimationDropDown') as any;

        switch (dropDown.value) {
            case 'Auto': {
                this.grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.Auto;
                break;
            }
            case 'None': {
                this.grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.None;
                break;
            }
            case 'Interpolate': {
                this.grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.Interpolate;
                break;
            }
            case 'InterpolateDeep': {
                this.grid.columnPropertyUpdatingAnimationMode = ColumnPropertyUpdatingAnimationMode.InterpolateDeep;
                break;
            }
        }
    }

    onHidingAnimationDropDownValueChanged() {
        let dropDown = document.getElementById('hidingAnimationDropDown') as any;

        switch (dropDown.value) {
            case 'Auto': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.Auto;
                break;
            }
            case 'None': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.None;
                break;
            }
            case 'SlideToLeft': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToLeft;
                break;
            }
            case 'SlideToRight': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToRight;
                break;
            }
            case 'SlideToTop': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToTop;
                break;
            }
            case 'SlideToBottom': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToBottom;
                break;
            }
            case 'FadeOut': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.FadeOut;
                break;
            }
            case 'SlideToLeftAndFadeOut': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToLeftAndFadeOut;
                break;
            }
            case 'SlideToRightAndFadeOut': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToRightAndFadeOut;
                break;
            }
            case 'SlideToTopAndFadeOut': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToTopAndFadeOut;
                break;
            }
            case 'SlideToBottomAndFadeOut': {
                this.grid.columnHidingAnimationMode = ColumnHidingAnimationMode.SlideToBottomAndFadeOut;
                break;
            }
        }
    }

    onExchangeAnimationDropDownValueChanged() {
        let dropDown = document.getElementById('exchangeAnimationDropDown') as any;

        switch (dropDown.value) {
            case 'Auto': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.Auto;
                break;
            }
            case 'None': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.None;
                break;
            }
            case 'SlideToLeft': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToLeft;
                break;
            }
            case 'SlideToRight': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToRight;
                break;
            }
            case 'SlideToTop': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToTop;
                break;
            }
            case 'SlideToBottom': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToBottom;
                break;
            }
            case 'Crossfade': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.Crossfade;
                break;
            }
            case 'SlideToLeftAndCrossfade': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToLeftAndCrossfade;
                break;
            }
            case 'SlideToRightAndCrossfade': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToRightAndCrossfade;
                break;
            }
            case 'SlideToTopAndCrossfade': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToTopAndCrossfade;
                break;
            }
            case 'SlideToBottomAndCrossfade': {
                this.grid.columnExchangingAnimationMode = ColumnExchangingAnimationMode.SlideToBottomAndCrossfade;
                break;
            }
        }
    }

    onAddAnimationDropDownValueChanged() {
        let dropDown = document.getElementById('addAnimationDropDown') as any;

        switch (dropDown.value) {
            case 'Auto': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.Auto;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'None': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.None;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromLeft': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromLeft;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromRight': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromRight;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromTop': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromTop;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromBottom': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromBottom;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'FadeIn': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.FadeIn;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromLeftAndFadeIn': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromLeftAndFadeIn;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromRightAndFadeIn': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromRightAndFadeIn;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromTopAndFadeIn': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromTopAndFadeIn;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
            case 'SlideFromBottomAndFadeIn': {
                this.grid.columnAddingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                this.grid.columnShowingAnimationMode = ColumnShowingAnimationMode.SlideFromBottomAndFadeIn;
                break;
            }
        }
    }
}

new DataGridColumnAnimation();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>DataGridColumnAnimation</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">
    <div class="options horizontal">
        <label class="options-label" style="width: 130px">Adding Animation: </label>
        <select id="addAnimationDropDown" class="options-label" style="width: 175px">
            <option>Auto</option>
            <option>None</option>
            <option>SlideFromLeft</option>
            <option>SlideFromRight</option>
            <option>SlideFromTop</option>
            <option>SlideFromBottom</option>
            <option>FadeIn</option>
            <option>SlideFromLeftAndFadeIn</option>
            <option>SlideFromRightAndFadeIn</option>
            <option>SlideFromTopAndFadeIn</option>
            <option>SlideFromBottomAndFadeIn</option>
        </select>
        <span class="options-label" style="width: 130px">Exchange Animation: </span>
        <select id="exchangeAnimationDropDown" class="options-label" style="width: 175px">
            <option>Auto</option>
            <option>None</option>
            <option>SlideToLeft</option>
            <option>SlideToRight</option>
            <option>SlideToTop</option>
            <option>SlideToBottom</option>
            <option>Crossfade</option>
            <option>SlideToLeftAndCrossfade</option>
            <option>SlideToRightAndCrossfade</option>
            <option>SlideToTopAndCrossfade</option>
            <option>SlideToBottomAndCrossfade</option>
        </select>
    </div>
    <div class="options horizontal">
        <span class="options-label" style="width: 130px">Hiding Animation: </span>
        <select id="hidingAnimationDropDown" class="options-label" style="width: 175px">
            <option>Auto</option>
            <option>None</option>
            <option>SlideToLeft</option>
            <option>SlideToRight</option>
            <option>SlideToTop</option>
            <option>SlideToBottom</option>
            <option>FadeOut</option>
            <option>SlideToLeftAndFadeOut</option>
            <option>SlideToRightAndFadeOut</option>
            <option>SlideToTopAndFadeOut</option>
            <option>SlideToBottomAndFadeOut</option>
        </select>
        <span class="options-label" style="width: 130px">Updating Animation: </span>
        <select id="updatingAnimationDropDown" class="options-label" style="width: 175px" >
            <option>Auto</option>
            <option>None</option>
            <option>Interpolate</option>
            <option>InterpolateDeep</option>
        </select>
    </div>
    <div class="options horizontal">
        <span class="options-label" style="width: 130px">Moving Animation: </span>
        <select id="movingAnimationDropDown" class="options-label" style="width: 175px">
            <option>Auto</option>
            <option>None</option>
            <option>SlideOver</option>
        </select>
        <button id="hideColumnBtnClick" class="options-label" style="width: 100px">Hide Column</button>
        <button id="showColumnBtnClick" class="options-label" style="width: 100px">Show Column</button>
        <button id="reloadGridBtnClick" class="options-label" style="width: 100px">Reload Grid</button>
    </div>

    <igc-data-grid
        id="grid"
        height="calc(100% - 6rem)"
        width="100%"
        default-column-min-width="100"
        column-adding-animation-mode="Auto"
        column-showing-animation-mode="Auto"
        column-exchanging-animation-mode="Auto"
        column-hiding-animation-mode="Auto"
        column-moving-animation-mode="Auto"
        column-property-updating-animation-mode="Auto"
        is-column-options-enabled="true"
        auto-generate-columns="false" >

        <igc-text-column field="Name" width="*>150"></igc-text-column>
        <igc-text-column field="Street" header-text="Address" width="*>165" ></igc-text-column>
        <igc-text-column field="City" width="*>140" ></igc-text-column>
        <igc-numeric-column field="Salary" positive-prefix="$" show-grouping-separator="true" width="*>140" ></igc-numeric-column>
        <igc-date-time-column field="Birthday" ></igc-date-time-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>htmlCOPY CODE

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

Edit in: Codesandbox

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.

Animation Properties

Each column animation property is listed and described below:

• columnAddingAnimationMode: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.
• columnExchangingAnimationMode: When a column is exchanged, you have the option to have the exchanged column header and its cells slide to the left, right, top, or bottom. There are also options to have it fade as well as slide and fade.
• columnHidingAnimationMode: When a column is hidden, you have the option to have the column header and its cells slide out to the left, right, top, or bottom. There are also options to have it fade out as well as slide and fade out.
• columnMovingAnimationMode: When a column is moved, you have the option to have the column header and its cells slide over.
• columnPropertyUpdatingAnimationMode: When a column's property changes, you have the option to have that property change animate by interpolating or deeply interpolating its change.
• columnShowingAnimationMode: When a column is added, you have the option to have the column header and its cells slide in from the left, right, top, or bottom. There are also options to have it fade in as well as slide and fade in.

Code Snippet

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

<igc-data-grid id="grid"
      height="100%"
      width="100%"
      column-addingAnimation-mode="SlideToLeft"
      column-exchanging-animation-mode="SlideToRight"
      column-hiding-animation-mode="SlideToTopAndFadeOut"
      column-moving-animation-mode="SlideOver"
      column-property-updating-animation-mode="Interpolate"
      column-showing-animation-mode="SlideFromBottomAndFadeIn">
</igc-data-grid>
html

API References

• columnAddingAnimationMode
• columnExchangingAnimationMode
• columnHidingAnimationMode
• columnMovingAnimationMode
• ColumnPropertyUpdatingAnimation