How to render a YUI datatable?

0
votes

Following the documentation of the YUI DataTable control i've inferred the following code:

<!DOCTYPE HTML>
<HTML>
<HEAD>
    <SCRIPT type="text/javascript" src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></SCRIPT>
    <SCRIPT type="text/javascript">
        // 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");
        });
    </SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

The insulting thing is that the documentation says:

This code produces this table:

enter image description here

except that this code produces this table:

enter image description here

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?

Q. How to render a YUI datatable?

Another page mentions including a <div>, changing my <BODY> from empty to:

<BODY>
    <div class="example yui3-skin-sam">
        <div id="simple"></div>

        <div id="labels"></div>
    </div>
</BODY>

but does not change the look of the control.

2
yuiyui-datatable

2 Answers

2
votes

Add class="yui3-skin-sam" in body tag, table css is written corresponding to this class.

1
votes

Move the <script>s to the bottom of the <body>, or at least after the <div> that will contain the DataTable. That will avoid a race condition where the scripts may be loaded before the DOM is set up.

render('#example') is telling the DataTable to render into an element with an id of 'example' The markup sample you included has a div with a class of 'example', then two divs with ids 'simple' and 'labels'. You need to make sure you're rendering inside a parent element with class yui3-skin-sam. If you tell a YUI widget to render into an element it can't find, it falls back to rendering it inside the <body>. You can fix this in a few ways:

  • add the class to the <body> tag instead of a <div> (not a bad idea, but you should still fix the render target selector)
  • use a render(?) target selector that matches an element on the page, such as render('.example'), render('#simple'), or render('#labels').

In any case, make sure your render target is inside an element with class="yui3-skin-sam"