React Grid Column Animations

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

    React Grid Column Animations Example

    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:

    <IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    columnAddingAnimationMode="SlideToLeft"
    columnExchangingAnimationMode="SlideToRight"
    columnHidingAnimationMode="SlideToTopAndFadeOut"
    columnMovingAnimationMode="SlideOver"
    columnPropertyUpdatingAnimationMode="Interpolate"
    columnShowingAnimationMode="SlideFromBottomAndFadeIn" />

    API References