YUI ButtonMenu in DataTable header

A fiddle to show that menu buttons in DataTable headers do not work

by David Lumm

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/datatable/assets/skins/sam/datatable.css">
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/element/element-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/datasource/datasource-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/get/get-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/datatable/datatable-min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/button/assets/skins/sam/button.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/menu/assets/skins/sam/menu.css">
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/container/container_core-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/menu/menu-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/yui/2.9.0/build/button/button-min.js"></script>
<div id="markup">
  <table id="accounts">
    <thead>
      <tr>
        <th>Due Date</th>
        <th>Account Number</th>
        <th>Quantity</th>
        <th>Amount Due</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1/23/1999</td>
        <td>29e8548592d8c82</td>
        <td>12</td>
        <td>$150.00</td>
      </tr>
      <tr>
        <td>5/19/1999</td>
        <td>83849</td>
        <td>8</td>
        <td>$60.00</td>
      </tr>
      <tr>
        <td>8/9/1999</td>
        <td>11348</td>
        <td>1</td>
        <td>$34.99</td>
      </tr>
      <tr>
        <td>1/23/2000</td>
        <td>29e8548592d8c82</td>
        <td>10</td>
        <td>$1.00</td>
      </tr>
      <tr>
        <td>4/28/2000</td>
        <td>37892857482836437378273</td>
        <td>123</td>
       ...

CSS

#accounts .yui-skin-sam th.yui-dt-desc div.yui-dt-liner {
  background-position: right 16px bottom -65px;
}

#accounts .yui-skin-sam th.yui-dt-asc div.yui-dt-liner {
  background-position: right 16px bottom -15px;
}

#accounts th .yui-button {
  margin: 0px;
}

#accounts th .yui-menu-button {
  float: right;
}

#accounts th .yui-menu-button button {
  padding-right: 0px;
  padding-left: 12px;
  background-position: 2px center;
  min-height: 1.2em;
}

JavaScript

YAHOO.util.Event.addListener(window, "load", function() {
  YAHOO.example.EnhanceFromMarkup = new function() {
    var myColumnDefs = [{
      key: "due",
      label: "Due Date",
      formatter: YAHOO.widget.DataTable.formatDate,
      sortable: true
    }, {
      key: "account",
      label: "Account Number",
      sortable: true
    }, {
      key: "quantity",
      label: "Quantity",
      formatter: YAHOO.widget.DataTable.formatNumber,
      sortable: true
    }, {
      key: "amount",
      label: "Amount Due",
      formatter: YAHOO.widget.DataTable.formatCurrency,
      sortable: true
    }];

    this.parseNumberFromCurrency = function(sString) {
      // Remove dollar sign and make it a float
      return parseFloat(sString.substring(1));
    };

    this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
    this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
    this.myDataSource.responseSchema = {
      fields: [{
          key: "due",
          parser: "date"
        }, {
          key: "account"
        }, {
          key: "quantity",
          parser: "number"
        }, {
          key: "amount",
          parser: this.parseNumberFromCurrency
        } // point to a custom parser
      ]
    };
    this.myDataSource.doBeforeCallback = function(req, raw, res, cb) {
      console.log("filter", req, raw, res, cb);
      // This is the filter function 
      var data = res.results || [],
        filtered = [],
        i, l;

      if (req) {
      	if(!isNaN(req.filter)) {
          req.filter = req.filter.toLowerCase();
          for (i = 0, l = data.length; i < l; ++i) {
            if (!data[i][req.column].toLowerCase().indexOf(req.filter)) {
              filtered.push(data[i]);
            }
          }
          res.results = filtered;
        }
        console.log("Updated results", res);
      }
      
      return res;
    };

    this.myDataTable = new YAHOO.widget.DataTable("markup",...