5 <link rel=
"shortcut icon" type=
"image/ico" href=
"http://www.datatables.net/favicon.ico">
6 <meta name=
"viewport" content=
"initial-scale=1.0, maximum-scale=2.0">
7 <link rel=
"stylesheet" type=
"text/css" href=
"../../../../examples/resources/syntax/shCore.css">
8 <link rel=
"stylesheet" type=
"text/css" href=
"../../../../examples/resources/demo.css">
9 <script type=
"text/javascript" language=
"javascript" src=
"../../../../examples/resources/syntax/shCore.js"></script>
10 <script type=
"text/javascript" language=
"javascript" src=
"../../../../examples/resources/demo.js"></script>
12 <title>Responsive examples - Child row control
</title>
15 <body class=
"dt-example">
16 <div class=
"container">
18 <h1>Responsive example
<span>Child row control
</span></h1>
21 <p>When a column is removed from display by Responsive, the data is still available in the table and can be displayed in a DataTables
<em>child row
</em> (see
22 <a href=
"//datatables.net/reference/api/row().child()"><code class=
"api" title=
"DataTables API method">row().child()
<span>DT
</span></code></a>). By default
23 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
26 <p>Responsive has a number of options for display of the child rows:
</p>
29 <li>If child row display is enabled:
<a href=
"//datatables.net/extensions/responsive/reference/option/responsive.details"><code class=
"option" title=
30 "Responsive initialisation option">responsive.details
<span>R
</span></code></a></li>
31 <li>How the show / hide control is displayed:
<a href=
"//datatables.net/extensions/responsive/reference/option/responsive.details.type"><code class=
"option"
32 title=
"Responsive initialisation option">responsive.details.type
<span>R
</span></code></a></li>
33 <li>How the child row is rendered:
<a href=
"//datatables.net/extensions/responsive/reference/option/responsive.details.renderer"><code class=
"option" title=
34 "Responsive initialisation option">responsive.details.renderer
<span>R
</span></code></a></li>
37 <p>This section shows examples of these options being used.
</p>
44 <div class=
"gradient"></div>
48 <div class=
"toc-group">
49 <h3><a href=
"./index.html">Child rows
</a></h3>
51 <li><a href=
"./disable-child-rows.html">Disable child rows
</a></li>
52 <li><a href=
"./column-control.html">Column controlled child rows
</a></li>
53 <li><a href=
"./right-column.html">Column control - right
</a></li>
54 <li><a href=
"./whole-row-control.html">Whole row child row control
</a></li>
55 <li><a href=
"./custom-renderer.html">Custom child row renderer
</a></li>
60 <div class=
"epilogue">
61 <p>Please refer to the
<a href=
"http://www.datatables.net">DataTables documentation
</a> for full information about its API properties and methods.
<br>
62 Additionally, there are a wide range of
<a href=
"http://www.datatables.net/extras">extras
</a> and
<a href=
"http://www.datatables.net/plug-ins">plug-ins
</a>
63 which extend the capabilities of DataTables.
</p>
65 <p class=
"copyright">DataTables designed and created by
<a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd
</a> © 2007-
2015<br>
66 DataTables is licensed under the
<a href=
"http://www.datatables.net/mit">MIT license
</a>.
</p>