Zach’s ugly mug (his face) Zach Leatherman

Faster YUI DataTable with 5 Lines of Code

December 27, 2007

Warning

This article is old and may contain information that is outdated, irrelevant, or—dare I say it—no longer accurate. Read with care!

Holy Reflows Batman! The typical usage of a DataTable in the Yahoo User Interface JavaScript library involves passing a string into the constructor signifying the ID attribute of the container you want to attach the DataTable to. However, the YUI DataTable loves the DOM and creating nodes individually using DOM methods. Normally that’d be fine, but one of the first things it does in the constructor is create the table element and attach it to the live DOM. This is a no-no. Now, every time they append a new node (for a new row or a new cell inside of a row), it causes a reflow in the browser! What does this mean? Really bad lag when you insert 40 or 50 rows. Recognize this piece of code?

var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource);

Straight from the docs. No no no!

Instead, you should pass in an unattached DOM node instead of a string!

Try this code on for size:

var myDataTable = new YAHOO.widget.DataTable(document.createElement('div'), myColumnDefs, myDataSource);
myDataTable.subscribe('initEvent',function() {
	// CHANGE THIS -- match the id of the container you want.
	var d = document.getElementById('myContainer');
	// remove previous DataTables
	while(d.firstChild) { d.removeChild(d.firstChild); };
	d.appendChild(this._elContainer); });
}

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

1 Comment
  1. Zach Leatherman Disqus

    03 Jan 2008
    Outstanding bug that will be addressed in the next version:"initEvent cannot be listened to for local sources"http://sourceforge.net/trac...Keep that in mind when using this approach.
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)