Grid is a scrollable <table> where each <row> represents set of related fields (<cell>s). To define such a grid you would use something like this:
Letters in the Latin-1 Set: <table #thetable fixedrows=1> <tr><th>Character<th>Entity<th>Description</th></tr> <tr><td>Á<td>&Aacute;<td>capital A with acute</td></tr> <tr><td>Â<td>&Acirc;<td>capital A with circumflex</td></tr> ... </table>
Such markup combined with desired styling:
table { overflow: auto; width:100%%; height:100%%; prototype:Grid; /* see sources below*/ } ...
and scripting class Grid below will give us interactive grid that can be browsed by the user.
//| //| grid behavior, must be applied to tables. //| //| add style="overflow:auto" and fixedrows="1" if you need it scrollable //| //| NOTIFICATIONS: //| Row Click: //| calls this.onRowClick(rowElement) //| Header Click: //| calls this.onHeaderClick(headerCellElement) //| // Click on Header cell, // override it for particular grid instance // E.g. you may chose to reorder table using this column as a key. // Click on some row // override it for particular grid instance // returns current row (if any) "tr:current"// returns current column (if any) "td:current,th:current"// return current cell in first header row // set current row // get previously selected row: // already here, nothing to do. // drop state flag // set state flag // get previously selected column: // already here, nothing to do. // drop state flag // set state flag // get number of fixed Rows in the table "fixedrows""table""grid: attached to wrong element - %s\n"// auxiliary function, returns row this target element belongs to // auxiliary function, returns row this target element belongs to // click on the row // click on the header cell // as it is always ours then stop event bubbling // handling only KEY_DOWN //stdout.printf("onKey:%x\n",evt.keyCode); // this row is further than scroll pos - height of scroll area // to last fully visible // just in case // this row is further than scroll pos - height of scroll area // to last fully visible // just in case // type Grid