Update examples for rewritten FixedHeader

Author: AllanJard

examples/bootstrap.xml

@@ -1,16 +1,12 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <dt-example table-type="html" order="0">
 
-<title lib="FixedHeader">FixedHeader examples</title>
+<title lib="FixedHeader">Examples index</title>
 
 <js lib="jquery" />
 <info><![CDATA[
 
-At times it can be useful to ensure that column titles will remain always visible on a table, even when a user scrolls down a table. The FixedHeader plug-in for DataTables will float the `dt-tag thead` element above the table at all times to help address this issue. The column titles also remain click-able to perform sorting. Key features include:
-
-* Fix the header to the top of the window
-* Ability to fix the footer and left / right columns as well
-* z-Index ordering options
+The following examples show how FixedHeader can be used via its configuration and styling options.
 
 ]]></info>
 

examples/colreorder.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html" order="2">
+
+<css lib="datatables fixedheader colreorder" />
+<js lib="jquery datatables fixedheader colreorder">
+<![CDATA[
+$(document).ready(function() {
+	var table = $('#example').DataTable( {
+		fixedHeader: true
+	} );
+
+	new $.fn.dataTable.ColReorder( table );
+} );
+]]>
+</js>
+
+<title lib="FixedHeader">ColReorder integration</title>
+
+<info><![CDATA[
+
+[ColReorder](https://datatables.net/extensions/colreorder) is an extension for DataTables that provides the ability to click and drag column header cells, reordering the columns as it does so.
+
+FixedHeader requires no special initialisation when operating with ColReorder - simply initialise both on the table.
+
+]]></info>
+
+</dt-example>

examples/foundation.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html" order="0">
+
+<title lib="FixedHeader">Integration with other DataTables extensions</title>
+
+<js lib="jquery" />
+<info><![CDATA[
+
+FixedHeader will work "out of the box" with most other DataTables extensions. The following examples show it being used with various other extensions.
+
+]]></info>
+
+</dt-example>

examples/header_footer.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<dt-example table-type="html" table-class="display nowrap" order="6">
+<dt-example table-type="html" table-class="display nowrap" order="1">
 
 <css lib="datatables fixedheader responsive" />
 <js lib="jquery datatables fixedheader responsive">

examples/index.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html" order="2">
+
+<css lib="datatables fixedheader" />
+<js lib="jquery datatables fixedheader">
+<![CDATA[
+$(document).ready(function() {
+	var table = $('#example').DataTable( {
+		fixedHeader: {
+			header: true,
+			footer: true
+		}
+	} );
+} );
+]]>
+</js>
+
+<title lib="FixedHeader">Header and footer fixed</title>
+
+<info><![CDATA[
+
+FixedHeader provides the ability to fix in place the header and footer of the table. These are controlled by the options `fh-init fixedHeader.header` and `fh-init fixedHeader.footer`. Either can be optionally enabled, or as is the case in this example, both enabled.
+
+]]></info>
+
+</dt-example>

examples/integration/colreorder.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html" order="0">
+
+<title lib="FixedHeader">Initialisation and options</title>
+
+<js lib="jquery" />
+<info><![CDATA[
+
+The following examples show how FixedHeader can be enabled on a DataTable and its various options used.
+
+]]></info>
+
+</dt-example>