~smagoun/whoopsie/whoopsie-lp1017637

<p>The DataTable widget displays data in a tabular format. Use plugins and extensions to add features and functionality to the <code>Y.DataTable.Base</code> class.</p>

</div>

YUI().use("datatable-base-deprecated", function (Y) {

var simpleCols = ["id","name","price"],

simpleData = [

{id:"ga_3475", name:"gadget", price:"$6.99"},

{id:"sp_9980", name:"sprocket", price:"$3.75"},

{id:"wi_0650", name:"widget", price:"$4.25"}

labeledCols = [

{key:"mfr_parts_database_id", label:"Mfr Part ID", abbr:"ID"},

{key:"mfr_parts_database_name", label:"Mfr Part Name", abbr:"Name"},

{key:"mfr_parts_database_price", label:"Wholesale Price", abbr:"Price"}

labeledData = [

{mfr_parts_database_id:"ga_3475", mfr_parts_database_name:"gadget", mfr_parts_database_price:"$6.99"},

{mfr_parts_database_id:"sp_9980", mfr_parts_database_name:"sprocket", mfr_parts_database_price:"$3.75"},

{mfr_parts_database_id:"wi_0650", mfr_parts_database_name:"widget", mfr_parts_database_price:"$4.25"}

dt1 = new Y.DataTable.Base({columnset:simpleCols, recordset:simpleData, summary:"Price sheet for inventory parts", caption:"Example table with simple columns"}).render("#simple"),

dt2 = new Y.DataTable.Base({columnset:labeledCols, recordset:labeledData, summary:"Price sheet for inventory parts", caption:"These columns have labels and abbrs"}).render("#labels");

});

</script>

</div>

<h2>Simple DataTable Use Cases</h2>

100

<p>A basic table can be rendered into a given container by passing in a simple array of columns and an array of data objects into the constructor. As long as the columns map directly to the keys of the data objects, the table will be generated automatically from the data provided.</p>

101

102

<pre class="code prettyprint">YUI().use("datatable-base-deprecated", function(Y) {

103

var cols = ["id","name","price"],

104

data = [

105

{id:"ga-3475", name:"gadget", price:"$6.99"},

106

{id:"sp-9980", name:"sprocket", price:"$3.75"},

107

{id:"wi-0650", name:"widget", price:"$4.25"}

108

109

dt = new Y.DataTable.Base({

110

columnset: cols,

111

recordset: data,

112

summary: "Price sheet for inventory parts",

113

caption: "Example table with simple columns"

114

}).render("#example");

115

});</pre>

116

117

118

<p>Your column definitions may be an array of object literals in order to support any number of configurations that are supported by the <code>Y.Column</code> class. For instance, you may wish to define a <code>label</code> that will be displayed in each column header. Use the <code>key</code> property to define where data for the column will be coming from.</p>

119

120

<pre class="code prettyprint">YUI().use("datatable-base-deprecated", function(Y) {

121

var cols = [

122

{ key: "mfr_parts_database_id", label: "Mfr Part ID", abbr: "ID"},

123

{ key: "mfr_parts_database_name", label: "Mfr Part Name", abbr: "Name"},

124

{ key: "mfr_parts_database_price", label: "Wholesale Price", abbr: "Price"}

125

126

data = [

127

{ mfr_parts_database_id: "ga_3475", mfr_parts_database_name: "gadget", mfr_parts_database_price: "$6.99"},

128

{ mfr_parts_database_id: "sp_9980", mfr_parts_database_name: "sprocket", mfr_parts_database_price: "$3.75"},

129

{ mfr_parts_database_id: "wi_0650", mfr_parts_database_name: "widget", mfr_parts_database_price: "$4.25"}

130

131

dt = new Y.DataTable.Base({

132

columnset: cols,

133

recordset: data,

134

summary: "Price sheet for inventory parts",

135

caption: "These columns have labels and abbrs"

136

}).render("#example");

137

});</pre>

138

139

</div>

140

</div>

141

</div>

142

143

144

145

146

147

148

149

150

<h2 class="no-toc">Examples</h2>

151

</div>

152

153

154

155

156

157

158

<a href="datatable-basic.html">Basic DataTable</a>

159

</li>

160

161

162

163

164

<a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>

165

</li>

166

167

168

169

170

<a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>

171

</li>

172

173

174

175

176

<a href="datatable-formatting.html">Formatting Row Data for Display</a>

177

</li>

178

179

180

181

182

<a href="datatable-nestedcols.html">Nested Column Headers</a>

183

</li>

184

185

186

187

188

<a href="datatable-sort.html">Column Sorting</a>

189

</li>

190

191

192

193

194

<a href="datatable-scroll.html">Scrolling DataTable</a>

195

</li>

196

197

198

</ul>

199

</div>

200

</div>

201

202

203

204

</div>

205

</div>

206

</div>

207

</div>

208

209

210

211

212

</body>

213

</html>

Older »