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:

<table class="yui-dt-table"> <thead> <tr class="yui-dt-first yui-dt-last"> <th class="yui-dt-col-[key] yui-dt-sortable yui-dt-first yui-dt-last"> <div class="yui-dt-header"> <span class="yui-dt-label"> <a class="yui-dt-sortable">Header Label</a> </span> <span class="yui-dt-resizer"></span> </div> </th> ... </tr> </thead> <tbody> <tr class="yui-dt-first yui-dt-last"> <td class="yui-dt-first yui-dt-last yui-dt-loading yui-dt-empty">Message</td> </tr> </tbody> <tbody class="yui-dt-body"> <tr class="yui-dt-first yui-dt-even"> <td class="yui-dt-col-[key] yui-dt-first">Data</td> ... <td class="yui-dt-col-[key] yui-dt-last">Data</td> </tr> ... <tr class="yui-dt-last yui-dt-odd"> ... </tr> </tbody> </table>

Core CSS:

/*foundational css*/ .yui-dt-table th, .yui-dt-table td { overflow:hidden; } th .yui-dt-header { position:relative; } th .yui-dt-label { position:relative; } th .yui-dt-resizer { position:absolute; margin-right:-6px; right:0; bottom:0; width:6px; height:100%; cursor:w-resize; cursor:col-resize; } /* foundational scrolling css */ .yui-dt-scrollable { *overflow-y:auto; /* for ie */ } .yui-dt-scrollable thead { display:block; /* for safari and opera */ } .yui-dt-scrollable thead tr { position:relative; /* for ie */ } .yui-dt-scrollbody { display:block; /* for safari and opera */ overflow:auto; /* for gecko */ } .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:1px solid #7F7F7F;} .yui-skin-sam .yui-dt-table caption {padding-bottom:1em;text-align:left;} .yui-skin-sam .yui-dt-table th { background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; /* header gradient */ } .yui-skin-sam .yui-dt-table th, .yui-skin-sam .yui-dt-table th a { font-weight:normal;text-decoration:none;color:#000; /* header text */ vertical-align:bottom; } .yui-skin-sam .yui-dt-table th, .yui-skin-sam .yui-dt-table td { padding:4px 10px 4px 10px; /* cell padding */ border-right:1px solid #CBCBCB; /* inner column border */ } .yui-skin-sam .yui-dt-table td { white-space:nowrap; text-align:left; } .yui-skin-sam .yui-dt-table th.yui-dt-last, .yui-skin-sam .yui-dt-table td.yui-dt-last { border-right:1px solid #7F7F7F; /* outer border */ } .yui-skin-sam .yui-dt-list td { border-right:none; /* disable inner column border in list mode */ } .yui-skin-sam .yui-dt-table thead { border:1px solid #989898; /* outer border */ } .yui-skin-sam .yui-dt-table tbody { border-left:1px solid #7F7F7F;border-right:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F; /* outer border */ } /* messaging */ .yui-skin-sam .yui-dt-loading { background-color:#FFF; } .yui-skin-sam .yui-dt-loading { background-color:#FFF; } /* sortable columns */ .yui-skin-sam .yui-dt-sortable { cursor:pointer; } .yui-skin-sam th.yui-dt-sortable { padding-right:5px; /* room for arrow */ } .yui-skin-sam th.yui-dt-sortable .yui-dt-label { margin-right:15px; /* room for arrow */ } .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-asc .yui-dt-header { background:url(dt-arrow-up.png) no-repeat right; /* sorted header gradient */ /*background-image: url('../img/arrow_up.gif'); background-repeat:no-repeat; background-position:right; sorted header icon */ } .yui-skin-sam th.yui-dt-desc .yui-dt-header { background:url(dt-arrow-dn.png) no-repeat right; /* sorted header gradient */ /*background-image: url('../img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right; /*sorted header icon */ } /* 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 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 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 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 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-dt-paginator { display:block;margin:6px 0;white-space:nowrap; } .yui-skin-sam .yui-dt-paginator .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 .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-dt-page { border:1px solid #CBCBCB; padding:2px 6px; text-decoration:none; }

### 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
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination
- Server-side Sorting
- Server-side Pagination and Sorting, with Browser History Manager
- Fixed Scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Context Menu Integration
- Complex Example of Multiple Features
- Datatable with Autocomplete
- Skinning Model

### More DataTable Control (beta) Resources:

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

Copyright © 2007 Yahoo! Inc. All rights reserved.

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