Complete examples for Responsive

.git-ignore

@@ -0,0 +1 @@
+.sass-cache

examples/child-rows/column-control.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-details" table-class="display no-wrap" order="2">
+
+<css lib="datatables responsive" />
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		responsive: {
+			details: {
+				type: 'column'
+			}
+		},
+		columnDefs: [ {
+			className: 'control',
+			orderable: false,
+			targets:   0
+		} ],
+		order: [ 1, 'asc' ]
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Column controlled child rows</title>
+
+<info><![CDATA[
+
+Responsive has two built in methods for displaying the controlling element of the child rows; `inline` which is the default option and shows the control in the first column, and `column` which set a _control column_ as the control. The control column is shown only when there is some other column hidden, and is dedicated only to the show / hide control for the rows.
+
+This example shows the `r-init responsive.details.type` option set to `column` to activate the control column. Note that by default the first column is used as the control, so additionally in the initialisation the `dt-init order` and `dt-init columns.orderable` options are used to disable sorting on this column.
+
+]]></info>
+
+</dt-example>
+

examples/child-rows/custom-renderer.xml

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-wide" table-class="display no-wrap" order="5">
+
+<css lib="datatables responsive" />
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		responsive: {
+			details: {
+				renderer: function ( api, rowIdx ) {
+					// Select hidden columns for the given row
+					var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) {
+						var header = $( api.column( cell.column ).header() );
+
+						return '<tr>'+
+								'<td>'+
+									header.text()+':'+
+								'</td> '+
+								'<td>'+
+									api.cell( cell ).data()+
+								'</td>'+
+							'</tr>';
+					} ).toArray().join('');
+
+					return data ?
+						$('<table/>').append( data ) :
+						false;
+				}
+			}
+		}
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Custom child row renderer</title>
+
+<info><![CDATA[
+
+The child row's for a collapsed table in Responsive, by default, show a `-tag ul/li` list of the data from the hidden columns. The `r-init responsive.details.renderer` option provide the ability to create your own custom renderer. It is given two parameters: the DataTables API instance for the table and the row index to use.
+
+This example shows the `dt-api cells()` method being used to select the hidden columns and constructing a table of the data. You could refine the selector to select only certain columns, or show all columns, etc.
+
+]]></info>
+
+</dt-example>
+

examples/child-rows/disable-child-rows.xml

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

examples/child-rows/index.xml

@@ -5,7 +5,15 @@
 
 <info><![CDATA[
 
+When a column is removed from display by Responsive, the data is still available in the table and can be displayed in a DataTables _child row_ (see `dt-api row().child()`). By default Responsive will show child row controls in the first column when the table has been collapsed, allowing the end user to show / hide the information from the hidden columns.
 
+Responsive has a number of options for display of the child rows:
+
+* If child row display is enabled: `r-init responsive.details`
+* How the show / hide control is displayed: `r-init responsive.details.type`
+* How the child row is rendered: `r-init responsive.details.renderer`
+
+This section shows examples of these options being used.
 
 ]]></info>
 

examples/child-rows/right-column.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-details-right" table-class="display no-wrap" order="3">
+
+<css lib="datatables responsive" />
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		responsive: {
+			details: {
+				type: 'column',
+				target: 8
+			}
+		},
+		columnDefs: [ {
+			className: 'control',
+			orderable: false,
+			targets:   8
+		} ]
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Column control - right</title>
+
+<info><![CDATA[
+
+When using the `column` child row control type, Responsive has the ability to use any column or element as the show / hide control for the row details. This is provided through the `r-init responsive.details.target` option, which can be either a column index, or a jQuery selector.
+
+This example shows the last column in the table being used as the control column.
+
+]]></info>
+
+</dt-example>
+

examples/child-rows/whole-row-control.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-details" table-class="display no-wrap" order="4">
+
+<css lib="datatables responsive" />
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		responsive: {
+			details: {
+				type: 'column',
+				target: 'tr'
+			}
+		},
+		columnDefs: [ {
+			className: 'control',
+			orderable: false,
+			targets:   0
+		} ],
+		order: [ 1, 'asc' ]
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Whole row child row control</title>
+
+<info><![CDATA[
+
+When using the `column` details type in Responsive the `r-init responsive.details.target` option provides the ability to control what element is used to show / hide the child rows when the table is collapsed.
+
+This example uses the `tr` selector to have the whole row act as the control.
+
+]]></info>
+
+</dt-example>
+

examples/display-control/auto.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html-wide" table-class="display responsive wo-wrap" order="1">
+
+<css lib="datatables responsive" />
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable();
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Automatic column hiding</title>
+
+<info><![CDATA[
+
+Responsive will automatically detect which columns have breakpoint class names assigned to them for visibility control. If no breakpoint class is found for a column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. This is done by removing columns which cause the table to overflow the viewport, with the columns being removed from the right.
+
+This example shows that simple case. On a desktop browser resize the window horizontally to see columns added and removed on-the-fly. On a tablet or mobile browser, change the screen's orientation.
+
+]]></info>
+
+</dt-example>
+

