YUI Library Examples: DataTable Control: Skinning Model
DataTable Control: 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.
Please note that as of version 2.6.0, all state-related CSS classes, such as "yui-dt-resizeable", "yui-dt-sortable", "yui-dt-first", or "yui-dt-odd" are now assigned directly on TH and TD elements, not on liner DIV elements.
Sample Code
DOM Overview:
| 1 | <div id="myContainer" class="yui-dt"> |
| 2 | <div class="yui-dt-mask" style="display: none;"/> |
| 3 | <table summary=""> |
| 4 | <colgroup> |
| 5 | <col/> |
| 6 | <col/> |
| 7 | <col/> |
| 8 | <col/> |
| 9 | <col/> |
| 10 | </colgroup> |
| 11 | <thead> |
| 12 | <tr class="yui-dt-first yui-dt-last"> |
| 13 | <th id="yui-dt0-th-{sanitizedkey}" rowspan="1" colspan="1" class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable yui-dt-first yui-dt-asc"> |
| 14 | <div class="yui-dt-resizerliner"> |
| 15 | <div id="yui-dt0-th-{sanitizedkey}-liner" class="yui-dt-liner"> |
| 16 | <span class="yui-dt-label"> |
| 17 | <a class="yui-dt-sortable" title="Click to sort ascending" href="yui-dt0-href-{sanitizedkey}">Header A</a> |
| 18 | </span> |
| 19 | </div> |
| 20 | <div id="yui-dt0-th-{sanitizedkey}-resizer" class="yui-dt-resizer" style="left: auto; right: 0pt; top: auto; bottom: 0pt; height: 24px;"/> |
| 21 | </div> |
| 22 | </th> |
| 23 | <th id="yui-dt0-th-{sanitizedkey}" rowspan="1" colspan="1" class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 24 | <div class="yui-dt-resizerliner"> |
| 25 | <div id="yui-dt0-th-{sanitizedkey}-liner" class="yui-dt-liner"> |
| 26 | <span class="yui-dt-label"> |
| 27 | <a class="yui-dt-sortable" title="Click to sort descending" href="yui-dt0-href-{sanitizedkey}">Header B</a> |
| 28 | </span> |
| 29 | </div> |
| 30 | <div id="yui-dt0-th-{sanitizedkey}-resizer" class="yui-dt-resizer" style="left: auto; right: 0pt; top: auto; bottom: 0pt; height: 24px;"/> |
| 31 | </div> |
| 32 | </th> |
| 33 | <th id="yui-dt0-th-{sanitizedkey}" rowspan="1" colspan="1" class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 34 | <div class="yui-dt-resizerliner"> |
| 35 | <div id="yui-dt0-th-{sanitizedkey}-liner" class="yui-dt-liner"> |
| 36 | <span class="yui-dt-label"> |
| 37 | <a class="yui-dt-sortable" title="Click to sort ascending" href="yui-dt0-href-{sanitizedkey}">Header C</a> |
| 38 | </span> |
| 39 | </div> |
| 40 | <div id="yui-dt0-th-{sanitizedkey}-resizer" class="yui-dt-resizer" style="left: auto; right: 0pt; top: auto; bottom: 0pt; height: 24px;"/> |
| 41 | </div> |
| 42 | </th> |
| 43 | <th id="yui-dt0-th-{sanitizedkey}" rowspan="1" colspan="1" class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 44 | <div class="yui-dt-resizerliner"> |
| 45 | <div id="yui-dt0-th-{sanitizedkey}-liner" class="yui-dt-liner"> |
| 46 | <span class="yui-dt-label"> |
| 47 | <a class="yui-dt-sortable" title="Click to sort ascending" href="yui-dt0-href-{sanitizedkey}">Header D</a> |
| 48 | </span> |
| 49 | </div> |
| 50 | <div id="yui-dt0-th-{sanitizedkey}-resizer" class="yui-dt-resizer" style="left: auto; right: 0pt; top: auto; bottom: 0pt; height: 24px;"/> |
| 51 | </div> |
| 52 | </th> |
| 53 | <th id="yui-dt0-th-{sanitizedkey}" rowspan="1" colspan="1" class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable yui-dt-last"> |
| 54 | <div class="yui-dt-resizerliner"> |
| 55 | <div id="yui-dt0-th-{sanitizedkey}-liner" class="yui-dt-liner"> |
| 56 | <span class="yui-dt-label"> |
| 57 | <a class="yui-dt-sortable" title="Click to sort ascending" href="yui-dt0-href-{sanitizedkey}">Header E</a> |
| 58 | </span> |
| 59 | </div> |
| 60 | <div id="yui-dt0-th-{sanitizedkey}-resizer" class="yui-dt-resizer" style="left: auto; right: 0pt; top: auto; bottom: 0pt; height: 24px;"/> |
| 61 | </div> |
| 62 | </th> |
| 63 | </tr> |
| 64 | </thead> |
| 65 | <caption> |
| 66 | DataTable Caption |
| 67 | </caption> |
| 68 | <tbody class="yui-dt-message" style="display: none;"> |
| 69 | <tr class="yui-dt-first yui-dt-last"> |
| 70 | <td colspan="5" class="yui-dt-loading"> |
| 71 | <div class="yui-dt-liner"> |
| 72 | Loading... |
| 73 | </div> |
| 74 | </td> |
| 75 | </tr> |
| 76 | </tbody> |
| 77 | <tbody tabindex="0" class="yui-dt-data" style=""> |
| 78 | <tr style="" id="yui-rec0" class="yui-dt-first yui-dt-even"> |
| 79 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable yui-dt-first yui-dt-asc"> |
| 80 | <div class="yui-dt-liner"> |
| 81 | Cell A |
| 82 | </div> |
| 83 | </td> |
| 84 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 85 | <div class="yui-dt-liner"> |
| 86 | Cell B |
| 87 | </div> |
| 88 | </td> |
| 89 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 90 | <div class="yui-dt-liner"> |
| 91 | Cell C |
| 92 | </div> |
| 93 | </td> |
| 94 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 95 | <div class="yui-dt-liner"> |
| 96 | Cell D |
| 97 | </div> |
| 98 | </td> |
| 99 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable yui-dt-last"> |
| 100 | <div class="yui-dt-liner"> |
| 101 | Cell E |
| 102 | </div> |
| 103 | </td> |
| 104 | </tr> |
| 105 | ... |
| 106 | <tr style="" id="yui-rec3" class="yui-dt-last yui-dt-odd"> |
| 107 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable yui-dt-first yui-dt-asc"> |
| 108 | <div class="yui-dt-liner"> |
| 109 | Cell A |
| 110 | </div> |
| 111 | </td> |
| 112 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 113 | <div class="yui-dt-liner"> |
| 114 | Cell B |
| 115 | </div> |
| 116 | </td> |
| 117 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 118 | <div class="yui-dt-liner"> |
| 119 | Cell C |
| 120 | </div> |
| 121 | </td> |
| 122 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable"> |
| 123 | <div class="yui-dt-liner"> |
| 124 | Cell D |
| 125 | </div> |
| 126 | </td> |
| 127 | <td headers="yui-dt0-th-{sanitizedkey} " class="yui-dt0-col-{sanitizedkey} yui-dt-col-{sanitizedkey} yui-dt-sortable yui-dt-resizeable yui-dt-last"> |
| 128 | <div class="yui-dt-liner"> |
| 129 | Cell E |
| 130 | </div> |
| 131 | </td> |
| 132 | </tr> |
| 133 | </tbody> |
| 134 | </table> |
| 135 | </div> |
| view plain | print | ? |
Core CSS:
| 1 | /* foundational CSS */ |
| 2 | |
| 3 | /* mask */ |
| 4 | .yui-skin-sam .yui-dt-mask { |
| 5 | position:absolute; |
| 6 | z-index:9500; |
| 7 | } |
| 8 | |
| 9 | /* scrollable */ |
| 10 | .yui-dt-tmp { |
| 11 | position:absolute; |
| 12 | left:-9000px; |
| 13 | } |
| 14 | |
| 15 | .yui-dt-scrollable .yui-dt-bd { |
| 16 | overflow:auto; |
| 17 | } |
| 18 | .yui-dt-scrollable .yui-dt-hd { |
| 19 | overflow:hidden; |
| 20 | position:relative; /* for ie overflow bug http://rowanw.com/bugs/overflow_relative.htm */ |
| 21 | } |
| 22 | |
| 23 | .yui-dt-scrollable .yui-dt-bd thead tr, |
| 24 | .yui-dt-scrollable .yui-dt-bd thead th { |
| 25 | position:absolute; |
| 26 | left:-1500px; |
| 27 | } |
| 28 | |
| 29 | .yui-dt-scrollable tbody { |
| 30 | -moz-outline:none; |
| 31 | } |
| 32 | |
| 33 | /* draggable columns */ |
| 34 | .yui-dt-draggable { |
| 35 | cursor: move; |
| 36 | } |
| 37 | .yui-dt-coltarget { |
| 38 | position: absolute; |
| 39 | z-index: 999; |
| 40 | } |
| 41 | |
| 42 | /* resizeable columns */ |
| 43 | .yui-dt-hd { |
| 44 | zoom:1; |
| 45 | } |
| 46 | th.yui-dt-resizeable .yui-dt-resizerliner { |
| 47 | position:relative; |
| 48 | } |
| 49 | .yui-dt-resizer { |
| 50 | position:absolute; |
| 51 | right:0; |
| 52 | bottom:0; |
| 53 | height:100%; |
| 54 | cursor:e-resize; |
| 55 | cursor:col-resize; |
| 56 | background-color:#CCC;opacity:0;filter: alpha(opacity=0); /* Bug 1952811: IE transparency z-index */ |
| 57 | } |
| 58 | .yui-dt-resizerproxy { |
| 59 | visibility:hidden; |
| 60 | position:absolute; |
| 61 | z-index:9000; |
| 62 | } |
| 63 | |
| 64 | /* hidden columns */ |
| 65 | th.yui-dt-hidden .yui-dt-liner, |
| 66 | td.yui-dt-hidden .yui-dt-liner, |
| 67 | th.yui-dt-hidden .yui-dt-resizer { |
| 68 | /*TODO: document change from 2.5.2 to 2.6 |
| 69 | margin:0; |
| 70 | padding:0; |
| 71 | white-space:nowrap; |
| 72 | width:1px; |
| 73 | overflow:hidden;*/ |
| 74 | display:none; |
| 75 | } |
| 76 | |
| 77 | /* editing */ |
| 78 | .yui-dt-editor { |
| 79 | position:absolute;z-index:9000; |
| 80 | } |
| view plain | print | ? |
Skin CSS:
| 1 | /* basic skin styles */ |
| 2 | .yui-skin-sam .yui-dt table { |
| 3 | margin:0;padding:0; |
| 4 | font-family:arial;font-size:inherit; |
| 5 | border-collapse:separate;*border-collapse:collapse;border-spacing:0; /* since ie6 and ie7 behave differently */ |
| 6 | border:1px solid #7F7F7F; |
| 7 | } |
| 8 | .yui-skin-sam .yui-dt thead {border-spacing:0;} /* for safari bug */ |
| 9 | |
| 10 | .yui-skin-sam .yui-dt caption { |
| 11 | color:#000000; |
| 12 | font-size:85%; |
| 13 | font-weight:normal; |
| 14 | font-style:italic; |
| 15 | line-height:1; |
| 16 | padding:1em 0pt; |
| 17 | text-align:center; |
| 18 | } |
| 19 | |
| 20 | .yui-skin-sam .yui-dt th { |
| 21 | background:#D8D8DA url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; /* header gradient */ |
| 22 | } |
| 23 | .yui-skin-sam .yui-dt th, |
| 24 | .yui-skin-sam .yui-dt th a { |
| 25 | font-weight:normal;text-decoration:none;color:#000; /* header text */ |
| 26 | vertical-align:bottom; |
| 27 | } |
| 28 | .yui-skin-sam .yui-dt th { |
| 29 | margin:0;padding:0; |
| 30 | border:none; |
| 31 | border-right:1px solid #CBCBCB;/* inner column border */ |
| 32 | } |
| 33 | .yui-skin-sam .yui-dt tr.yui-dt-first td { |
| 34 | border-top:1px solid #7F7F7F; /* tbody top border */ |
| 35 | } |
| 36 | .yui-skin-sam .yui-dt th .yui-dt-liner { |
| 37 | white-space:nowrap; |
| 38 | } |
| 39 | .yui-skin-sam .yui-dt-liner { |
| 40 | margin:0;padding:0; |
| 41 | padding:4px 10px 4px 10px; /* cell padding */ |
| 42 | } |
| 43 | .yui-skin-sam .yui-dt-coltarget { |
| 44 | width: 5px; |
| 45 | background-color: red; |
| 46 | } |
| 47 | .yui-skin-sam .yui-dt td { |
| 48 | margin:0;padding:0; |
| 49 | border:none; |
| 50 | border-right:1px solid #CBCBCB; /* inner column border */ |
| 51 | text-align:left; |
| 52 | } |
| 53 | .yui-skin-sam .yui-dt-list td { |
| 54 | border-right:none; /* disable inner column border in list mode */ |
| 55 | } |
| 56 | .yui-skin-sam .yui-dt-resizer { |
| 57 | width:6px; |
| 58 | } |
| 59 | |
| 60 | /* mask */ |
| 61 | .yui-skin-sam .yui-dt-mask { |
| 62 | background-color: #000; |
| 63 | opacity: .25; |
| 64 | *filter: alpha(opacity=25); /* Set opacity in IE */ |
| 65 | } |
| 66 | |
| 67 | /* messaging */ |
| 68 | .yui-skin-sam .yui-dt-message { |
| 69 | background-color:#FFF; |
| 70 | } |
| 71 | |
| 72 | /* scrolling */ |
| 73 | .yui-skin-sam .yui-dt-scrollable table {border:none;} |
| 74 | .yui-skin-sam .yui-dt-scrollable .yui-dt-hd {border-left:1px solid #7F7F7F;border-top:1px solid #7F7F7F;border-right:1px solid #7F7F7F;} |
| 75 | .yui-skin-sam .yui-dt-scrollable .yui-dt-bd {border-left:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F;border-right:1px solid #7F7F7F;background-color:#FFF;} |
| 76 | .yui-skin-sam .yui-dt-scrollable .yui-dt-data tr.yui-dt-last td {border-bottom:1px solid #7F7F7F;} |
| 77 | |
| 78 | /* sortable columns */ |
| 79 | .yui-skin-sam thead .yui-dt-sortable { |
| 80 | cursor:pointer; |
| 81 | } |
| 82 | .yui-skin-sam th.yui-dt-asc, |
| 83 | .yui-skin-sam th.yui-dt-desc { |
| 84 | background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */ |
| 85 | } |
| 86 | .yui-skin-sam th.yui-dt-sortable .yui-dt-label { |
| 87 | margin-right:10px; |
| 88 | } |
| 89 | .yui-skin-sam th.yui-dt-asc .yui-dt-liner { |
| 90 | background:url(dt-arrow-up.png) no-repeat right; /* sorted header gradient */ |
| 91 | } |
| 92 | .yui-skin-sam th.yui-dt-desc .yui-dt-liner { |
| 93 | background:url(dt-arrow-dn.png) no-repeat right; /* sorted header gradient */ |
| 94 | } |
| 95 | |
| 96 | /* editing */ |
| 97 | tbody .yui-dt-editable { |
| 98 | cursor:pointer; |
| 99 | } |
| 100 | .yui-dt-editor { |
| 101 | text-align:left; |
| 102 | background-color:#F2F2F2; |
| 103 | border:1px solid #808080; |
| 104 | padding:6px; |
| 105 | } |
| 106 | .yui-dt-editor label { |
| 107 | padding-left:4px;padding-right:6px; |
| 108 | } |
| 109 | .yui-dt-editor .yui-dt-button { |
| 110 | padding-top:6px;text-align:right; |
| 111 | } |
| 112 | .yui-dt-editor .yui-dt-button button { |
| 113 | background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; |
| 114 | border:1px solid #999; |
| 115 | width:4em;height:1.8em; |
| 116 | margin-left:6px; |
| 117 | } |
| 118 | .yui-dt-editor .yui-dt-button button.yui-dt-default { |
| 119 | background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1400px; |
| 120 | background-color: #5584E0; |
| 121 | border:1px solid #304369; |
| 122 | color:#FFF |
| 123 | } |
| 124 | .yui-dt-editor .yui-dt-button button:hover { |
| 125 | background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1300px; |
| 126 | color:#000; |
| 127 | } |
| 128 | .yui-dt-editor .yui-dt-button button:active { |
| 129 | background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1700px; |
| 130 | color:#000; |
| 131 | } |
| 132 | |
| 133 | /* striping */ |
| 134 | .yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */ |
| 135 | .yui-skin-sam tr.yui-dt-odd { background-color:#EDF5FF; } /* light blue */ |
| 136 | .yui-skin-sam tr.yui-dt-even td.yui-dt-asc, |
| 137 | .yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */ |
| 138 | .yui-skin-sam tr.yui-dt-odd td.yui-dt-asc, |
| 139 | .yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#DBEAFF; } /* dark blue sorted */ |
| 140 | |
| 141 | /* disable striping in list mode */ |
| 142 | .yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */ |
| 143 | .yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */ |
| 144 | .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc, |
| 145 | .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */ |
| 146 | .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc, |
| 147 | .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */ |
| 148 | |
| 149 | /* highlighting */ |
| 150 | .yui-skin-sam th.yui-dt-highlighted, |
| 151 | .yui-skin-sam th.yui-dt-highlighted a { |
| 152 | background-color:#B2D2FF; /* med blue hover */ |
| 153 | } |
| 154 | .yui-skin-sam tr.yui-dt-highlighted, |
| 155 | .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc, |
| 156 | .yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc, |
| 157 | .yui-skin-sam tr.yui-dt-even td.yui-dt-highlighted, |
| 158 | .yui-skin-sam tr.yui-dt-odd td.yui-dt-highlighted { |
| 159 | cursor:pointer; |
| 160 | background-color:#B2D2FF; /* med blue hover */ |
| 161 | } |
| 162 | |
| 163 | /* enable highlighting in list mode */ |
| 164 | .yui-skin-sam .yui-dt-list th.yui-dt-highlighted, |
| 165 | .yui-skin-sam .yui-dt-list th.yui-dt-highlighted a { |
| 166 | background-color:#B2D2FF; /* med blue hover */ |
| 167 | } |
| 168 | .yui-skin-sam .yui-dt-list tr.yui-dt-highlighted, |
| 169 | .yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-asc, |
| 170 | .yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-desc, |
| 171 | .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-highlighted, |
| 172 | .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-highlighted { |
| 173 | cursor:pointer; |
| 174 | background-color:#B2D2FF; /* med blue hover */ |
| 175 | } |
| 176 | |
| 177 | /* selection */ |
| 178 | .yui-skin-sam th.yui-dt-selected, |
| 179 | .yui-skin-sam th.yui-dt-selected a { |
| 180 | background-color:#446CD7; /* bright blue selected cell */ |
| 181 | } |
| 182 | .yui-skin-sam tr.yui-dt-selected td, |
| 183 | .yui-skin-sam tr.yui-dt-selected td.yui-dt-asc, |
| 184 | .yui-skin-sam tr.yui-dt-selected td.yui-dt-desc { |
| 185 | background-color:#426FD9; /* bright blue selected row */ |
| 186 | color:#FFF; |
| 187 | } |
| 188 | .yui-skin-sam tr.yui-dt-even td.yui-dt-selected, |
| 189 | .yui-skin-sam tr.yui-dt-odd td.yui-dt-selected { |
| 190 | background-color:#446CD7; /* bright blue selected cell */ |
| 191 | color:#FFF; |
| 192 | } |
| 193 | |
| 194 | /* enable selection in list mode */ |
| 195 | .yui-skin-sam .yui-dt-list th.yui-dt-selected, |
| 196 | .yui-skin-sam .yui-dt-list th.yui-dt-selected a { |
| 197 | background-color:#446CD7; /* bright blue selected cell */ |
| 198 | } |
| 199 | .yui-skin-sam .yui-dt-list tr.yui-dt-selected td, |
| 200 | .yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-asc, |
| 201 | .yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-desc { |
| 202 | background-color:#426FD9; /* bright blue selected row */ |
| 203 | color:#FFF; |
| 204 | } |
| 205 | .yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-selected, |
| 206 | .yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-selected { |
| 207 | background-color:#446CD7; /* bright blue selected cell */ |
| 208 | color:#FFF; |
| 209 | } |
| 210 | |
| 211 | /* pagination */ |
| 212 | .yui-skin-sam .yui-dt-paginator { |
| 213 | display:block;margin:6px 0;white-space:nowrap; |
| 214 | } |
| 215 | .yui-skin-sam .yui-dt-paginator .yui-dt-first, |
| 216 | .yui-skin-sam .yui-dt-paginator .yui-dt-last, |
| 217 | .yui-skin-sam .yui-dt-paginator .yui-dt-selected { |
| 218 | padding:2px 6px; |
| 219 | } |
| 220 | .yui-skin-sam .yui-dt-paginator a.yui-dt-first, |
| 221 | .yui-skin-sam .yui-dt-paginator a.yui-dt-last { |
| 222 | text-decoration:none; |
| 223 | } |
| 224 | .yui-skin-sam .yui-dt-paginator .yui-dt-previous, |
| 225 | .yui-skin-sam .yui-dt-paginator .yui-dt-next { |
| 226 | display:none; |
| 227 | } |
| 228 | .yui-skin-sam a.yui-dt-page { |
| 229 | border:1px solid #CBCBCB; |
| 230 | padding:2px 6px; |
| 231 | text-decoration:none; |
| 232 | background-color:#fff |
| 233 | } |
| 234 | .yui-skin-sam .yui-dt-selected { |
| 235 | border:1px solid #fff; |
| 236 | background-color:#fff; |
| 237 | } |
| view plain | print | ? |
Configuration for This Example
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
DataTable Control Examples:
- Basic Example
- Progressive Enhancement
- Custom Cell Formatting
- Conditional row coloring
- Nested Headers
- JSON Data Over XHR
- XML Data Over XHR With POST
- XML Data with XPath
- Textual Data Over XHR
- Polling the DataSource
- Adding, Updating, and Deleting Rows
- Client-side Pagination
- Client-side Sorting
- Server-side Pagination and Sorting for Dynamic Data
- Integrating Browser History Manager with Server-side Pagination and Sorting
- XY-scrolling, Y-scrolling, and X-scrolling
- Row Selection
- Cell Selection
- Inline Cell Editing
- Showing, Hiding, and Reordering Columns.
- Highlighting Cells, Rows, or Columns
- Reorder Rows with Drag and Drop
- Quick Edit
- Row Expansion
- Context Menu Integration
- Configuring the Paginator (included with examples for Paginator)
- TabView Integration
- Complex Example of Multiple Features
- Client-side Filtering of Local Data
- Filtering of Dynamic Data
- Datatable with Autocomplete
- Skinning Model
- Ratings (included with examples for ProgressBar Control)
- YQLDataSource (included with examples for DataSource Utility)
- Complex Application (included with examples for Layout Manager)
More DataTable Control Resources:
- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on GitHub
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts
- Color Picker
- Cookie
- Connection Manager
- Container
- DataTable
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- ProgressBar
- Resize
- Rich Text Editor
- Selector
- Slider
- Storage
- SWF
- SWFStore
- Stylesheet
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings