swapnilshrikhande · April 20, 2016 09:42
diff --git a/GroupSortableTable_FixedHeader_ScrollSpy_Bootstrap.html b/GroupSortableTable_FixedHeader_ScrollSpy_Bootstrap.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/dist/css/bootstrap.min.js"></script>
  <script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>.
  
  <script type="text/javascript">
 	
 	! function($) {

  'use strict';

  var initBodyCaller,
    tableGroups;

  // it only does '%s', and return '' when arguments are undefined
  var sprintf = function(str) {
    var args = arguments,
      flag = true,
      i = 1;

    str = str.replace(/%s/g, function() {
      var arg = args[i++];

      if (typeof arg === 'undefined') {
        flag = false;
        return '';
      }
      return arg;
    });
    return flag ? str : '';
  };

  var groupBy = function(array, f) {
    var groups = {};
    array.forEach(function(o) {
      var group = f(o);
      groups[group] = groups[group] || [];
      groups[group].push(o);
    });

    return groups;
  };

  $.extend($.fn.bootstrapTable.defaults, {
    groupBy: false,
    groupByField: ''
  });

  var BootstrapTable = $.fn.bootstrapTable.Constructor,
    _initSort = BootstrapTable.prototype.initSort,
    _initBody = BootstrapTable.prototype.initBody,
    _updateSelected = BootstrapTable.prototype.updateSelected;

  BootstrapTable.prototype.initSort = function() {
    _initSort.apply(this, Array.prototype.slice.apply(arguments));

    var that = this;
    tableGroups = [];

    if ((this.options.groupBy) && (this.options.groupByField !== '')) {

      if ((this.options.sortName != this.options.groupByField)) {
        this.data.sort(function(a, b) {
          return a[that.options.groupByField].localeCompare(b[that.options.groupByField]);
        });
      }

      var that = this;
      var groups = groupBy(that.data, function(item) {
        return [item[that.options.groupByField]];
      });

      var index = 0;
      $.each(groups, function(key, value) {
        tableGroups.push({
          id: index,
          name: key
        });

        value.forEach(function(item) {
          if (!item._data) {
            item._data = {};
          }

          item._data['parent-index'] = index;
        });

        index++;
      });
    }
  }

  BootstrapTable.prototype.initBody = function() {
    initBodyCaller = true;

    _initBody.apply(this, Array.prototype.slice.apply(arguments));

    if ((this.options.groupBy) && (this.options.groupByField !== '')) {
      var that = this,
        checkBox = false,
        visibleColumns = 0;

      this.columns.forEach(function(column) {
        if (column.checkbox) {
          checkBox = true;
        } else {
          if (column.visible) {
            visibleColumns++;
          }
        }
      });

      tableGroups.forEach(function(item) {
        var html = [];

        html.push(sprintf('<tr class="info groupBy" data-group-index="%s">', item.id));

        if (checkBox) {
          html.push('<td class="bs-checkbox">',
            '<input name="btSelectGroup" type="checkbox" />',
            '</td>'
          );
        }

        html.push('<td',
          sprintf(' colspan="%s"', visibleColumns),
          '>', item.name, '</td>'
        );

        html.push('</tr>');

        that.$body.find('tr[data-parent-index=' + item.id + ']:first').before($(html.join('')));
      });

      this.$selectGroup = [];
      this.$body.find('[name="btSelectGroup"]').each(function() {
        var self = $(this);

        that.$selectGroup.push({
          group: self,
          item: that.$selectItem.filter(function() {
            return ($(this).closest('tr').data('parent-index') ===
              self.closest('tr').data('group-index'));
          })
        });
      });

      this.$container.off('click', '.groupBy')
        .on('click', '.groupBy', function() {
          $(this).toggleClass('expanded');
          that.$body.find('tr[data-parent-index=' + $(this).closest('tr').data('group-index') + ']').toggleClass('hidden');
        });

      this.$container.off('click', '[name="btSelectGroup"]')
        .on('click', '[name="btSelectGroup"]', function(event) {
          event.stopImmediatePropagation();

          var self = $(this);
          var checked = self.prop('checked');
          that[checked ? 'checkGroup' : 'uncheckGroup']($(this).closest('tr').data('group-index'));
        });
    }

    initBodyCaller = false;
    this.updateSelected();
  };

  BootstrapTable.prototype.updateSelected = function() {
    if (!initBodyCaller) {
      _updateSelected.apply(this, Array.prototype.slice.apply(arguments));

      this.$selectGroup.forEach(function(item) {
        var checkGroup = item.item.filter(':enabled').length ===
          item.item.filter(':enabled').filter(':checked').length;

        item.group.prop('checked', checkGroup);
      });
    }
  };

  BootstrapTable.prototype.getGroupSelections = function(index) {
    var that = this;

    return $.grep(this.data, function(row) {
      return (row[that.header.stateField] && (row._data['parent-index'] === index));
    });
  };

  BootstrapTable.prototype.checkGroup = function(index) {
    this.checkGroup_(index, true);
  };

  BootstrapTable.prototype.uncheckGroup = function(index) {
    this.checkGroup_(index, false);
  };

  BootstrapTable.prototype.checkGroup_ = function(index, checked) {
    var rows;
    var filter = function() {
      return ($(this).closest('tr').data('parent-index') === index);
    };

    if (!checked) {
      rows = this.getGroupSelections(index);
    }

    this.$selectItem.filter(filter).prop('checked', checked);


    this.updateRows();
    this.updateSelected();
    if (checked) {
      rows = this.getGroupSelections(index);
    }
    this.trigger(checked ? 'check-all' : 'uncheck-all', rows);
  };

 }(jQuery);


 var data = [{
  "name": "bootstrap-table",
  "stargazers_count": "10",
  "forks_count": "122",
  "description": "An extended Bootstrap table"
 }, {
  "name": "multiple-select",
  "stargazers_count": "288",
  "forks_count": "20",
  "description": "A jQuery plugin to select multiple elements with checkboxes :)"
 }, {
  "name": "bootstrap-table",
  "stargazers_count": "32",
  "forks_count": "11",
  "description": "Show/hide password plugin for twitter bootstrap."
 }, {
  "name": "bootstrap-table",
  "stargazers_count": "13",
  "forks_count": "4",
  "description": "my blog"
 }, {
  "name": "scutech-redmine 1",
  "stargazers_count": "50",
  "forks_count": "3",
  "description": "Redmine notification tools for chrome extension."
 }];

 $(function() {
  $('#table').bootstrapTable({
    data: data
  });
 });
   
  
  
  </script>
  <style>
  body {
      position: relative; 
  }
  #Campaign {padding-top:50px;height:500px;}
  #Campaign Members{padding-top:50px;height:500px;}
  #Apps {padding-top:50px;height:500px;}
  #Picklist {padding-top:50px;height:500px;}
  #Chatter summary {padding-top:50px;height:500px;}
  #section42 {padding-top:50px;height:500px;}
  .bootstrap-table .table > tbody > tr.groupBy {}

 	.bootstrap-table .table > tbody > tr.groupBy.expanded {}
  </style>
 </head>
 <body data-spy="scroll" data-target=".navbar" data-offset="50">

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
 		   
 		   <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Objects<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#sec-1">Campaign</a></li>
              <li><a href="#sec-2">Campaign Members</a></li>
            </ul>
          </li>
          
 		  <li><a href="#Apps">Apps</a></li>
          
 		  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Picklist<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#Pck-1">Lead Source Customisation</a></li>
              <li><a href="#Pck-2">Industry Customisation</a></li>
 			  <li><a href="#Pck-3">Opportunity Stage Customisation</a></li>
            </ul>
          </li>
          
 		  <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Chatter summary <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#section41">Number of chatter groups</a></li>
              <li><a href="#section42">Number of chatter posts</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
 </nav>    
 <div id="sec-1"> </div>
 <div id="" class="container-fluid" style="margin-top: 36px;">
 <h1>Campaign </h1>
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
  
  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 </div>
 <div id="sec-2"></div>
 	<div id="" class="container-fluid" style="margin-top: 36px;">
 	  <h1>Campaign Members</h1>
 	 <div style="padding: 10px; ">
 	  <br>
 	  <table id="table" data-group-by="true" data-group-by-field="name" data-search="true" data-show-columns="true" data-pagination="true" data-page-size="10">
 		<thead>
 		  <tr>
 			<th data-checkbox="true"></th>
 			<th data-field="name" data-sortable="true">Object Name</th>
 			<th data-field="stargazers_count" data-sortable="true">Total number of custom Apps</th>
 			<th data-field="forks_count" data-sortable="true">Total Number of Picklist</th>
 			<th data-field="description" data-sortable="true">Number of Picklist owned by Chatter summary</th>
 			<th data-field="description" data-sortable="true">Number of Picklist edited in the last 30 days</th>
 			<th data-field="name" data-sortable="true">A list of the validation rules associated with the object</th>
 			<th data-field="name" data-sortable="true">A list of workflows associated with the object (if available)</th>
 		  </tr>
 		</thead>
 	  </table>
 	</div>
 	</div>
 	
 	<div id="Apps" class="container-fluid">
 	  <h1>Apps</h1>
 	  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 	  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 	</div>
 	<div id="Pck-1"></div>
 	<div id="" class="container-fluid" style="margin-top: 80px;">
 	  <h1>Lead Source Customisation</h1>
 	  <div class="container">
 	  
 		<div class="row">
        <div class="col-md-8 text-center">
 	  <table class="table table-bordered">
 		<thead>
      <tr>
        <th><center>Values</center></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Values 1</td>
      </tr>
      <tr>
         <td>Values 2</td>
      </tr>
      <tr>
        <td>Values 3</td>
      </tr>
    </tbody>
  </table>
 </div>
 </div>
 </div>
 	<div id="Pck-2"></div>
 	<div id="" class="container-fluid" style="margin-top: 80px;">
 	  <h1>Industry Customisation</h1>
 	  <div class="container">
 		<div class="row">
        <div class="col-md-8 text-center">
 	  <table class="table table-bordered">
 		<thead>
      <tr>
        <th><center>Values</center></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Values 1</td>
      </tr>
      <tr>
         <td>Values 2</td>
      </tr>
      <tr>
        <td>Values 3</td>
      </tr>
    </tbody>
  </table>
 </div>
 </div>
 </div>
 	<div id="Pck-3"></div>
 	<div id="" class="container-fluid" style="margin-top: 80px;">
 	  <h1>Opportunity Stage Customisation</h1>
 	  <div class="container">
 		<div class="row">
        <div class="col-md-8 text-center">
 	  <table class="table table-bordered">
 		<thead>
      <tr>
        <th><center>Values</center></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Values 1</td>
      </tr>
      <tr>
         <td>Values 2</td>
      </tr>
      <tr>
        <td>Values 3</td>
      </tr>
    </tbody>
  </table>
 </div>
 </div>
 </div>
 		
 	<div id="section41" class="container-fluid">
 	  <h1>Number of chatter groups</h1>
 	  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 	  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 	</div>

 	<div id="section42" class="container-fluid">
 	  <h1>Number of chatter posts</h1>
 	  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 	  <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
 	</div>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bootstrap Example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css"/>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/dist/css/bootstrap.min.js"></script>
	<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>.

	<script type="text/javascript">

	! function($) {

	'use strict';

	var initBodyCaller,
	tableGroups;

	// it only does '%s', and return '' when arguments are undefined
	var sprintf = function(str) {
	var args = arguments,
	flag = true,
	i = 1;

	str = str.replace(/%s/g, function() {
	var arg = args[i++];

	if (typeof arg === 'undefined') {
	flag = false;
	return '';
	}
	return arg;
	});
	return flag ? str : '';
	};

	var groupBy = function(array, f) {
	var groups = {};
	array.forEach(function(o) {
	var group = f(o);
	groups[group] = groups[group] \|\| [];
	groups[group].push(o);
	});

	return groups;
	};

	$.extend($.fn.bootstrapTable.defaults, {
	groupBy: false,
	groupByField: ''
	});

	var BootstrapTable = $.fn.bootstrapTable.Constructor,
	_initSort = BootstrapTable.prototype.initSort,
	_initBody = BootstrapTable.prototype.initBody,
	_updateSelected = BootstrapTable.prototype.updateSelected;

	BootstrapTable.prototype.initSort = function() {
	_initSort.apply(this, Array.prototype.slice.apply(arguments));

	var that = this;
	tableGroups = [];

	if ((this.options.groupBy) && (this.options.groupByField !== '')) {

	if ((this.options.sortName != this.options.groupByField)) {
	this.data.sort(function(a, b) {
	return a[that.options.groupByField].localeCompare(b[that.options.groupByField]);
	});
	}

	var that = this;
	var groups = groupBy(that.data, function(item) {
	return [item[that.options.groupByField]];
	});

	var index = 0;
	$.each(groups, function(key, value) {
	tableGroups.push({
	id: index,
	name: key
	});

	value.forEach(function(item) {
	if (!item._data) {
	item._data = {};
	}

	item._data['parent-index'] = index;
	});

	index++;
	});
	}
	}

	BootstrapTable.prototype.initBody = function() {
	initBodyCaller = true;

	_initBody.apply(this, Array.prototype.slice.apply(arguments));

	if ((this.options.groupBy) && (this.options.groupByField !== '')) {
	var that = this,
	checkBox = false,
	visibleColumns = 0;

	this.columns.forEach(function(column) {
	if (column.checkbox) {
	checkBox = true;
	} else {
	if (column.visible) {
	visibleColumns++;
	}
	}
	});

	tableGroups.forEach(function(item) {
	var html = [];

	html.push(sprintf('<tr class="info groupBy" data-group-index="%s">', item.id));

	if (checkBox) {
	html.push('<td class="bs-checkbox">',
	'<input name="btSelectGroup" type="checkbox" />',
	'</td>'
	);
	}

	html.push('<td',
	sprintf(' colspan="%s"', visibleColumns),
	'>', item.name, '</td>'
	);

	html.push('</tr>');

	that.$body.find('tr[data-parent-index=' + item.id + ']:first').before($(html.join('')));
	});

	this.$selectGroup = [];
	this.$body.find('[name="btSelectGroup"]').each(function() {
	var self = $(this);

	that.$selectGroup.push({
	group: self,
	item: that.$selectItem.filter(function() {
	return ($(this).closest('tr').data('parent-index') ===
	self.closest('tr').data('group-index'));
	})
	});
	});

	this.$container.off('click', '.groupBy')
	.on('click', '.groupBy', function() {
	$(this).toggleClass('expanded');
	that.$body.find('tr[data-parent-index=' + $(this).closest('tr').data('group-index') + ']').toggleClass('hidden');
	});

	this.$container.off('click', '[name="btSelectGroup"]')
	.on('click', '[name="btSelectGroup"]', function(event) {
	event.stopImmediatePropagation();

	var self = $(this);
	var checked = self.prop('checked');
	that[checked ? 'checkGroup' : 'uncheckGroup']($(this).closest('tr').data('group-index'));
	});
	}

	initBodyCaller = false;
	this.updateSelected();
	};

	BootstrapTable.prototype.updateSelected = function() {
	if (!initBodyCaller) {
	_updateSelected.apply(this, Array.prototype.slice.apply(arguments));

	this.$selectGroup.forEach(function(item) {
	var checkGroup = item.item.filter(':enabled').length ===
	item.item.filter(':enabled').filter(':checked').length;

	item.group.prop('checked', checkGroup);
	});
	}
	};

	BootstrapTable.prototype.getGroupSelections = function(index) {
	var that = this;

	return $.grep(this.data, function(row) {
	return (row[that.header.stateField] && (row._data['parent-index'] === index));
	});
	};

	BootstrapTable.prototype.checkGroup = function(index) {
	this.checkGroup_(index, true);
	};

	BootstrapTable.prototype.uncheckGroup = function(index) {
	this.checkGroup_(index, false);
	};

	BootstrapTable.prototype.checkGroup_ = function(index, checked) {
	var rows;
	var filter = function() {
	return ($(this).closest('tr').data('parent-index') === index);
	};

	if (!checked) {
	rows = this.getGroupSelections(index);
	}

	this.$selectItem.filter(filter).prop('checked', checked);


	this.updateRows();
	this.updateSelected();
	if (checked) {
	rows = this.getGroupSelections(index);
	}
	this.trigger(checked ? 'check-all' : 'uncheck-all', rows);
	};

	}(jQuery);


	var data = [{
	"name": "bootstrap-table",
	"stargazers_count": "10",
	"forks_count": "122",
	"description": "An extended Bootstrap table"
	}, {
	"name": "multiple-select",
	"stargazers_count": "288",
	"forks_count": "20",
	"description": "A jQuery plugin to select multiple elements with checkboxes :)"
	}, {
	"name": "bootstrap-table",
	"stargazers_count": "32",
	"forks_count": "11",
	"description": "Show/hide password plugin for twitter bootstrap."
	}, {
	"name": "bootstrap-table",
	"stargazers_count": "13",
	"forks_count": "4",
	"description": "my blog"
	}, {
	"name": "scutech-redmine 1",
	"stargazers_count": "50",
	"forks_count": "3",
	"description": "Redmine notification tools for chrome extension."
	}];

	$(function() {
	$('#table').bootstrapTable({
	data: data
	});
	});



	</script>
	<style>
	body {
	position: relative;
	}
	#Campaign {padding-top:50px;height:500px;}
	#Campaign Members{padding-top:50px;height:500px;}
	#Apps {padding-top:50px;height:500px;}
	#Picklist {padding-top:50px;height:500px;}
	#Chatter summary {padding-top:50px;height:500px;}
	#section42 {padding-top:50px;height:500px;}
	.bootstrap-table .table > tbody > tr.groupBy {}

	.bootstrap-table .table > tbody > tr.groupBy.expanded {}
	</style>
	</head>
	<body data-spy="scroll" data-target=".navbar" data-offset="50">

	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container-fluid">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>
	<a class="navbar-brand" href="#">WebSiteName</a>
	</div>
	<div>
	<div class="collapse navbar-collapse" id="myNavbar">
	<ul class="nav navbar-nav">

	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Objects<span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#sec-1">Campaign</a></li>
	<li><a href="#sec-2">Campaign Members</a></li>
	</ul>
	</li>

	<li><a href="#Apps">Apps</a></li>

	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Picklist<span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#Pck-1">Lead Source Customisation</a></li>
	<li><a href="#Pck-2">Industry Customisation</a></li>
	<li><a href="#Pck-3">Opportunity Stage Customisation</a></li>
	</ul>
	</li>

	<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Chatter summary <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="#section41">Number of chatter groups</a></li>
	<li><a href="#section42">Number of chatter posts</a></li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</nav>
	<div id="sec-1"> </div>
	<div id="" class="container-fluid" style="margin-top: 36px;">
	<h1>Campaign </h1>
	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>

	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	</div>
	<div id="sec-2"></div>
	<div id="" class="container-fluid" style="margin-top: 36px;">
	<h1>Campaign Members</h1>
	<div style="padding: 10px; ">
	<br>
	<table id="table" data-group-by="true" data-group-by-field="name" data-search="true" data-show-columns="true" data-pagination="true" data-page-size="10">
	<thead>
	<tr>
	<th data-checkbox="true"></th>
	<th data-field="name" data-sortable="true">Object Name</th>
	<th data-field="stargazers_count" data-sortable="true">Total number of custom Apps</th>
	<th data-field="forks_count" data-sortable="true">Total Number of Picklist</th>
	<th data-field="description" data-sortable="true">Number of Picklist owned by Chatter summary</th>
	<th data-field="description" data-sortable="true">Number of Picklist edited in the last 30 days</th>
	<th data-field="name" data-sortable="true">A list of the validation rules associated with the object</th>
	<th data-field="name" data-sortable="true">A list of workflows associated with the object (if available)</th>
	</tr>
	</thead>
	</table>
	</div>
	</div>

	<div id="Apps" class="container-fluid">
	<h1>Apps</h1>
	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	</div>
	<div id="Pck-1"></div>
	<div id="" class="container-fluid" style="margin-top: 80px;">
	<h1>Lead Source Customisation</h1>
	<div class="container">

	<div class="row">
	<div class="col-md-8 text-center">
	<table class="table table-bordered">
	<thead>
	<tr>
	<th><center>Values</center></th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Values 1</td>
	</tr>
	<tr>
	<td>Values 2</td>
	</tr>
	<tr>
	<td>Values 3</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	<div id="Pck-2"></div>
	<div id="" class="container-fluid" style="margin-top: 80px;">
	<h1>Industry Customisation</h1>
	<div class="container">
	<div class="row">
	<div class="col-md-8 text-center">
	<table class="table table-bordered">
	<thead>
	<tr>
	<th><center>Values</center></th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Values 1</td>
	</tr>
	<tr>
	<td>Values 2</td>
	</tr>
	<tr>
	<td>Values 3</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	<div id="Pck-3"></div>
	<div id="" class="container-fluid" style="margin-top: 80px;">
	<h1>Opportunity Stage Customisation</h1>
	<div class="container">
	<div class="row">
	<div class="col-md-8 text-center">
	<table class="table table-bordered">
	<thead>
	<tr>
	<th><center>Values</center></th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>Values 1</td>
	</tr>
	<tr>
	<td>Values 2</td>
	</tr>
	<tr>
	<td>Values 3</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>

	<div id="section41" class="container-fluid">
	<h1>Number of chatter groups</h1>
	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	</div>

	<div id="section42" class="container-fluid">
	<h1>Number of chatter posts</h1>
	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
	</div>

	</body>
	</html>