examples/display-control/classes.xml

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-class="display responsive wo-wrap" order="2">
+
+<css lib="datatables responsive">
+</css>
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": "../../../../examples/ajax/data/objects.txt",
+		"columns": [
+			{ "data": "name" },
+			{ "data": "position" },
+			{ "data": "office" },
+			{ "data": "extn" },
+			{ "data": "start_date" },
+			{ "data": "salary" },
+			{ "data": "extn" }
+		]
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Class control</title>
+
+<info><![CDATA[
+
+You can tell Responsive what columns to want to be visible on different devices through the use of class names on the columns. The breakpoints are horizontal screen resolutions and the defaults are set for common devices:
+
+* `desktop` x >= 1024px
+* `tablet-l` (landscape) 768 <= x < 1024
+* `tablet-p` (portrait) 480 <= x < 768
+* `mobile-l` (landscape) 320 <= x < 480
+* `mobile-p` (portrait) x < 320
+
+You may leave the `-[lp]` option from the end if you wish to just target all tablet or mobile devices. Additionally to may add `min-`, `max-` or `not-` as a prefix to the class name to perform logic operations. For example `not-mobile` would cause a column to appear as visible on desktop and tablet devices, while `min-tablet-l` would require at least a horizontal width of 768 for the browser window to be shown, and be shown at all sizes larger.
+
+Additionally, there are three special class names:
+
+* `all` - Always display
+* `none` - Never display
+* `control` - Used for the `column` `r-init responsive.details.type` option.
+
+Please [refer to the Responsive manual](//datatables.net/extensions/responsive/) for further details of these options.
+
+This example shows the `start date` and `salary` columns visible on a desktop only - `office` and `age` require a tablet, while the `position` column requires a phone in landscape or larger. The `name` column is always visible.
+
+This can be useful if you wish to change the format of the data shown on different devices, for example using a combination of `mobile` and `not-mobile` on two different columns would allow information to be formatted suitable for each device type.
+
+]]></info>
+
+<custom-table>
+	<div id="breakpoint"> </div>
+	<table id="example" class="display responsive" width="100%">
+		<thead>
+			<tr>
+				<th class="all">Name</th>
+				<th class="min-phone-l">Position</th>
+				<th class="min-tablet">Office</th>
+				<th class="min-tablet">Age</th>
+				<th class="desktop">Start date</th>
+				<th class="desktop">Salary</th>
+				<th class="none">Extn.</th>
+			</tr>
+		</thead>
+
+		<tfoot>
+			<tr>
+				<th>Name</th>
+				<th>Position</th>
+				<th>Office</th>
+				<th>Age</th>
+				<th>Start date</th>
+				<th>Salary</th>
+				<th>Extn.</th>
+			</tr>
+		</tfoot>
+	</table>
+</custom-table>
+
+</dt-example>
+

examples/display-control/index.xml

@@ -5,7 +5,12 @@
 
 <info><![CDATA[
 
+Responsive has two basic modes of operation for controlling the visibility of columns at different display sizes. These two modes can be using either separately or together:
 
+* Manually assigned class names for breakpoints - Assign a column a class name to tell Responsive which breakpoint(s) to show it in.
+* Automatically - for columns without a breakpoint class name, it will be automatically removed if there is no room available on screen to show it. Columns are removed from the right, moving left.
+
+This section explores these two options.
 
 ]]></info>
 

examples/display-control/init-classes.xml

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-class="display responsive wo-wrap" order="3">
+
+<css lib="datatables responsive">
+</css>
+<js lib="jquery datatables responsive">
+<![CDATA[
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": "../../../../examples/ajax/data/objects.txt",
+		"columns": [
+			{ "data": "name",       className="all" },
+			{ "data": "position",   className="min-phone-l" },
+			{ "data": "office",     className="min-tablet" },
+			{ "data": "extn",       className="min-tablet" },
+			{ "data": "start_date", className="desktop" },
+			{ "data": "salary",     className="desktop" },
+			{ "data": "extn",       className="none" }
+		]
+	} );
+} );
+
+]]>
+</js>
+
+<title lib="Responsive">Assigned class control</title>
+
+<info><![CDATA[
+
+This example exactly matches the functionality of the [class control example](classes.xml) but in this case the classes are assigned using the `dt-init columns.className` option.
+
+]]></info>
+
+<custom-table>
+	<div id="breakpoint"> </div>
+	<table id="example" class="display responsive" width="100%">
+		<thead>
+			<tr>
+				<th>Name</th>
+				<th>Position</th>
+				<th>Office</th>
+				<th>Age</th>
+				<th>Start date</th>
+				<th>Salary</th>
+				<th>Extn.</th>
+			</tr>
+		</thead>
+
+		<tfoot>
+			<tr>
+				<th>Name</th>
+				<th>Position</th>
+				<th>Office</th>
+				<th>Age</th>
+				<th>Start date</th>
+				<th>Salary</th>
+				<th>Extn.</th>
+			</tr>
+		</tfoot>
+	</table>
+</custom-table>
+
+</dt-example>
+