Yahoo! Developer Network Home - Help

YDN Site Search

# YUI Library Examples: DataTable Control (beta): Skinning Model

# DataTable Control (beta): Skinning Model

This example demonstrates the CSS applied to an implementation of the DataTable control that uses the "Sam Skin". You can read more about the general approach to skinning YUI components in this in-depth article. Change any or all of the skin CSS (but not the core CSS) for a more customized look and feel.

## Sample Code

DOM Overview:

<div class="yui-dt"> <div class="yui-dt-hd"> <table> <caption>[caption]</caption> <thead> <tr class="yui-dt-first yui-dt-last"> <th class="yui-dt-resizeable yui-dt-sortable yui-dt-first yui-dt-hidden"> <div class="yui-dt-liner yui-dt-col-[key]"> <span class="yui-dt-label"> <a href="yui-dt0-sort0-ascending" title="Click to sort ascending" class="yui-dt-sortable">[label]</a> </span> <div class="yui-dt-resizer"></div> </div> </th> ... <th class="yui-dt-resizeable yui-dt-sortable yui-dt-last"> <div class="yui-dt-liner yui-dt-col-[key]"> <span class="yui-dt-label"> <a href="yui-dt0-sort4-ascending" title="Click to sort ascending" class="yui-dt-sortable">[label]</a> </span> <div class="yui-dt-resizer"></div> </div> </th> </tr> </thead> </table> </div> <div class="yui-dt-bd"> <table> <thead> <tr> <th> <div> <span>[label]</span> </div> </th> .... <th> <div> <span>[label]</span> </div> </th> </tr> </thead> <tbody> <tr class="yui-dt-even yui-dt-first yui-dt-selected"> <td class="yui-dt-first yui-dt-hidden"> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeabl"> [data] </div> </td> <td > <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeabl"> [data] </div> </td> <td> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> <td> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> <td class="yui-dt-last"> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> </tr> ... <tr class="yui-dt-odd yui-dt-last"> <td class="yui-dt-first yui-dt-hidden"> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> <td> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> <td> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> <td> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> <td class="yui-dt-last"> <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable"> [data] </div> </td> </tr> </tbody> <tbody> <tr class="yui-dt-first yui-dt-last"> <td class="yui-dt-first yui-dt-last"> <div class="yui-dt-liner yui-dt-loading"> Loading data... </div> </td> </tr> </tbody> </table> </div> </div>

Core CSS:

/* foundational CSS */ .yui-dt { border:1px solid transparent; } .yui-dt-noop { border:none; } .yui-dt-liner { overflow:hidden; } /* a11y headers */ .yui-dt-bd thead tr, .yui-dt-bd thead th { position:absolute; left:-1500px; } /* draggable columns */ .yui-dt-draggable { cursor: move; } .yui-dt-coltarget { position: absolute; z-index: 999; } /* resizeable columns */ .yui-dt-hd { zoom:1; } th.yui-dt-resizeable .yui-dt-liner { position:relative; } .yui-dt-resizer { position:absolute; right:0; bottom:0; height:100%; cursor:e-resize; cursor:col-resize; } .yui-dt-resizerproxy { visibility:hidden; position:absolute; z-index:9000; } /* hidden columns */ .yui-skin-sam th.yui-dt-hidden .yui-dt-liner, .yui-skin-sam td.yui-dt-hidden .yui-dt-liner { margin:0; padding:0; overflow:hidden; white-space:nowrap; } /* vertical and horizontal scrolling */ .yui-dt-scrollable .yui-dt-bd { overflow:auto; } .yui-dt-scrollable .yui-dt-hd { overflow:hidden; position:relative; /* for ie overflow bug http://rowanw.com/bugs/overflow_relative.htm */ } /* editing */ .yui-dt-editor { position:absolute;z-index:9000; }

Skin CSS:

