Zach’s ugly mug (his face) Zach Leatherman

Enlarging your YUI DataTable in 29 Seconds or Less!

August 28, 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!

This is an updated version of the Enlarging your YUI DataTable in 30 Seconds or Less! modified for the newly released YUI 2.3.0.

This method adds an extra row to the YUI DataTable when a row is selected, below the selected row. This allows the developer to add additional content that might not be applicable to the column constraints of a typical datatable or grid and allow that content be displayed more fluidly inside a single row spanning all of the viewable columns.

I know you’re anxious for an example, so let’s see some screenshots of a simple YUI DataTable:

Default DataTable

Turns into this when a row is selected:

Row selected

Click any of the above images for a live example.

Any HTML can be added. You can make an AJAX call and put the result into the newly inserted row (that will be left as an exercise for the reader [you]).

I know you’re asking yourself, how the hell do I add this to my YUI DataTable? WHERE IS THE DAMN SOURCE CODE? Calm down, you know I’m getting to it.

How To

  1. Include the ymod-tableExtension-2.3.0.js file.
  2. Create your DataTable. If you don’t know how to do this, go to the official documentation for help and examples.
  3. Make sure your DataTable has the selectionMode parameter set to ‘single’. This can be achieved by passing in { selectionMode: 'single' } in as the 4th argument to the DataTable constructor.
  4. Use the following code to setup your table extension:

// myDataTable is your DataTable object YAHOO.ymod.tableExtension.setup( myDataTable, function( contentDiv ) { var myContent = ''; var selectedRows = this.getSelectedRows(); if( selectedRows.length > 0 ) { myContent += 'Do something based on
the row that is selected!'; } contentDiv.innerHTML = myContent; } );

The setup function is basically a convenience method to add the event listeners. You can just as easily do this yourself manually:

// myDataTable is your DataTable object. myDataTable.subscribe( 'headerRowMousedownEvent', YAHOO.ymod.tableExtension.cleanUp ); myDataTable.subscribe( 'rowClickEvent', YAHOO.ymod.tableExtension.selectRow, function( contentDiv ) { /* same as function appears above */ } );

CSS

Here’s some CSS hooks to do some styling. The expanded row will include the yui-dt-selected class by default.

/* The original table row clicked on / tr.ymod-expanded {} / Row containing the expanded content / tr.ymod-expandedData {} / Div containing the expanded content inside the row */ tr.ymod-expandedData div.ymod-expandedDataContent { background-color: navy; padding: 2px 6px; }

Limitations

  • Resorting removes the expanded content. Otherwise it was messing with the sort.
  • It only works with single row selection mode, which allows only one row to be selected at a time. This is not the default (standard), which allows multiple rows to be selected with SHIFT or CTRL. Feel free to modify this to work with other modes!

Download ymod-tableExtension-2.3.0.js


Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/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 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

3 Comments
  1. umesh Disqus

    24 Oct 2007
    HiWIth regards to YUI Data table expand, i am using your ymod-tableextensionI hv a query , instead of displaying " Do something based onthe row that is selected" i want to display one of the fields of the same record .How can i do it,Thanks in advance ...
  2. Sean Disqus

    15 Nov 2007
    Nice tool... but I wanted to use pagination and that just kills it. Tried adding event listeners to close the expansion before changing the page, to no avail. The next page shows a blank line and when you click the blank line it disappears, and then the clicking gets funky for the rest until you just refresh. So I imagine I might still have the problem while using an ajax based pagination as well.
  3. Miguel Angel Disqus

    06 Nov 2008
    Hello, great job, but I have a question, I'm trying to add another yui table when the row expands, but I can't, somebody knows how make this possible?thanks
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)