The data grid is critical to all sorts of development on all sorts of platforms and in all sorts of languages. ColdFusion has supported data grids since ColdFusion 2 - first a Java applet, then a Flash control, and in ColdFusion 8 we've added an HTML data grid that can be pre-populated with data, or which can be used to display live data loaded asynchronously. The basic pre-populated data grid functions much like the of old, pass it a query and it displays the data. Here is an example (which uses the example tables that come with ColdFusion): SELECT artistid, lastname, firstname, email FROM artists ORDER BY lastname, firstname Here a retrieves data, and displays the results. The grid is straight client side HTML with CSS and JavaScript. You have control over look and feel including size, columns, colors, and fonts. And users can sort up and down, resize columns, and more. The new also supports Ajax type interaction, where data is not pre-populated, but is asynchronously loaded as needed. Here is a sample data grid: This data grid is displayed in a window created using the new tag (for no good reason other than I like the look of it). The data grid itself has no passed query, instead, it is bound to artists.cfc. When the data grid needs data it fires an asynchronous call to the getArtists() method in artists.cfc, and passes it four pieces of information: the current page, the page size (specified previously in the pagesize attribute), and the column being sorted on and sort direction (if the user opts to sort data). thus requests data, and simply displays whatever ColdFusion returns, automatically supporting paging (assuming there are enough rows to so warrant). Now for the CFC: SELECT artistid, lastname, firstname, email FROM artists ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir# The getArtists returns a structure (containing data in the format required by the data grid), and accepts four arguments, the same four arguments passed in the client side bind attribute. The first two are always passed by the client, and so they are required. The latter two are only passed if the user clicks on a column header to sort the data, and so those arguments are not required and default to "". performs the actual data retrieval, conditionally sorting the data if sorting is required. And finally, the new QueryConvertForGrid() function extracts the desire data subset (using the passed page and pagesize values) and formats it as a structure which is returned to the data grid. This is a basic example, and we'll look at additional functionality in future posts.