/* basic skin styles */ .yui-skin-sam .yui-dt table {margin:0;padding:0;font-family:arial;font-size:inherit;border-collapse:collapse;border-spacing:0;} .yui-skin-sam .yui-dt thead {border-spacing:0;} /* for safari bug */ .yui-skin-sam .yui-dt caption {padding-bottom:1em;text-align:left;} /*outer border */ .yui-skin-sam .yui-dt-hd table {border-left:1px solid #7F7F7F;border-top:1px solid #7F7F7F;border-right:1px solid #7F7F7F;} .yui-skin-sam .yui-dt-bd table {border-left:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F;border-right:1px solid #7F7F7F;} .yui-skin-sam .yui-dt-scrollable .yui-dt-hd table {border:0px;} .yui-skin-sam .yui-dt-scrollable .yui-dt-bd table {border:0px;} .yui-skin-sam .yui-dt-scrollable .yui-dt-hd {border-left:1px solid #7F7F7F;border-top:1px solid #7F7F7F;border-right:1px solid #7F7F7F;} .yui-skin-sam .yui-dt-scrollable .yui-dt-bd {border-left:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F;border-right:1px solid #7F7F7F;} .yui-skin-sam .yui-dt th { background:#D8D8DA url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; /* header gradient */ } .yui-skin-sam .yui-dt th, .yui-skin-sam .yui-dt th a { font-weight:normal;text-decoration:none;color:#000; /* header text */ vertical-align:bottom; } .yui-skin-sam .yui-dt th { margin:0;padding:0; border:none; border-right:1px solid #CBCBCB;/* inner column border */ } .yui-skin-sam .yui-dt-liner { margin:0;padding:0; padding:4px 10px 4px 10px; /* cell padding */ } .yui-skin-sam .yui-dt-coltarget { width: 5px; background-color: red; } .yui-skin-sam .yui-dt td { margin:0;padding:0; border:none; border-right:1px solid #CBCBCB; /* inner column border */ text-align:left; } .yui-skin-sam .yui-dt-list td { border-right:none; /* disable inner column border in list mode */ } .yui-skin-sam .yui-dt-resizer { width:6px; } /* messaging */ .yui-skin-sam .yui-dt-loading { background-color:#FFF; } .yui-skin-sam .yui-dt-empty { background-color:#FFF; } .yui-skin-sam .yui-dt-error { background-color:#FFF; } /* sortable columns */ .yui-skin-sam thead .yui-dt-sortable { cursor:pointer; } .yui-skin-sam th.yui-dt-asc, .yui-skin-sam th.yui-dt-desc { background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */ } .yui-skin-sam th.yui-dt-sortable .yui-dt-label { margin-right:10px; } .yui-skin-sam th.yui-dt-asc .yui-dt-liner { background:url(dt-arrow-up.png) no-repeat right; /* sorted header gradient */ } .yui-skin-sam th.yui-dt-desc .yui-dt-liner { background:url(dt-arrow-dn.png) no-repeat right; /* sorted header gradient */ } /* editing */ .yui-dt-editable { cursor:pointer; } .yui-dt-editor { text-align:left; background-color:#F2F2F2; border:1px solid #808080; padding:6px; } .yui-dt-editor label { padding-left:4px;padding-right:6px; } .yui-dt-editor .yui-dt-button { padding-top:6px;text-align:right; } .yui-dt-editor .yui-dt-button button { background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; border:1px solid #999; width:4em;height:1.8em; margin-left:6px; } .yui-dt-editor .yui-dt-button button.yui-dt-default { background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1400px; background-color: #5584E0; border:1px solid #304369; color:#FFF } .yui-dt-editor .yui-dt-button button:hover { background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1300px; color:#000; } .yui-dt-editor .yui-dt-button button:active { background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1700px; color:#000; } /* striping */ .yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */ .yui-skin-sam tr.yui-dt-odd { background-color:#EDF5FF; } /* light blue */ .yui-skin-sam tr.yui-dt-even td.yui-dt-asc, .yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */ .yui-skin-sam tr.yui-dt-odd td.yui-dt-asc, .yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#DBEAFF; } /* dark blue sorted */ /* disable striping in list mode */ .yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */ .yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */ .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc, .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */ .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc, .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */ /* highlighting */ .yui-skin-sam th.yui-dt-highlighted, .yui-skin-sam th.yui-dt-highlighted a { background-color:#B2D2FF; /* med blue hover */ } .yui-skin-sam tr.yui-dt-highlighted, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc, .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc, .yui-skin-sam tr.yui-dt-even td.yui-dt-highlighted, .yui-skin-sam tr.yui-dt-odd td.yui-dt-highlighted { cursor:pointer; background-color:#B2D2FF; /* med blue hover */ } /* enable highlighting in list mode */ .yui-skin-sam .yui-dt-list th.yui-dt-highlighted, .yui-skin-sam .yui-dt-list th.yui-dt-highlighted a { background-color:#B2D2FF; /* med blue hover */ } .yui-skin-sam .yui-dt-list tr.yui-dt-highlighted, .yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-asc, .yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-desc, .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-highlighted, .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-highlighted { cursor:pointer; background-color:#B2D2FF; /* med blue hover */ } /* selection */ .yui-skin-sam th.yui-dt-selected, .yui-skin-sam th.yui-dt-selected a { background-color:#446CD7; /* bright blue selected cell */ } .yui-skin-sam tr.yui-dt-selected td, .yui-skin-sam tr.yui-dt-selected td.yui-dt-asc, .yui-skin-sam tr.yui-dt-selected td.yui-dt-desc { background-color:#426FD9; /* bright blue selected row */ color:#FFF; } .yui-skin-sam tr.yui-dt-even td.yui-dt-selected, .yui-skin-sam tr.yui-dt-odd td.yui-dt-selected { background-color:#446CD7; /* bright blue selected cell */ color:#FFF; } /* enable selection in list mode */ .yui-skin-sam .yui-dt-list th.yui-dt-selected, .yui-skin-sam .yui-dt-list th.yui-dt-selected a { background-color:#446CD7; /* bright blue selected cell */ } .yui-skin-sam .yui-dt-list tr.yui-dt-selected td, .yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-asc, .yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-desc { background-color:#426FD9; /* bright blue selected row */ color:#FFF; } .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-selected, .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-selected { background-color:#446CD7; /* bright blue selected cell */ color:#FFF; } /* pagination */ .yui-skin-sam .yui-pg-container, .yui-skin-sam .yui-dt-paginator { display:block;margin:6px 0;white-space:nowrap; } .yui-skin-sam .yui-pg-first, .yui-skin-sam .yui-pg-last, .yui-skin-sam .yui-pg-current-page, .yui-skin-sam .yui-dt-first, .yui-skin-sam .yui-dt-paginator .yui-dt-last, .yui-skin-sam .yui-dt-paginator .yui-dt-selected { padding:2px 6px; } .yui-skin-sam a.yui-pg-first, .yui-skin-sam a.yui-pg-previous, .yui-skin-sam a.yui-pg-next, .yui-skin-sam a.yui-pg-last, .yui-skin-sam a.yui-pg-page, .yui-skin-sam .yui-dt-paginator a.yui-dt-first, .yui-skin-sam .yui-dt-paginator a.yui-dt-last { text-decoration:none; } .yui-skin-sam .yui-dt-paginator .yui-dt-previous, .yui-skin-sam .yui-dt-paginator .yui-dt-next { display:none; } .yui-skin-sam a.yui-pg-page, .yui-skin-sam a.yui-dt-page { border:1px solid #CBCBCB; padding:2px 6px; text-decoration:none; background-color:#fff } .yui-skin-sam .yui-pg-current-page, .yui-skin-sam .yui-dt-selected { border:1px solid #fff; background-color:#fff; } .yui-skin-sam .yui-pg-pages { margin-left:1ex; margin-right:1ex; } .yui-skin-sam .yui-pg-page { margin-right:1px; margin-left:1px; } .yui-skin-sam .yui-pg-first, .yui-skin-sam .yui-pg-previous { margin-right:3px; } .yui-skin-sam .yui-pg-next, .yui-skin-sam .yui-pg-last { margin-left:3px; } .yui-skin-sam .yui-pg-current, .yui-skin-sam .yui-pg-rpp-options { margin-right:1em; margin-left:1em; }

### DataTable Control (beta) Examples:

- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- Textual Data Over XHR
- Local XML Data
- Adding and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model
- Configuring the Paginator
- Complex Application (included with examples for Layout Manager (beta))

### More DataTable Control (beta) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings