public/assets/datatables-fixedcolumns-3-2-1/examples/initialisation/size_fixed.xml

   1 <?xml version="1.0" encoding="UTF-8" ?>
   2 <dt-example table-type="html-wide" table-class="stripe row-border order-column" order="8">
   3
   4 <css lib="datatables fixedcolumns">
   5         /* Ensure that the demo table scrolls */
   6         th, td { white-space: nowrap; }
   7         div.dataTables_wrapper {
   8                 margin: 0 auto;
   9         }
  10
  11         div.container {
  12                 width: 80%;
  13         }
  14 </css>
  15 <js lib="jquery datatables fixedcolumns">
  16 <![CDATA[
  17 $(document).ready(function() {
  18         var table = $('#example').removeAttr('width').DataTable( {
  19                 scrollY:        "300px",
  20                 scrollX:        true,
  21                 scrollCollapse: true,
  22                 paging:         false,
  23                 columnDefs: [
  24                         { width: 200, targets: 0 }
  25                 ],
  26                 fixedColumns: true
  27         } );
  28 } );
  29 ]]>
  30 </js>
  31
  32 <title lib="FixedColumns">Assigned column width</title>
  33
  34 <info><![CDATA[
  35
  36 The columns that are fixed in place by FixedColumns take their width from the parent DataTable. As such, the width of the column can be controlled using the `dt-init columns.width` option.
  37
  38 This example shows the first column being set to `width: 200px` (note that this is not pixel perfect in a table, the browser will make some adjustments!), a width that is reflected in the fixed column. Resize the browser window horizontally and you will be able to see that the fixed column retains its width while the scrolling viewport and the table resize.
  39
  40 ]]></info>
  41
  42 </dt-example>