Demo - FlexGrid and Excel-Style Animations

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">

  <h1>
    FlexGrid and Excel-Style Animations
  </h1>
  <p>
    Did you notice how Excel uses animation to move the selection
    marquee? That effect makes it easier for the eye to follow 
    the selection.</p>
  <p>
    You can add a similar effect to the FlexGrid by adding a
    transition to the style of the marquee and cells. See 
    the effect by selecting a cell or a range with the mouse
    or keyboard.</p>
  <p>
    In addition to the marquee, you can animate the grid cells
    as well. This effect shows when you resize, drag, or sort
    the columns.</p>
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid .wj-marquee,
.wj-flexgrid .wj-header,
.wj-flexgrid .wj-cell {
  transition: all .4s;
  
  /* want to play? -> http://cubic-bezier.com */
  transition-timing-function: cubic-bezier(.5,0,.5,1)
}
.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 24px;
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      active: i % 5 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: data,
    showSelectedHeaders: 'All',
    showMarquee: true,
    deferResizing: true
  });
}