title: How to render a YUI datatable?
body: <p>Following <a href="http://yuilibrary.com/yui/docs/datatable/" rel="nofollow noreferrer">the documentation of the YUI DataTable control</a> i've inferred the following code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;HTML&gt;
  &lt;HEAD&gt;
      &lt;SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"&gt;&lt;/SCRIPT&gt;
      &lt;SCRIPT type="text/javascript"&gt;
          // Create a new YUI instance and populate it with the required modules.
          YUI().use('datatable', function (Y) {
              // Columns must match data object property names
              var data = [
                  { id: "ga-3475", name: "gadget",   price: "$6.99", cost: "$5.99" },
                  { id: "sp-9980", name: "sprocket", price: "$3.75", cost: "$3.25" },
                  { id: "wi-0650", name: "widget",   price: "$4.25", cost: "$3.75" }
              ];
  
              var table = new Y.DataTable({
                  columns: ["id", "name", "price"],
                  data: data,
  
                  // Optionally configure your table with a caption
                  caption: "My first DataTable!",
  
                  // and/or a summary (table attribute)
                  summary: "Example DataTable showing basic instantiation configuration"
              });
              table.render("#example");
          });
      &lt;/SCRIPT&gt;
  &lt;/HEAD&gt;
  &lt;BODY&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>The insulting thing is that the documentation says:</p>
  
  <blockquote>
    <p>This code produces this table:</p>
    
    <p><img src="https://i.stack.imgur.com/COVBM.png" alt="enter image description here"></p>
  </blockquote>
  
  <p>except that this code produces this table:</p>
  
  <p><img src="https://i.stack.imgur.com/53pUn.png" alt="enter image description here"></p>
  
  <p>So obviously i'm missing something pretty fundamental about how to render a YUI data table. What is the correct way to render a YUI data table? </p>
  
  <p><strong>Q.</strong> How to render a YUI datatable?</p>
  
  <hr>
  
  <p><a href="http://yuilibrary.com/yui/docs/datatable/datatable-basic.html" rel="nofollow noreferrer">Another page</a> mentions including a <code>&lt;div&gt;</code>, changing my <code>&lt;BODY&gt;</code> from empty to:</p>
  
  <pre><code>&lt;BODY&gt;
      &lt;div class="example yui3-skin-sam"&gt;
          &lt;div id="simple"&gt;&lt;/div&gt;
  
          &lt;div id="labels"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/BODY&gt;
  </code></pre>
  
  <p>but does not change the look of the control.</p>