React テーブル列アニメーション

React Data Table / Data Grid は、列の非表示や列の移動などのイベント時に列のアニメーションをサポートします。 React グリッドで Column Animation が設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。

サンプル

列アニメーション

各列のアニメーションプロパティは以下のとおりです。

  • columnAddingAnimationMode: 列を追加すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード インだけでなく、フェード インさせるオプションもあります。
  • columnExchangingAnimationMode: 列を交換する場合、交換した列ヘッダーとそのセルを左、右、上、または下にスライドさせることができます。スライドやフェードだけでなく、フェードさせるオプションもあります。
  • columnHidingAnimationMode: 列を非表示にすると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェード アウトだけでなく、フェード アウトさせるオプションもあります。
  • columnMovingAnimationMode: 列が移動すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。
  • columnPropertyUpdatingAnimationMode: 列のプロパティが変更されると、その変更を補完またはさらに補完してそのプロパティの変更をアニメーションするオプションがあります。
  • columnShowingAnimationMode: 列を追加すると、列ヘッダーとそのセルを左、右、上、または下からスライドさせることができます。スライドやフェードインだけでなく、フェードインさせるオプションもあります。

コード スニペット

このトピックで説明されている各列アニメーションの実装を次に示します。

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