Demo - FlexGrid Core Features

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/themes/wijmo.theme.material.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.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<div class="container">
  <h1>
    FlexGrid Core Features
  </h1>
  <p>
    The FlexGrid control is small, fast, robust, and full-featured.
    This example shows a material-themed grid with
    <b><span id="rowCount"></span></b> rows and
    links that allow you to explore some of the grid's core
    features.
  </p>
  <p>
    Use the mouse or keyboard to select cell ranges, copy
    and paste to the clipboard, resize and drag columns,
    edit cells, and explore!
  </p>
  <div class="row">
    <div class="col-xs-8">
      <div id="theGrid"></div>
      <div id="pager" class="hidden">
        <button id="first" class="btn" title="go to first page"><span class="wj-glyph-step-backward"></span></button>
        <button id="prev" class="btn" title="go to previous page"><span class="wj-glyph-left"></span></button>
        <span id="current">Page x of y</span>
        <button id="next" class="btn" title="go to next page"><span class="wj-glyph-right"></span></button>
        <button id="last" class="btn" title="go to last page"><span class="wj-glyph-step-forward"></span></button>
      </div>
    </div>
    <div id="links" class="col-xs-4">
      <a id="rangeSelection" href="">Range Selection</a>
      <a id="listBoxSelection" href="">ListBox Selection</a>
      <p></p>
      <a id="sortOne" href="">Sort by one column</a>
      <a id="sortTwo" href="">Sort by two columns</a>
      <a id="sortClear" href="">Remove Sort</a>
      <p></p>
      <a id="filterOn" href="">Filter by Country</a>
  ...

CSS

.wj-flexgrid {
  max-height: 350px;
}
  .wj-flexgrid .wj-cells .wj-cell,
  .wj-flexgrid .wj-colheaders .wj-cell {
    border-right: none;
  }
  .wj-flexgrid .wj-cell .wj-btn.wj-btn-glyph {
    opacity: .5;
  }
  .wj-flexgrid.animated .wj-marquee,
  .wj-flexgrid.animated .wj-colheaders .wj-header {
    transition: all .3s;
    transition-timing-function: cubic-bezier(.5,0,.5,1)
  }

#links a {
  display: block;
  font-size: 90%;
}

#pager {
  text-align: center;
  padding: 4px;
  margin-bottom: 1em;
}
  #pager #current {
    display: inline-block;
    text-align: center;
    font-size: 80%;
    width: 10em;
    margin: 0 .5em;
  }
  #pager button {
    padding: 2px 12px;
  }
  #pager button span {
    pointer-events: none;
  }

.hidden {
  display: none;
}

body {
  font-size: 16px;
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

	// create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    autoGenerateColumns: false,
    showAlternatingRows: false,
    showSelectedHeaders: 'All',
    deferResizing: true,
    itemsSource: getData(10000),
    columns: [
    	{ header: 'ID', binding: 'id', width: 80, isReadOnly: true },
      { header: 'Date', binding: 'date', format: 'MMM d, yyyy' },
      { header: 'Country', binding: 'country', dataMap: getCountries() },
      { header: 'Product', binding: 'product', dataMap: getProducts() },
      { header: 'Active', binding: 'active', width: 80 },
      { header: 'Downloads (k)', binding: 'transactions.downloads', format: 'n2,', aggregate: 'Sum' },
      { header: 'Sales (k)', binding: 'transactions.sales', format: 'c2,', aggregate: 'Sum' },
      { header: 'Expenses (k)', binding: 'transactions.expenses', format: 'c2,', aggregate: 'Sum' }
    ]
  });
  
  // allow users to enter countries and products that are not on the maps
  theGrid.getColumn('country').dataMap.isEditable = true;
  theGrid.getColumn('product').dataMap.isEditable = true;
  
  // show row count
  document.getElementById('rowCount').textContent = wijmo.Globalize.format(theGrid.rows.length, 'n0');

  // create some random data
	function getCountries() {
    return [
    	'US', 'Canada', 'Mexico', 'Brazil',
      'Germany', 'UK', 'France', 'Italy', 'Spain', 'Portugal',
      'Japan', 'China', 'Korea'
		];
	}
	function getProducts() {
    return [
    	'Phones', 'Cars', 'Planes', 'Boats', 'Computers' ,'Watches'
		];
	}
  function getData(cnt) {
    var data = [],
        countries = getCountries(),
        products = getProducts(),
        today = new Date();
    for (var i = 0; i < cnt; i++) {
      data.push({
        id: i,
        date: wijmo.DateTime.addDays(today, -Math.random() * 365),
        country: countries[i % countries.length],
        product: products[i % products.length],
        active: i % 5 != 0,
        transactions: {
	       ...