XSLDataGrid Usage

Requirements

Somewhere in your html (probably in the <head>) you'll need to include the following, if you haven't already.

<script type="text/javascript" src="PATH_TO/prototype.js"></script>
<script type="text/javascript" src="PATH_TO/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="PATH_TO/sarissa.js"></script>
<script type="text/javascript" src="PATH_TO/XSLDataGrid/Utility.js"></script>
<style type="text/css">@import "PATH_TO/XSLDataGrid/XSLDataGrid.css";</style>
<script type="text/javascript" src="PATH_TO/XSLDataGrid/XSLDataGrid.js"></script>
Links to the other libraries
Download prototype
Download scriptaculous
Download sarissa

Javascript Syntax

Instantiation in Javascript of the XSLDataGrid is done in much the same way as functions are in Prototype and Scriptaculous.

var foo = new XSLDataGrid( 'containerDiv', { option1: value1, option2: value2, etc ... } );
Option Type Default Description
transformer string {client|server} client Where will the xsl transform(s) take place? If "server", then all get requests to "url" are expected to return the transformed xhtml - i.e. transformed on the server. If "client", then the grid will either transform inline xhtml or else go and get semantic xhtml from "url" and subsequently transform it in the browser. [Note: client sort is currently limited to xslt 1.0 data-type limits: text & number - qname not implemented yet for dates]
url string (none) An optional URL for fetching either the semantic xhtml or else the transformed xhtml from a server. (i.e. XSLDataGridTestTransform.php)
extra_parameters string (none) A string of any extra parameters to append to "url" with each get request. (i.e. "session_id=lindsey123&haxor=true")
width number 300 Width in pixels.
height number 150 Height in pixels.
prefetch bool true Should the grid perform a get request to "url" on initialization?
gridPopupDivId string gridPopupDivId If you're embedding the grid into an application you may want to use another absolutely positioned empty div for the right-click popup context menus.
rowReloadLimitOnRearrange number 200 If there are more than this number of rows in the grid, do not try to perform the header rearranging in the browser. In IE, table DOM manipulation with more than 200 rows seems pretty slow to me.
hideColContextMenuDelay number 1000 How long should the right click context menu stay up after it loses focus(in milliseconds)?
scrollerWidth number 19 Scrollbar width in pixels.
debugging bool false If debugging is set to true, lots of feedback information will be sent to Firefox's awesome Firebug extension console using console.debug().

XHTML Markup

Skeleton of required base markup: 
<div id="container_id">
   <table
      class="XSLTable"
      width="optional{number}"
      height="optional{number}"
      >
      <thead>
         <tr>
            <th
               id="{string}"
               width="{number}"
               class="SEE TABLE BELOW"
               data_type="optional{text|number}"
               >Column Label
            </th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Column Data</td>
         </tr>
      </tbody>
   </table>
</div>
In the above skeleton, you'll need to fill in width, height, id, and class. Having those width and height values will also help in case javascript is disabled in the client.

data-type is optional for client-side xsl sorting. Right now the clientside sort technique is purely xslt (only number and text sorting). I've not written any special sort routines for other (qname) data types, like dates - but I welcome suggestions.

Currently, width and height must be numbers (in pixels), as opposed to percentages.

THEAD/TR/TH class: You can use all or any of the following per column:
Option Description
sortable Include this class if the column can be sorted and grouped on. If you're implementing server side xslt you'll need to look at the sort and group parameters being sent in the url.
rearrageable Include this class if the column can be reordered via drag and drop.
resizable Include this class if the column can be resized.
filterable Include this class if the column can be filtered on.
grouped This will automatically group the results by this column. It's a little odd to do this in the initial load, as opposed to using the right-click-column menu, but it's here.