Yahoo UIの場合、JSONをはじめとしたXML・テキスト形式での表示方法が用意されている。今回はTreeViewと同様、<table>マークアップを使用した実装方法を紹介する。

HTMLファイル - grid-yui.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>DataTable / Yahoo UI</title>
<link rel="stylesheet" type="text/css" href="./js/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="./js/yui/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="./js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="./js/yui/build/element/element-beta-min.js"></script>

<script type="text/javascript" src="./js/yui/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="./js/yui/build/datatable/datatable-min.js"></script>

<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady
(
    function()
    {
        YAHOO.example.EnhanceFromMarkup = new function()
        {
            // 項目の定義
            var columns =
            [
                { key:'Name', label:'Name', sortable:true },
                { key:'Version', label:'Version',sortable:true }
            ];

            // データソースとしてテーブルを指定
            this.dataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get('accounts'));
            this.dataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
            this.dataSource.responseSchema =
            {
                fields:
                [
                        { key:'Name' },
                        { key:'Version' }
                ]
            };

            // データテーブル作成
            new YAHOO.widget.DataTable
            (
                'grid', columns, this.dataSource
            );
        };

    }
);
-->
</script>
</head>

<body class="yui-skin-sam">

<h1>DataTable / Yahoo UI</h1>

<div id="grid">
    <table id="accounts">
        <thead>
            <tr>
                <th>Name</th>
                <th>Version</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>jQuery</td>
                <td>1.2.6</td>
            </tr>
            <tr>
                <td>YUI</td>
                <td>2.6.0</td>
            </tr>
            <tr>
                <td>Dojo</td>
                <td>1.2</td>
            </tr>
        </tbody>
    </table>
</div>

</body>

</html>

Firefoxでの動作イメージ。Nameでソートをかけている

Internet Explorerでの動作イメージ。Versionでソートをかけている

クライアントサイドでのソートも可能だ。外部とのデータのやり取りを行う必要がない場合は、マークアップを使用した実装がシンプルで便利だろう。ただしマークアップの場合、そのままではほかの実装方法と比較してセルのリサイズができないなどといった点があるので注意してほしい。Yahoo UIはこのほかにもページャといったうれしい機能が用意されている。